hello.jade
使用npm安装jade，然后新建一个文件：
doctype html
html
head
title Hello Jade
body
h1 Welcome To Jade Cook Book For Chinese
使用命令，查看输出：
jade -P hello.jade//本地会生成hello.html
我使用sublime，安装了插件后，选择编译也能生成html文件。
基本语法
每行第一个为标签，通过缩进来表示标签的嵌套
注释
//来注释当前行
块注释是 // 后换行并缩进
行内嵌套
html: head: title Tag Demo
body
p This is a Tag Demo
<html>
<head>
<title>Tag Demo
<body>
<p>This is a Tag Demo</p>
</body>
</title>
</head>
</html>
标签后加/–自定义封闭标签
属性
a(href="google.com")
//<a href="google.com"></a>
转义属性
div(escaped="<code>")
div(unescaped!="<code>")
//
<div escaped="<code>"></div>
<div unescaped="<code>"></div>
样式属性
p(style=”color:red;font-size:33px”) 样式
class/id
a.commit
a#commit
//
<a class="commit">
<a id="commit">
a.commit.first //<a class="commit first"></a>
//or
- var classes = ['commit','first'];
a(class=classes)
变量插入
三种方式：
1. =：直接赋值
2. #{}： 会把特殊字符转义；字符串连接
3. !{}：不转义
4. #[]：插入标签
- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";
//
h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}
//
h1= title
p Written with love by !{author}
p This will be safe: !{theGreat}
//
p this is a link #[a(href="http://jade.terrynie.com")]
文本
管道
| Plain text can include <strong>html</strong>
p
| It must always be on its own line
标签块文本
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
进阶
block
block blockName
content
例如：
//layout.jade
- var title = 'blog'
html
head
title My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
//page.jade
extends ./layout.jade
//覆盖
#block scripts
# script(src='/bootstrap.js')
//追加，prepend也存在；block还能省略
block append scripts
script(src='/bootstrap.js')
includes
用于文件复用。
//head.jade
head
title This is head
//page.jade
html
include ./head.jade
body
h1 this is a include demo
include ./footer.jade
也可以用来引入css，js文件
filters
用于在jade中引入其他语言，例如：
:markdown
# Markdown
I often like including markdown documents.
script
:coffee-script
console.log 'This is coffee script'
//
<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>console.log('This is coffee script')</script>
现在支持的语言有： * sass：需要安装sass.js * less：需要安装less.js * markdown：需要安装markdown-js(jstransformer-markdown) * cdata： * coffeescript：需要安装coffee-script(jstransformer-coffee-script)
iteration
有两种迭代器：
- each/for: for等同于each
- while:
each可以获得索引/键和内容：
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
while的用法就更简单了：
- var n = 0
ul
while n < 4
li= n++
mixin
mixin可以看做一段函数，可以带参数，形如：
mixin mixinName (par)
this is in a mixinName
p #{par} 1
p= par + can also use = //注意区别
调用的时候：
+mixinName("try")
在书写mixin时，传入的参数可以使用#{}和=，但是需要两者的区别。
mixin可以包含block；
mixin addTitle(title)
h1= title
if block
block
else
p no block
调用的时候，mixin换行缩进可以传入block：
+addTitle('Hello world no block')
+addTitle('Hello world with block')
ul
li a
li block
mixin也可以添加属性，有两种方法：
//1
mixin addTitle2(title)
p(style=attributes.clas)= title + " for attributes.class"
+addTitle2("Demo")(clas=style="font-family:arial;color:green;font-size:10px;")
//2
mixin addTitle3(text)
p&attributes(attributes)!= text +" for &attributes"
+addTitle3("demo")(style="font-family:arial;color:red;font-size:20px;")
相比较之下，还是使用 &attributes 的方式更好些。
最后，就是mixin可以传入多个参数(rest arguments–不理解为什么这么说)。举个例子：
mixin list(id, items)
ul(id=id)
each item in items
li= item
+list('first', [1, 2, 3, 4])
+list('second',['a', 'b', 'c', 'd', 'e'])
Comments