css 没有在所有带有 express-handlebars 的路线上呈现

Question

只有基本路线使用 css 呈现。所以 / ， /home ， /about 和 /portfolio 没有问题。但是 /portfolio/project1 或 about/biography 在没有 css

的情况下呈现

这是我的代码

const express = require('express');
const xhbs = require('express-handlebars');
const app = express();

app.use(express.static('public'));

app.use(express.urlencoded({
    extended:true
}));

const port = process.env.PORT || 3000;

app.engine('handlebars', xhbs({
    defaultLayout:'main'
}));

app.set('view engine', 'handlebars')

app.get('/portfolio', (req, res)=>{//css works fine on this route
        res.render('portfolio');
});    

app.get('/portfolio/project1', (req, res)=>{//css has no effect here
    res.render('project1');
});

我的文件结构是这样的

public
    css
        styles.css
views
    layouts
        main.handlebars
server
    server.js

Answer 1

您应该为静态中间件使用绝对路径

app.use(express.static(path.join(__dirname, 'public')));

Answer 2

您应该使用 css link 相对于根目录，例如 '/css/styles。css' 这可能有效。

说明: 如果源地址没有'/'，请求将转到当前目录。例如。如果向 css/style.css 发出请求并且您在路径 'project/project1' 上，那么对 style.css 的请求将是 project/project1/css/style.css，这将导致错误 404.

以“/”开头的请求将相对于 public 根目录。因此，从任何路径请求将始终转到 public.

的根目录

希望对您有所帮助。

Answer 3

您可以在 handlebars 文件的头部使用 base 标签

<base href="http://localhost:5000">

css 没有在所有带有 express-handlebars 的路线上呈现

css not rendered on all routes with express-handlebars

node.js

handlebars.js