从子路由渲染的 Jade 模板链接到静态文件

Question

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

当我将请求路由到 /about 或 /contact 等资源时，一切都按预期工作。但我发现只要我的资源有多个“级别”，就像/about/me 一样，仍然会呈现相同的翡翠视图，但它最终会出现在没有 CSS 样式的浏览器中！

所以我的假设是，由资源级别表示的虚拟目录搞砸了，jade 认为它必须查找相对路径（在这种情况下，在哪里可以找到包含静态文件的 public 目录）。

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

有这样的解决方案吗？

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开头的正斜杠，将相对路径变成了绝对路径。