jade模板引擎的使用

jade是对空格敏感的模板引擎。子元素缩进两个空格

可以直接在终端编译jade模板引擎为html文件：jade index.jade，编译后的代码是压缩过的，加参数-P就可以变为未经编译的。

使用wenstorm来实时编译jade为HTML：

打开preference——tools——File Watcher——+——jade，然后在Arguments``那里加入-P`参数即可不用压缩


也可以安装gulp-jade插件来转换成HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var jade = require('gulp-jade');

gulp.task('templates', function() {

  var YOUR_LOCALS = {};

  gulp.src('./lib/*.jade')

    .pipe(jade({

      locals: YOUR_LOCALS

    }))

    .pipe(gulp.dest('./dist/'))

});

注意：- 开头在 jade 中属于服务端执行的代码

1
2
3
4

- console.log('hello'); // 这段代码在服务端执行

- var s = 'hello world' // 在服务端空间中定义变量

jade 的变量调用有 3 种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#{表达式}


- var name = 'trigkit4'

   title #{name.toUpperCase()}     



<title>TRIGKIT4</title>

=表达式

!=表达式

一行开头的任何文本都会默认被解释成HTML标签。

传给jade模板的数据称为locals，要输出一个变量的值，可以使用等号=。使用等号赋值的时候要注意，等号和标签不能有空格间距。

Jade代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

h1 = title

p = body

(locals):

{

title:"Express.js Guide",

body:"hi"

}

//输出的HTML：

<h1>Express.js Guide</h1>

<p>hi</p>

属性紧跟在标签的名字之后，用括号括起来，格式是name = value。

符号|允许我们在新的一行里写HTML节点的内容，也就是说有符号|的那行会变成文本内容。

值是false的属性在输出HTML代码会被忽略，而当没有传值时，会被赋值为true。比如：

1
2
3
4
5
6
7
8
9
10
11
12

input(type="radio",checked)

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

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

<input type='radio' checked='checked'/>

<input type='radio' checked='checked'/>

<input type="radio"/>

成组的属性名可以通过括号来写，以逗号的形式分隔，内容和括号空一格例如：

1
a(href='hawx1993.github.io',title='trigkit4') hello jade

输出：

<a href="hawx1993.github.io" title="trigkit4">hello jade</a>

如果要实现文本换行，只需要在元素标签后面添加点号（.）即可，点号允许你在一个标签内包含很大的代码块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p.

    hello

    trigkit4



style.

    h3{

        color: #333

    }

就会被编译成：

1
2
3
4
5
6
7
8
9
10
11
12

<p>

      hello

      trigkit4

</p>



style

注释：//-编译后的注释不会显示在html代码中。//的注释则会

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见



<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见



<!--[if IE 6]>

<![endif]-->

只有IE6版本可见



<![if !IE]>

<![endif]>

除了IE以外的版本



<!--[if lt IE 8]>

<![endif]-->

IE8以下的版本可见





<!--[if gte IE 7]>

<![endif]-->

IE7及大于IE7的版本可见

综合的版本如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


doctype html

<!--[if lte IE 8]>

|<html lang="#{data_lang}" class="lte-ie8">

<![endif]-->

<!--[if gt IE 8]><!-->

|<html lang="#{data_lang}">

<!--<![endif]-->

head

   meta(charset='utf-8')

   meta(name='viewport', content='width=device-width, initial-scale=1.0')

body



|</html>

采用此类注释时，head 和body等标签此时要顶格写，要有html的闭合标签

###mixin创建重复使用的代码块

在Scss 和 Jade 中，混合宏（mixins）都是举足轻重的语法。mixin可以看做一个函数，可以在函数名中传入参数，当然也可以不传。混合宏具有复用、解耦、可读、可扩、可维护等等优势。创建混合宏需要使用 mixin 标识符，创建混合宏实例时，需要使用 + 标识符（调用函数）：

1
2
3
4
5
6
7
8
9
10
11
12

mixin pet(name)

  li.pet= name

ul

  +pet('cat')

  +pet('dog')

  +pet('pig')

生成的 HTML：

1
2
3
4
5
6
7
8
9
10

<ul>

  <li class="pet">cat</li>

  <li class="pet">dog</li>

  <li class="pet">pig</li>

</ul>

还可以使用 … 标识符表示不定数量的参数：

1
2
3
4
5
6
7
8
9
10
11
12

mixin list(id, ...items)

  ul(id=id)

    each item in items

      li= item



+list('my-list', 1, 2, 3, 4)

生成的 HTML：

1
2
3
4
5
6
7
8
9
10
11
12

<ul id="my-list">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

</ul>

有时候，我们需要替换混合宏的某个部分，那么就可以使用block 标识符来占位：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

生成的 HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<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对齐

Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。

each循环

jade对于循环提供了省略"-"减号的写法，你也可以使用for来代替each。实际上是for...in循环。jade还提供了while循环，同样不需要使用"-"减号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


mixin study(name,courses)

         - var n=0

         p #{name}

         ul.courses

            each course in courses

               li=course

            while n < 3

               li= n++

 +study('tom',['jade','node'])



对应的如下：





<p>tom</p>

        <ul class="courses">

          <li>jade</li>

          <li>node</li>

          <li>0</li>

          <li>1</li>

          <li>2</li>

        </ul>

继承：block和extends继承自

一个block是一个jade代码块，可以被一个子模板替代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

block test

         p hello world

      block test

      block test



<p>hello world</p>

<p>hello world</p>

<p>hello world</p>

&attributes

1
2
3
4
5
6
7
8

- var attributes = {'data-foo': 'bar'};

div#foo(data-bar="foo")&attributes(attributes)

将被解析成：

<div id="foo" data-bar="foo" data-foo="bar"></div>