静态文件未提供给我的个人博客页面

Question

我在为我网站的博客部分的个人博客帖子提供css文件时遇到了问题。

所以它的工作方式是:转到/ blog -你会得到博客页面，它工作得很好。

但是当我试图访问/blog/post1时，例如，我得到了一个错误的http://localhost:4000/blog/static/css/style.css

我将非常感谢你的帮助，因为我是个新手，不熟悉express和路由文件。干杯。

我的文件结构如下所示的blog /node_modules /src /mock /public /css style.css /templates /partials _head.jade _nav.jade blog.jade index.jade layout.jade post.jade app.js

所以它的工作方式是:转到/ blog -你会得到博客页面，它工作得很好。

但是当我试图访问/blog/post1时，例如，我得到了一个错误的http://localhost:4000/blog/static/css/style.css

下面是我各自的文件的样子，也许我遗漏了一些东西：

app.js

"use strict";

var express = require("express"),
    posts = require("./mock/posts.json");

var postsLists = Object.keys(posts).map(function(value){
    return posts[value]
    });

var app = express();

app.use("/static", express.static(__dirname + "/public"))

app.set("view engine", "jade");
app.set("views", __dirname + "/templates");

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

app.get("/blog/:title?", function(req, res){
    var title = req.params.title;
    if (title === undefined) {
        res.status(503);
        res.render("blog", {posts: postsLists});
    } else {
    var post = posts[title] || {};
    res.render("post", {post: post} );
    }
});

app.get("/about", function(req, res){
    res.send("<h1>About Page</h1>");
})

app.get("/projects", function(req, res){
    res.send("<h1>Projects Page</h1>")
})

app.listen(4000, function(){
    console.log("Frontend server is running on port 4000.")
});

_head.jade

head
meta(charset="UTF-8")
link(rel="stylesheet", href="static/css/style.css")

layout.jade

doctype html
html(lang="en")
include ./partials/_head.jade
body
block content

blog.jade

extends ./layout

block content
    section(id="postHolder")
        for post in posts
            div.post
                h2 #{post.title}
                p #{post.body}
                a(href="/blog/" + post.title)
                    button Read More

post.jade

extends ./layout.jade

block content
    section
            div.post
                h2 #{post.title}
                p #{post.body}
                p This is the actual post page itself.

Answer 1

我想这么做会让你成功的-

head
  meta(charset="UTF-8")
  link(rel="stylesheet", href="/css/style.css")

Answer 2

好的，我想让你注意一下我的_head.jade文件：

head
meta(charset="UTF-8")
link(rel="stylesheet", href="/static/css/style.css")

我需要引用绝对路径，并在"static“前面添加"/”

以前是static/css/style.css，现在是/static/css/style.css，我对此非常陌生，我不知道我是否正确地解释了绝对路径的引用。