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

时间:2016-04-28 21:11:49

标签: css node.js express pug

我无法将css文件提供给我网站博客部分的个别博客文章。

所以它的工作方式: 转到/博客 - 您可以获得博客页面并且工作正常。

但是当我试图去,例如,/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/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.

2 个答案:

答案 0 :(得分:3)

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

Path=string,Args=string,string,Name=string,Path=string2,Args=string2,Name=string2

答案 1 :(得分:0)

好的,所以我想提请你注意我的_head.jade文件:

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

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

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