模板引擎jade学习

语言参考

标签列表

doctype

关于文档的类型 默认是html

doctype html
<!DOCTYPE html>

简洁文档类型标记

xml
<?xml version="1.0" encoding="utf-8" ?>
transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
mobile
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

You can also use your own literal custom doctype:

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

标签

默认,每行最开始的(或者在空格之后的(只有空格))代表一个html 标签 ,可以嵌入缩进,创建像html 文档结构的样式。

ul

li Item A

li Item B

li Item C
<ul>

  <li>Item A</li>

  <li>Item B</li>

  <li>Item C</li>

</ul>

jade 也知道那种标签是可以自己关闭的。

img
<img/>

Block 扩展

jade 提供的支持内联的嵌入标签

a: img
<a><img/></a>

属性

标签属性看起来比较像html, 然后它们的值只是规则的javascript.

a(href='google.com') Google

a(class='button', href='google.com') Google
<a href="google.com">Google</a>

<a class="button" href="google.com">Google</a>

普通的javascript扩展也可以使用:

- var authenticated = true

body(class=authenticated?'authed':'anon')
<body class="authed"></body>

Boolean 属性

input(type='checkbox', checked)

input(type='checkbox', checked=true)

input(type='checkbox', checked=false)

input(type='checkbox', checked=true.toString())
<input type="checkbox" checked="checked" />

<input type="checkbox" checked="checked" />

<input type="checkbox" />

<input type="checkbox" checked="true" />

doctype html

input(type='checkbox', checked)

input(type='checkbox', checked=true)

input(type='checkbox', checked=false)

input(type='checkbox', checked=true && 'checked')
<!DOCTYPE html>

<input type="checkbox" checked>

<input type="checkbox" checked>

<input type="checkbox">

<input type="checkbox" checked="checked">

Class 属性

类属性只是简单的字符串、 但是它们可以代表一系列类名, 它们是从javascript中生成的.

- var classes = ['foo', 'bar', 'baz']

a(class=classes)

//- the class attribute may also be repeated to merge arrays

a.bing(class=classes class=['bing'])
<a class="foo bar baz"></a>

<a class="foo bar baz bing"></a>

Class 字面名称

就是html 标签中class 属性的名称

a.button
<a class="button"></a>

默认的标示是div:

.content
<div class="content"></div>

ID 字面名称

就是html 标签中id属性的名称

a#main-link
<a id="main-link"></a>

默认是div

#content
<div id="content"></div>

存文本

Jade提供了三中方式.  、

Piped Text

使用 | 字符

| Plain text can include <strong>html</strong>

p

| It must always be on its own line
Plain text can include <strong>html</strong>

<p>It must always be on its own line</p>

内联标签

 

p Plain text can include <strong>html</strong>
<p>Plain text can include <strong>html</strong></p>

块标签

使用.  一个较好的例子就是script 和style.  为了这样做,你仅仅使用 . 在一个标签之后(没有空格)

script.

  if (usingJade)

    console.log('you are awesome')

  else

    console.log('use jade')
<script>

  if (usingJade)

    console.log('you are awesome')

  else

    console.log('use jade')

</script>

代码

Jade 可以进行javascript代码的编写.

非缓存代码

Unbuffered 代码以- 开始.

- for (var x = 0; x < 3; x++)

li item
<li>item</li>

<li>item</li>

<li>item</li>

缓存代码

缓存代码以= 开始

p

= 'This code is <escaped>!'
<p>This code is &lt;escaped&gt;!</p>

 

p= 'This code is' + ' <escaped>!'
<p>This code is &lt;escaped&gt;!</p>

 

注释

 

// just some paragraphs

p foo

p bar
<!-- just some paragraphs -->

<p>foo</p>

<p>bar</p>

//- will not output within markup

p foo

p bar
<p>foo</p>

<p>bar</p>

块注释

body

//

 As much text as you want

 can go here.
<body>

  <!--

  As much text as you want

  can go here.

  -->

</body>

条件

进行判断

- var user = { description: 'foo bar baz' }

#user

if user.description

h2 Description

p.description= user.description

else

h1 Description

p.description User has no description
<div id="user">

  <h2>Description</h2>

  <p class="description">foo bar baz</p>

</div>

unless user.isAnonymous

p You're logged in as #{user.name}
if !user.isAnonymous

p You're logged in as #{user.name}

迭代

ul

each val in [1, 2, 3, 4, 5]

li= val
<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

 

ul

each val, index in ['zero', 'one', 'two']

li= index + ': ' + val
<ul>

  <li>0: zero</li>

  <li>1: one</li>

  <li>2: two</li>

</ul>

 

ul

each val, index in {1:'one',2:'two',3:'three'}

li= index + ': ' + val
<ul>

  <li>1: one</li>

  <li>2: two</li>

  <li>3: three</li>

</ul>

 

Case语句

 

- 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
<p>you have 10 friends</p>

Case Fall Through

- var friends = 0

case friends

when 0

when 1

p you have very few

default

p you have #{friends} friends
<p>you have very few friends</p>

Block 扩展

 

- 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
<p>you have a friend</p>

过滤

 

:markdown

  # Markdown



I often like including markdown documents.

script

:coffee

 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>

混入

 

//- Declaration

mixin list

ul

li foo

li bar

li baz

//- Use

+list()

+list()
<ul>

  <li>foo</li>

  <li>bar</li>

  <li>baz</li>

</ul>

<ul>

  <li>foo</li>

  <li>bar</li>

  <li>baz</li>

</ul>

 

mixin pets(pets)

ul.pets

- each pet in pets

li= pet

+pets(['cat', 'dog', 'pig'])
<ul class="pets">

  <li>cat</li>

  <li>dog</li>

  <li>pig</li>

</ul>

 

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 link(href, name)

a(class!=attributes.class, href=href)= name



+link('/foo', 'foo')(class="btn")
<a class="btn" href="/foo">foo</a>

包含

 

// index.jade

doctype html

html

include includes/head

body

h1 My Site

p Welcome to my super lame site.

include includes/foot
// includes/head.jade

head

title My Site

script(src='/javascripts/jquery.js')

script(src='/javascripts/app.js')

// includes/foot.jade

#footer

p Copyright (c) foobar

你可能感兴趣的:(模板引擎)