条件准备:

大局安装jade: npm install jade -g

初步化项目package.json: npm init –yes

设置到位之后,能够选择 jade –help 查看jade的授命行用法

一 、在品种目录下新建index.jade文件

inde.jade代码:

1 doctype html
2 html
3     head
4         meta(charset='utf-8')
5         title
6     body
7         h3 欢迎学习jade

语法规则:

1, 标签根据html的缩进格式写

2,标签的属性能够应用圆括号

3,要是标签有内容,能够直接写在标签的背后

然后在命令行用 jade -P
index.jade 把index.jade文件编写翻译成index.html文件,-P(
把代码整理成缩进格式的,假使不带那一个参数,index.html正是压缩格式,不便于阅读)

编写翻译之后的index.html代码:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6   </head>
 7   <body>
 8     <h3>欢迎学习jade</h3>
 9   </body>
10 </html>

② 、class,id等其余品质与多行文本的书写

新建index2.jade文件,代码如下:

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         title jade template engine
 6     body
 7         h1 jade template engine
 8         h1 jade template engine
 9         h1 jade template engine
10         h1 jade template engine
11         div#box.box1.box2(class='box3')
12         #abc.box1.box2.box3
13         h3.box1.box2(class='abc def')
14         a(href='http://www.taobao.com',
15         target = 'blank') 淘宝
16         input(type='button', value='点我')
17         br
18         p.
19             1,this is
20             <strong>hello</strong>
21             2,test
22             3,string
23         p
24             |   1, this is
25             strong hello
26             |   2, test
27             |   3, test string

推行编写翻译命令:jade -P <index2.jade>
ghostwu.html   把index2.jade编写翻译成ghostwu.html文件,编写翻译之后的代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>jade template engine</title>
 6   </head>
 7   <body>
 8     <h1>jade template engine</h1>
 9     <h1>jade template engine</h1>
10     <h1>jade template engine</h1>
11     <h1>jade template engine</h1>
12     <div id="box" class="box1 box2 box3"></div>
13     <div id="abc" class="box1 box2 box3"></div>
14     <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>
15     <input type="button" value="点我"><br>
16     <p>
17       1,this is
18       <strong>hello</strong>
19       2,test
20       3,string
21     </p>
22     <p>  1, this is<strong>hello</strong>  2, test
23         3, test string
24     </p>
25   </body>
26 </html>

1,div#box.box1.box2(class=’box3′)  那种写法是emmet的写法 #便是id属性
点(.)正是class属性 括号也是性质写法

2,#abc.box1.box2.box3,周到没有给成分标签名称,暗中同意正是给div标签加上那一个属性

3,多行文本的三种写法

p.

1,this is

<strong>hello</strong>

2,test

3,string

多创作本第3种写法:p标签后边要跟一个. 里面用原始的html标签写法

p

| 1, this is

strong hello

| 2, test

| 3, test string

多创作本第1种写法: 文本前边用竖线 ( | ),标签后边跟内容 

三、注释

jade模板代码:

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         title jade模板引擎学习-by ghostwu
 6     body
 7         h3 单行注释
 8         // div.box.box2 这是一段div
 9         h3 不会编译到html文件的注释
10         //- div#box.box2.box3
11         h3 块注释,也叫多行注释
12         //- 
13             input(type='checkbox', name='meinv', value='仙女') 仙女
14             input(type='checkbox', name='meinv', value='御姐') 御姐
15         h3 这里不是注释
16         input(type='checkbox', name='meinv', value='仙女')
17         | 仙女
18         input(type='checkbox', name='meinv', value='御姐')
19         | 御姐

编译之后:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>jade模板引擎学习-by ghostwu</title>
 6   </head>
 7   <body>
 8     <h3>单行注释</h3>
 9     <!-- div.box.box2 这是一段div-->
10     <h3>不会编译到html文件的注释</h3>
11     <h3>块注释,也叫多行注释</h3>
12     <h3>这里不是注释</h3>
13     <input type="checkbox" name="meinv" value="仙女">仙女
14     <input type="checkbox" name="meinv" value="御姐">御姐
15   </body>
16 </html>

1,单行注释

// div.box.box2 那是一段div

2,只在jade中注释,不会被编写翻译到html文件

//- div#box.box2.box3

3,块注释( 多行文本注释 ),被诠释的剧情要另起一行

4,checkbox后边的显得文字部分
要专注,不要靠近属性的前面,要另起一行,写在竖线的前面

④ 、jade模板实战菜单

doctype html
html
    head
        meta(charset='utf8')
        title jade模板引擎学习-by ghostwu
        style.
            * { margin : 0; padding: 0; }
            li { list-style-type: none; }
            a { text-decoration: none; color: white; }
            #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
            #nav li { float:left; }
            #nav li.active { background:red; }
            #nav li:hover { background:#09f; }
            #nav li a{ padding: 5px 10px; }
    body
        div#nav
            ul
                li.active
                    a(href='javascript:;') 首页
                li
                    a(href='javascript:;') 玄幻小说
                li
                    a(href='javascript:;') 修真小说
                li
                    a(href='javascript:;') 都世小说
                li
                    a(href='javascript:;') 科幻小说
                li
                    a(href='javascript:;') 网游小说

编写翻译( jade index.jade -P -w
)之后的法力: -w:
实时监察和控制文件的改动,保存之后立时刷新结果,也正是现代前端开发中很盛行的热加载技术

图片 1

 伍 、解释变量 

 1 doctype html
 2 html
 3     head
 4         meta(charset='utf8')
 5         - var title = 'jade模板引擎学习-by ghostwu';
 6         title #{title.toUpperCase()}
 7         style.
 8             * { margin : 0; padding: 0; }
 9             li { list-style-type: none; }
10             a { text-decoration: none; color: white; }
11             #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
12             #nav li { float:left; }
13             #nav li.active { background:red; }
14             #nav li:hover { background:#09f; }
15             #nav li a{ padding: 5px 10px; }
16     body
17         div#nav
18             ul
19                 li.active
20                     a(href='javascript:;') 首页
21                 li
22                     a(href='javascript:;') 玄幻小说
23                 li
24                     a(href='javascript:;') 修真小说
25                 li
26                     a(href='javascript:;') 都世小说
27                 li
28                     a(href='javascript:;') 科幻小说
29                 li
30                     a(href='javascript:;') 网游小说

#{}: 可以解释变量, toUpperCase():变量转大写

把json文件的数额在编写翻译的时候传递到模板,

新建data.json文件数量

{

“content” : “跟着ghostwu学习jade”

}

index2.jade文本模板:

1 doctype html
2 html
3     head
4         meta(charset='utf8')
5         - var title = 'jade模板引擎学习-by ghostwu';
6         title #{title.toUpperCase()}
7     body
8         h3 #{content}

编写翻译命令:jade index2.jade -P -O data.json
 -O
钦点3个json文件,把json文件的多寡传递到模板

编写翻译后的结果:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf8">
 5     <title>JADE模板引擎学习-BY GHOSTWU</title>
 6   </head>
 7   <body>
 8     <h3>跟着ghostwu学习jade</h3>
 9   </body>
10 </html>

相关文章

网站地图xml地图