链接到从子路由呈现的Jade模板中的静态文件

Question

我对Node.js/Express/Jade有一个非常基本的问题,这个问题难以描述.在我的node.js应用程序中,我使用Express框架来路由HTTP请求.我还使用Jade模板作为视图,他们自己链接到我通过app.use(express.static(__dirname + '/public'));命令声明为static的目录中的文件(css,js等).

当我将请求路由到类似资源/about或/contact一切按预期工作时.但我发现,只要我的资源有多个'级别',所以/about/me同样的玉视图仍会呈现,但它最终会在没有CSS样式的浏览器中出现!

所以我的假设是资源级别所代表的虚拟目录搞砸了jade认为必须寻找相对路径的地方(在这种情况下,在哪里找到public包含静态文件的目录).

我不能只为jade模板中的路径添加前缀,因为我必须为不同的资源类型使用相同的模板,所以我需要一个适用于任意资源级别的解决方案.

有这样的解决方案吗？

Answer 1

我猜你的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,将相对路径变为绝对路径.