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

时间:2014-05-03 17:09:21

标签: node.js express pug

我对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模板中添加前缀,因为我必须为不同的资源类型使用相同的模板,所以我需要一个适用于任意资源级别的解决方案。

有这样的解决方案吗?

1 个答案:

答案 0 :(得分:5)

我猜你的Jade模板有如下内容:

doctype html
  head
    link(rel="stylesheet", type="text/css", href="css/style.css")
    ...

样式表的href是一个相对路径,这意味着您的浏览器将查找相对于当前页面的CSS文件。例如:

  • http://example.com/abouthttp://example.com/css/style.css
  • http://example.com/about/companyhttp://example.com/about/css/style.css

您可以将href更改为绝对路径,这样无论您在哪个子目录中,CSS文件位置始终是常量:

link(rel="stylesheet", type="text/css", href="/css/style.css")

此处的关键更改是href开头的正斜杠,将相对路径转换为绝对路径。