node.js - 从子路由呈现的 Jade 模板链接到静态文件

Question

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

当我将请求路由到诸如 /about 或 /contact 之类的资源时，一切都按预期进行。但是我发现，一旦我的资源具有多个“级别”，例如 /about/me，相同的 jade View 仍会呈现，但它最终在没有 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 开头的正斜杠，将相对路径变成了绝对路径。