Я рассмотрел некоторые похожие вопросы о переполнении стека, но, похоже, у меня ничего не работает. Может кто-нибудь помочь?
Я попытался изменить путь на странице main.handlebars, и в какой-то момент это сработало на мгновение, но я не уверен, что я изменил, что остановило его работу.
Я убедился, что установил все соответствующие npms и сослался на них. Я попытался изменить расположение файла на сервере. js, на который я ссылаюсь в папке stati c.
Ошибка консоли гласит: отказано в применении стиля из 'http://localhost: 3000 / assets / css / index. css', потому что его тип MIME ('text / html ') не поддерживается MIME-типом таблицы стилей, и включена строгая проверка MIME.
Я пытался указать файл css как type = "text / css", но это не помогло изменить что-нибудь.
Вот моя страница main.handlebars:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ADORE - Animals Deserving of Rescue Everywhere</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|IBM+Plex+Sans&display=swap" rel="stylesheet"/>
<!--Custom CSS -->
<link type="text/css" rel="stylesheet" href="/assets/css/index.css"/>
</head>
<body id="newBackground">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg static-top" id="navbar-color">
<div class="container">
<a class="navbar-brand navtext-color" href="">ADORE - Animals </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<div class="dropdown show">
<a class="btn dropdown-toggle nav-link navtext-color" role="button" href="about/about.html" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="/mission">Mission Statement</a>
<a class="dropdown-item" href="/board">Board Members</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/adopt">Adopt</a>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/foster">Foster</a>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/volunteer">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/resources">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link navtext-color" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
{{{ body }}}
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.7/handlebars.js" integrity="sha256-3kxM38zABJY692X6ViIlt9FsBimhck0ZlsLtuA7R+0Y=" crossorigin="anonymous"></script>
Вот мой сервер. js Страница:
var express = require("express");
var bodyParser = require("body-parser");
require('dotenv').config();
var path=require('path');
var exphbs = require("express-handlebars");
const axios = require('axios');
// Specify the port.
var PORT = process.env.PORT || 3000;
// Create an instance of the express app.
var app = express();
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
app.use("/public", express.static(__dirname + "/public"));
// Set Handlebars as the default templating engine.
app.engine("handlebars", exphbs({ defaultLayout: "main" }));
app.set("view engine", "handlebars");
var routes = require("./controllers/routes.js");
app.use(routes);
app.listen(PORT, function() {
console.log("App now listening at localhost:" + PORT);
});
Мои маршруты. js:
var express = require("express");
var router = express.Router();
const board = require("../board.js");
router.get("/mission", function(req, res) {
console.log("something happened");
res.render("mission");
});
router.get("/board", function(req,res){
console.log("here is more");
res.render("board", board);
});
module.exports = router;
И моя файловая структура:
Изображение моей файловой структуры