您的位置：首页 > 其它

模板引擎jade学习

2014-01-20 16:00 375 查看

语言参考

标签列表

doctype

Tags

Block Expansion

Attributes

Boolean Attributes

Class Attributes

Class Literal

ID Literal

Plain Text

Piped Text

Inline in a Tag

Block in a Tag

Code

Unbuffered Code

Buffered Code

Unescaped Buffered Code

Comments

Block Comments

Conditionals

Iteration

Case

Case Fall Through

Block Expansion

Filters

Mixins

Includes

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">

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 <escaped>!</p>

p= 'This code is' + ' <escaped>!'

<p>This code is <escaped>!</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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航