1

更新：

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

原帖：

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

文件夹结构是这样的：

  • 根
    • 上市
      • javascripts
        • main.js
        • 菜单.js
      • 样式表
        • main.css
        • 菜单.css
    • 意见
      • 共享
        • 布局.jade
        • 菜单.jade
        • 页脚.jade
      • 索引.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 文件。

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

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

谢谢！

4

1 回答 1

1

您可以menu.js像这样使用 jQuery 执行此操作：

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

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

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

于 2015-04-30T16:21:50.420 回答