Jade：从主页以外的任何地方修改 <head>

Question

更新：

我还post将这个问题编辑到 Jade GitHub 存储库。我也把它放在这里，以供将来（循环）参考： https://github.com/jadejs/jade/issues/1943

原文post：

在默认节点 + express + jade 应用程序中，我正在尝试构建一些可以包含在某些页面中的常见可重用组件（菜单、页脚...）。我在尝试从块或包含的文件中添加对 .css 或 .js 文件的引用时遇到了困难。我想这样做是因为我不想包含所有不需要的样式和脚本。

文件夹结构是这样的：

根目录
- public
  - javascripts
    - main.js
    - menu.js
  - 样式表
    - main.css
    - menu.css
- 观看次数
  - 已分享
    - layout.jade
    - menu.jade
    - footer.jade
  - index.jade

layout.jade 文件：

doctype html
html
  head
    title= title
    link(rel="stylesheet", href="stylesheets/main.css")
    script(src="javascripts/main.js")
  body
    block content

index.jade 文件：

extends shared/layout

block content
  h1= title
  p Welcome to #{title}

在 menu.jade 中有一些代码需要 menu.css 和 menu.js 文件。

现在我需要一种方法来仅在使用 menu.jade 文件时将这些文件添加到页面的 <head>。

我几个小时前开始使用 Jade，所以我很可能遗漏了文档中的某些内容。

谢谢！

Answer 1

您可以在 menu.js 中使用 jQuery 这样做：

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");

不过，我会提醒您注意这种做法。一种替代方法是构建一个步骤，将所有 CSS 文件连接在一起，并在单个 css 文件中提供所有样式。 LESS and cssmin 在这里是不错的选择，它们有很好的模块可以在 grunt 或 gulp 中为您自动执行此操作，无论您使用哪种。

您确实提到如果您不需要所有样式，您不想包含它们，但我建议让网络浏览器下载许多小 css 文件会比让它下载一个大文件，特别是如果你通过像 nginx 这样使用 gzip 的网络服务器提供这些文件，或者如果你通过 CloudFront.

这样的 CDN 提供静态文件

Jade：从主页以外的任何地方修改 <head>

Jade: modify <head> from any place other than the main page

node.js

express

pug

templating-engine

更新：

原文post：