Jade 中的布局继承

Question

Jade 中的布局继承

5

如果你不知道什么是jade。
我在模板继承系统方面遇到了问题。我的文件结构如下：

/views/
   |-- layout.jade
   /products/
      |-- index.jade
      |-- product.jade
/static/
   /stylesheets/
      |-- style.css

问题在于加载产品页面时，它会接收一个id作为参数（如果没有/id，它将正常加载），尽管布局仍然正确地扩展，但样式表未正确加载（路径已损坏）。我做对了一半，产品的索引页面中样式表加载得很好。

Layout.jade

  head
    link(rel='stylesheet', href='stylesheets/style.css')

- andrei

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin Beckwith · Accepted Answer

你的 href 中可能是相对路径。在查阅 Express 文档时，我发现最常用的方法是像这样从站点的根目录引用样式表（请注意前面的 /）：

link(rel='stylesheet','/stylesheets/style.css')

这种方式的好处在于易于实现，在多层路由（/about，/about/me等）中也能很好地工作。但负面影响是不支持应用程序目录深度。例如，如果您想将您的应用程序托管在http://yourserver/yourapps/yourapp，这将会成为一个问题。我不知道您是否关心此问题，大多数 Express 的示例显然并不关注它 :-)

然而，如果你想以正确的方式完成这个任务，Express GitHub 网站上有一个例子：blog。https://github.com/visionmedia/express/tree/master/examples/blog 这里的方法是使用一个中间件组件来获取基本 URL，并将其放入传递给布局视图的本地内容中。这是您的 HTML 的样子：

!!! 5
html
  head
    title Blog
    link(rel='stylesheet', href=base + '/style.css')
  body
    #container!= body

重要的部分是要检查 middleware/locals.js、app.js 中的中间件组件连接，以及 layout.jade 中使用基础 href 的部分。祝编码愉快！