CSS 未应用于单独的 ejs 文件

Question

所以我想弄清楚为什么我的 CSS 文件不会加载到我的一个 ejs 文件中。我确定我已经正确添加了 header 并制作了一个测试页面并仅使用 header/navbar 和 CSS 加载渲染它。

我唯一能想到的是 blog.ejs 文件在我的 app.js 文件中的呈现方式。这是一个博客项目，所以我使用路由参数让每个 post 在其自己的页面上呈现。

我的 app.js

请参阅下面的代码

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const ejs = require("ejs");
const _ = require("lodash");
const app = express();

const startTitle ="Best";
const startContent="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

app.use(express.static("public"));
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));


let blogs = [];

app.get("/", function (req, res){
  res.render("home",{
    startTitle: startTitle,
    startContent: startContent,
    blogs:blogs
  });
});

app.get("/compose", function (req, res){
  res.render("compose");
});


app.get("/blogs/:blogId", function (req, res) {
  const requestedTitle = _.lowerCase(req.params.blogId);

  blogs.forEach(function(blog){
    const storedTitle = _.lowerCase(blog.postedTitle);

    if(requestedTitle === storedTitle){
      res.render("blog",{
        title: blog.postedTitle,
        content: blog.postedContent
      });
    }
  });


});


app.post("/compose", function (req, res){
      const blog = {
          postedTitle: req.body.title,
          postedContent: req.body.content
      };

  blogs.push(blog);
  res.redirect("/");
});


app.listen(3000, function(req, res){
  console.log("server started on port 3000");
});

Answer 1

这听起来像是您的 CSS 文件的 link 不是以 / 开头。如果它只是一个普通的亲戚 URL，路径开头没有 http:// 或 /，那么浏览器会将网页的路径添加到您的 link在请求样式 sheet 之前编辑 URL。这将导致浏览器在网页具有前导路径时请求不同的页面，例如来自 /blogs/blogID 之类的页面，而您的服务器不会期望这样。

因此，请确保所有样式 sheet link 都以 / 开头，这样无论主机上的路径如何，您都可以向服务器发出一致的请求网页。

CSS 未应用于单独的 ejs 文件

CSS not being applied on seperate ejs file

css

ejs

node.js