Jade 是Node的模板引擎,可以用它来快速地编写HTML代码。在NPM下用命令npm install jade进行安装。本文大部分内容翻译自官网http://jade-lang.com/。
其他后台非Node的项目需要编写HTML的也可以用Jade先写好再导出HTML
下面来看看Jade提供了哪些有利于快速编写HTML的特性
1.属性
标签的属性看上去和HTML比较类似,例如
a(href='google.com') Google
将会生成
另外,可以在Jade中定义一些JS的变量用来做判定,像这样
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
要注意的是,var前面的"-"号不能漏,否则的话,这一行也会被解析成一个标签
在解析的过程中,如果不需要把属性中的特殊符号解析,要这样写
div(unescaped!="")
那么代码就会被解析为
大于号和小于号不会被解析城HTML符号,使用时要注意防止跨域脚本带来的安全问题
可以用数组标识一组类名,应用于标签上
如
-var classes = ['foo','bar','baz']
a(class=classes)
将生成
另外,应用单个类可以直接这样写(类似于emmet插件)
a.button
如果不写标签将默认生成div
类似的,id可以用#表示
如,a#main-link
2.条件
同样可以将变量用于条件判断,官网给出了这样一个例子
- var friends = 10
p you have #{friends} friends
同样的也支持if else
根据条件会解析出相应的语句。这个功能对于不是用Node.js作为后台开发的项目用处不大。
3.代码
Jade允许在模板中些Javascipt代码,代码分为这三种类型
1)不缓存的代码(Unbuffered Code)
-for ( var x = 0; x < 3; x++)
li item
这段以-开头的代码会被立刻解析输出
2)有缓存的代码(Buffered Code)
有缓存的代码以=开头,将先计算=号右边的表达式再进行解析,如
p= 'This code is' + '
就相当于解析
p='This code is
3)不转码的缓存代码(Unescaped Buffered Code)
以"!="开头,属性或者标签内的内容若包含特殊符号将不会被转码,所以还是要注意跨域脚本的安全问题
同样可以定义变量用于填充属性或内容
- var user = {name: 'Forbes Lindesay'}
p Welcome #{user.name}
p Welcome !{user.name}
上面的语法表示的是转码的解析, Welcome <strong>Forbes Lindesay</strong>
下面的则是不转码
Welcome Forbes Lindesay
4.模板继承
对于写原生HTML的同学来说,这是非常实用的功能,可以代替以往的复制粘贴过程。
先在模板文件中写好框架
//- layout.jade
doctype html
html
head
block title
title Default title
body
block content
然后在继承的jade文件中只需要实现这两个block即可
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
支持多级继承。
在模板中可以添加默认内容,如果实现了block将会覆盖
可以用block append 或block prepend在模板位置的前或后添加一些代码
block append head
script(src='/vendor/three.js')
script(src='/game.js')
5.包含
可以将一个jade文件作为一个模块,用其他jade文件包含
例如
//- includes/head.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
//- index.jade
html
include ./includes/head.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
//- includes/foot.jade
#footer
p Copyright (c) foobar