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

【问题标题】：Static file not being served to my individual blog pages静态文件未提供给我的个人博客页面
【发布时间】：2016-08-23 20:38:02
【问题描述】：

我无法将 css 文件提供给我网站博客部分中的各个博客帖子。

所以它的工作方式：转到 /blog- 你会得到博客页面，它工作正常。

但是，例如，当我尝试访问 /blog/post1 时，我遇到了错误 http://localhost:4000/blog/static/css/style.css

感谢您的帮助，因为我对表达和路由文件还很陌生。干杯。

我的文件结构是这样的 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.

【问题讨论】：

如果将link(rel="stylesheet", href="static/css/style.css") 更改为link(rel="stylesheet", href="public/css/style.css") 会发生什么？
我所有的 CSS 在我的所有页面上都停止工作。这是在我的 app.js app.use("/static", express.static(__dirname + "/public")) 的第 12 行处理的

标签： css node.js express pug

【解决方案1】：

好的，所以我想提请您注意我的 _head.jade 文件：

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

我需要引用绝对路径并在“静态”前面添加“/”

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

【讨论】：

【解决方案2】：

我想这样做会让你到达那里 -

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

【讨论】：