Я создаю веб-страницу локально и пытаюсь связать файл css со всеми файлами .ejs через файл заголовка.Он успешно связывает 2 из 3 файлов, но мой последний файл не может получить стили таблицы стилей.
Все остальные вопросы, связанные с stackoverflow, похоже, вообще не в состоянии связать css, ноЯ могу.Я не вижу проблемы с моими css или заголовочными файлами, так как они действительно работают для некоторых, поэтому я предполагаю, что это связано с моим файлом app.js, но код кажется практически идентичным видеоурокам, за которыми я следуювместе с.
Header.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YelpCamp</title>
<link rel="stylesheet" type="text/css" href="css/yelpcamp.css"/>
</head>
<body>
<nav>
<a href="/"><button class="navbutton">YelpCamp</button></a>
<a><button class="navbutton">Login</button></a>
<a><button class="navbutton">Sign Up</button></a>
<a><button class="navbutton">Logout</button></a>
</nav>
new.ejs (css не работает при доступе к этому файлу)
<% include partials/header %>
<main>
<h1>Create A New Campground</h1>
<form id="newcamp" method="POST" action="/campgrounds">
<input type="text" name="name" required>
<input type="url" name="url" required>
<button type="submit">Submit!</button>
</form>
<a href="/campgrounds">Go Back</a>
</main>
<% include partials/footer %>
campgrounds.ejs (css работает с этим файлом)
<% include partials/header %>
<div id="container">
<header>
<h1>Welcome to YelpCamp!</h1>
<p>View our hand-picked campgrounds from all over the world</p>
<a href="/campgrounds/new"><button>Add New Campground</button></a>
</header>
<main>
<% campgrounds.forEach( campground => { %>
<figure>
<img src="<%= campground.image %>">
<figcaption><strong><%= campground.name %></strong></figcaption>
</figure>
<% }); %>
</main>
</div>
app.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");
const campgrounds = [
{name: "Banff", image: "images/banff.jpg"},
{name: "Jasper", image: "images/jasper.JPG"},
{name: "Mosquito Creek", image: "images/mosquito_creek.jpg"}
];
app.get("/", (req, res) => {
res.render("landing_page");
});
app.get("/campgrounds", (req, res) => {
res.render("campgrounds", {campgrounds: campgrounds});
});
app.post("/campgrounds", (req, res) => {
campgrounds.push({name: req.body.name, image: req.body.url});
res.redirect("/campgrounds");
});
app.get("/campgrounds/new", (req, res) => {
res.render("new");
});
app.listen(3000, () => {
});
Структура файла
.
+ --- public
| --- + --- css
| --- + --- yelpcamp.css
| --- + --- images
+ --- views
| --- + --- partials
| -- | --- + --- footer.ejs
| --- | --- + --- header.ejs
| --- + --- campgrounds.ejs
| -- + --- landing_page.ejs
| --- + --- new.ejs
+ --- app.js