我对Node.js / Express / Jade有一个非常基本的问题,这个问题难以描述。在我的node.js应用程序中,我使用Express框架来路由HTTP请求。我还使用Jade模板作为视图,他们自己链接到我通过app.use(express.static(__dirname + '/public'));
命令声明为静态的目录中的文件(css,js等)。
当我将请求路由到/about
或/contact
等资源时,一切都按预期工作。但我发现,只要我的资源有多个级别,像/about/me
一样,相同的玉视图仍会呈现,但它最终会在没有CSS样式的浏览器中结束!
所以我的假设是资源级别所代表的虚拟目录搞砸了jade认为必须寻找相对路径的地方(在这种情况下,在哪里找到包含静态文件的public
目录)。
我不能在jade模板中添加前缀,因为我必须为不同的资源类型使用相同的模板,所以我需要一个适用于任意资源级别的解决方案。
有这样的解决方案吗?
答案 0 :(得分:5)
我猜你的Jade模板有如下内容:
doctype html
head
link(rel="stylesheet", type="text/css", href="css/style.css")
...
样式表的href
是一个相对路径,这意味着您的浏览器将查找相对于当前页面的CSS文件。例如:
http://example.com/about
→http://example.com/css/style.css
http://example.com/about/company
→http://example.com/about/css/style.css
您可以将href
更改为绝对路径,这样无论您在哪个子目录中,CSS文件位置始终是常量:
link(rel="stylesheet", type="text/css", href="/css/style.css")
此处的关键更改是href
开头的正斜杠,将相对路径转换为绝对路径。