Jade:从主页以外的任何地方修改<head>
更新:
我也把这个问题发布到了Jade GitHub仓库。 我也把它放在这里,以供将来(循环)参考: https : //github.com/jadejs/jade/issues/1943
原文:
在一个默认的节点+ express + jade应用程序中,我正在尝试构build一些常用的可重用组件(菜单,页脚…),这些组件可以包含在一些页面中。 我试图从块或包含文件中添加对.css或.js文件的引用时被卡住了。 我想这样做,因为如果我不需要它们,我不想包含所有的样式和脚本。
文件夹结构是这样的:
- 根
- 上市
- JavaScript的
- main.js
- menu.js
- 样式表
- 的main.css
- menu.css
- JavaScript的
- 意见
- 共享
- 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,所以很有可能我在文档中遗漏了一些东西。
谢谢!
你可以用你的menu.js
jQuery来做到这一点:
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");
然而,我会告诫你这种做法。 另一种方法是build立一个将所有CSS文件连接在一起的构build步骤,并将所有样式放在一个css文件中。 LESS和cssmin在这里是很好的select,他们有很好的模块来自动化你的咕噜咕噜或吞咽,无论你正在使用。
你提到如果你不需要它们,你不想包括所有的样式,但是我build议有一个web浏览器下载许多小的css文件比下载一个大的文件要慢,特别是如果你可以通过一个像使用gzip的nginx这样的web服务器来处理这些文件,或者你通过像CloudFront这样的CDN来提供你的静态文件。