Jade学习
jade.jade
html(lang="en")
html(lang="en")
head
- var name = 'Jade'
title= name
meta(charset="utf-8")
link(rel="stylesheet", type="text/css" href="/stylesheets/style.css")
body
h1 Jade - node template engine
#container.col
if name === 'Jade'
p #{name} is very cool
else
p Get on Jade
footer
p.
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.
jade.html
<html lang="en">
<html lang="en">
<head>
<title>Jade</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>Jade is very cool</p>
</div>
<footer>
<p>
Jade is a terse and simplae
templating language with a
strong focus on performance
and powerful features.
</p>
</footer>
</body>
</html>
install
npm install -g jade
jade， 以空格或缩进和换行来组织代码，每行开始的第一个单词被定义为一个 tag
Tags
默认，每行开始的第一个单词代表一个标签，可以是自定义的标签：
//jade
h1 h1 tag
custom custom tag
img(src="/images/logo.png", alt="")
//html
<h1>h1 tag</h1>
<custom>custom tag</custom><img src="/images/logo.png" alt="">
使用缩进能进行标签嵌套：
//jade
ul
li Item A
a(href="javascript:;") a link
li Item B
li Item C
//html
<ul>
<li>Item A<a href="javascript:;">a link</a></li>
<li>Item B</li>
<li>Item C</li>
</ul>
doctype
在 jade， 中统一用 doctype 前缀，然后后边跟关键字进行区分使用的文档类型；
html5
jade：
doctype htmlhtml：
<!DOCTYPE html>xml
jade：
doctype xmlhtml：
<?xml version="1.0" encoding="utf-8" ?>strict
jade：
doctype stricthtml：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">frameset
jade：
doctype framesethtml：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">1.1
jade：
doctype 1.1html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">basic
jade：
doctype basichtml：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">mobile
jade：
doctype mobilehtml：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">也可以用自定义的
jade：
doctype www.jayzhang.cnhtml：
<!DOCTYPE www.jayzhang.cn>
Attributes
属性必须用括号包起来，多个属性用逗号分隔，class 和 id,可以直接用 (.) 和 (#) 而不需要放到括号内；
//jade
div.container.flow#container Content
a(class="btn", href="javascript:;", title="submit") Button
//html
<div id="container" class="container flow">Content</div><a href="javascript:;" title="submit" class="btn">Button</a>
对于 class 和 id， 还可以省略 tag 而直接用，最终会自动生成一个 div:
//jade
.content content
#content.content.box content
//html
<div class="content">content</div>
<div id="content" class="content box">content</div>
Plain Text
根据不同的情况，jade 提供了三种方式获取纯文本
Piped Text
方式一，在文本的开头使用管道符 (
|)//jade | Plain text can include <strong>html</strong> p | It must always be on its own line //html Plain text can include <strong>html</strong> <p>It must always be on its own line</p>Inline in a Tag
方式二，文本与 tag 放到同一行
//jade .content content #content.content.box content //html <div class="content">content</div> <div id="content" class="content box">content</div>Block in a Tag
方式三，适合有大量文本的情况；在 tag 后使用一个点号 (.)， tag 与 点号之间不能有空格
templating language with a p. Jade is a terse and simplae templating language with a strong focus on performance and powerful features. //html <p> Jade is a terse and simplae templating language with a strong focus on performance and powerful features. </p>
case
case， 类似于 javascript 中的 switch，可用于在多个代码块中显示 case 与when 匹配的代码块
语法如下：
case condition
when state1
code 1
when state2
code 2
when staten
code n
default
code default
例：
//jade
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
//html
<p>you have 10 friends</p>
Case Fall Through
我们也可以多个
when， 执行一个代码块//jade - var friends = 1 case friends when 0 when 1 p you have very few friends default p you have #{friends} friends //html <p>you have very few friends</p>Block Expansion
我们还可以将
when加上冒号(:)，与代码块放到一行；//jade - var friends = 1 case friends when 0: p you have no friends when 1: p you have a friend default: p you have #{friends} friends //html <p>you have a friends</p>
code
jade， 支持三种类型的 code
Unbuffered Code
这种类型的
code以一个中横线 (-) 开头，不会直接输出//jade ul -for (var x = 0; x < 3; x++) li item //html <ul> <li>item</li> <li>item</li> <li>item</li> </ul>Buffered Code
此类型的
code以一个等号 (=) 开头；为了安全， jade 会将html代码进行转义；//jade p = 'This code is <escaped>!' //html <p>This code is <escaped>! </p>当然，我们也可以把
=及后面的文本与tag放在同一行//jade p= 'This code is' + ' <escaped>!' //html <p>This code is <escaped>!</p>Unescaped Buffered Code
此类型的
code以一个叹号加一个等号 (!=) 开头，而且 jade 不会转义html代码；//jade p != 'This code is <strong>not</strong> escaped!' //html <p>This code is <strong>not</strong> escaped! </p> -------------------------------------------------- //jade p!= 'This code is <strong>not</strong> escaped!' //html <p>This code is <strong>not</strong> escaped!</p>
comments
jade 使用双斜线 (//)进行单行注释；如果不想让注释的内容显示到生成的 html 代码中，可以在双斜线 (//)后跟一个单横线(-)；
例：
//jade
//just some paragraphs
p foo
p bar
//-will not output within markup
p foo
p bar
//html
<!--just some paragraphs-->
<p>foo</p>
<p>bar</p>
<p>foo</p>
<p>bar</p>
Block Comments
双斜线 (
//)后面的注释内容换行并缩进可进行块级注释；例：
//jade body // As much text as you want can go here. //html <body> <!-- As much text as you want can go here. --> </body>Conditional Comments
条件注释，只有在
IE10，及以下的IE浏览器才支持，jade中的条件注释没有特别的语法，而是直接采用一般的html条件注释例：
<html lang="en" class="lt-ie9"> <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> //html <!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
conditionals
条件语句，其实也就跟普通 javascript 一样，不过在 jade 中，我们可以省略括号；
要注意，在 jade 中，使用 var 定义变量时，一定要在 var 前，加一个中横线(-)，不然的话，var 会被解析成一个 <var> 标签；
例：
//jade
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
if user.description
h2 Description
p.description= user.description
else if authorised
h2 Description
p.description.
User has no description,
why not add one...
else
h1 Description
p.description User has no description
//html
<div id="user">
<h2>Description</h2>
<p class="description">foo bar baz</p>
</div>
jdade， 还提供了一个表否定的语法 unless， 作用跟 if !expr 是等价的；
下面两是等价的：
unless user.isAnonymous
p Your're logged in as #{user.name}
等价于：
if !user.isAnonymous
p You're logged in as #{user.name}
extends
Extedns - Template Inheritance
jade，允许使用 extedns 关键字结合 block 关键字预定义一个模板文件给其他子模板调用，来实现模板之间的继承；
如果父模板里面定义了某块内容，而子模板中没有定义，那默认就会显示父模板的块内容；这样我们就可以把一些公共的东西定义到一个父模板中，然后子模板直接调用，来达到高效输出；
模板还可以多重继承哟，写更少的代码，做更多的事；嘿嘿
例：
//- laytout.jade
doctype html
html
head
block title
title Default title
body
block content
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
//最终生成的html如下
<!doctype html>
<html>
<head>
<title>Article Title</title>
</head>
<body>
<h1>My Article</h1>
</body>
</html>
filters
过滤器，可以让我们在 jade 里面写其他的语言；
过滤器，语法是一个前置的冒号 (:) 加上过滤器的名称；
jade 支持的过滤器有如下几种：
:stylus必须已安装 stylus:less必须已安装 less.js:markdown必须已安装 markdown-js 或 node-discount:cdate:coffeescript必须已安装 coffee-script
例：
//jade
:markdown
#Markdown
I often like including markdown documents.
script
:coffee
console.log 'This is coffe script'
//html
<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>(function() {
}).call(this);
<console class="log">'This is coffe script'</console>
</script>
includes
inclues 允许我们可以插入另一个 jade 文件到当前的 jdade 文件中；
例：
//- index.jade
doctype html
html
include ./includes/header.jade
body
h1 My Site
p Welcome to my super lame site.
include ./includes/footer.jade
//- includes/header.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
//- includes/footer.jade
#footer
p Copyright (c) Reg.Jay
//- 怎么让 © 转义字符生效呢？
Including Plain Text
include非jade文件，比如css，js以及纯文本文件等，一定要记得把文件的后缀名加上咯；
例：
//- index.jade
doctype html
html
head
style
include style.css
body
h1 My Site
p Welcome to my super lame site.
script
include script.js
/* style.css */
h1 { color: red; }
// script.js
console.log('You are awesome');
//index.html
<!doctype html>
<html>
<head>
<style>
/* style.css */
h1 { color: red; }
</style>
</head>
<body>
<h1>My Site</h1>
<p>Welcome to my super lame site.</p>
<script>
// script.js
console.log('You are awesome');
</script>
</body>
</html>
Including Filtered Text
还可以
include过滤器，语法是include:FilterName FilterFile.FilterType
例：
//- index.jade
doctype html
html
head
title An Article
body
include:markdown article.md
# article.md
This is an article written in markdown.
//index.html
<!doctype html>
<html>
<head>
<title>An Article</title>
</head>
<body>
<h1>article.md</h1>
<p>This is an article written in markdown.</p>
</body>
</html>
iteration
jade支持两种主要的迭代方法， each 和 while，当然如果个人喜欢也可以使用 for，因为 jade 是支持 javascript 原生代码的。很强大的吧。嘿嘿。
each
推荐使用
each， 因为它更容易迭代一个数组和对象；语法：
each val, [key] in obj例：
ul each val in [1, 2, 3, 4, 5] li= val //output <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>注意啦，这里要在标签中使用变量，必须使用等号 (
=)，如果要混合使用变量和字符串，那应该把变量放到#{}中，并且不能使用等号，如#{val}例2：同时获取索引和值：
ul each val, index in ['zero', 'one', 'two'] li= index + ': ' + val //output <ul> <li>0: zero</li> <li>1: one</li> <li>2: two</li> </ul>例3：还可以用来迭代一个对象的
key：ul each val, index in {'one': 'one','two': 'world','three': 'one', 'four': 'dream'} li= index + ': ' + val //output <ul> <li>one: one</li> <li>two: world</li> <li>three: one</li> <li>four: dream</li> </ul>while
用法跟
javascript一样例：
- var n = 0 ul while n < 4 li= n++ //output <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>
mixins
使用 mixin 可以创建可重用的代码块；
语法：minxin mixinName，调用的时候直接+mixinName
例：
//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list
+list
//output
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
在使用的时候，还可以给mixin定义参数，当作一个函数来使用；
例：
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
+pet('pig')
//output
<ul>
<li class="pet">cat</li>
<li class="pet">dog</li>
<li class="pet">pig</li>
</ul>
Mixin Blocks
mixin 也可以使用像 include 那样的块
例：
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing article
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>No content provided</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
- Mixin Attributes
例：
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn")
//output
<a href="/foo" class="btn">foo</a>