环境准备：

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后，可以使用 jade --help 查看jade的命令行用法

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

inde.jade代码：

 doctype html

 html

     head

         meta(charset='utf-8')

         title

     body

         h3 欢迎学习jade

语法规则：

1， 标签按照html的缩进格式写

2，标签的属性可以采用圆括号

3，如果标签有内容，可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)

编译之后的index.html代码：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title></title>

   </head>

   <body>

     <h3>欢迎学习jade</h3>

   </body>

 </html>

二、class,id等其他属性与多行文本的书写

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

 doctype html

 html

     head

         meta(charset='utf8')

         title jade template engine

     body

         h1 jade template engine

         h1 jade template engine

         h1 jade template engine

         h1 jade template engine

         div#box.box1.box2(class='box3')

         #abc.box1.box2.box3

         h3.box1.box2(class='abc def')

         a(href='http://www.taobao.com',

         target = 'blank') 淘宝

         input(type='button', value='点我')

         br

         p.

             1,this is

             <strong>hello</strong>

             2,test

             3,string

         p

             |   1, this is

             strong hello

             |   2, test

             |   3, test string

执行编译命令：jade -P <index2.jade> ghostwu.html   把index2.jade编译成ghostwu.html文件，编译之后的代码如下：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf8">

     <title>jade template engine</title>

   </head>

   <body>

     <h1>jade template engine</h1>

     <h1>jade template engine</h1>

     <h1>jade template engine</h1>

     <h1>jade template engine</h1>

     <div id="box" class="box1 box2 box3"></div>

     <div id="abc" class="box1 box2 box3"></div>

     <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" target="blank">淘宝</a>

     <input type="button" value="点我"><br>

     <p>

       1,this is

       <strong>hello</strong>

       2,test

       3,string

     </p>

     <p>  1, this is<strong>hello</strong>  2, test

         3, test string

     </p>

   </body>

 </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
多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法
p
| 1, this is
strong hello
| 2, test
| 3, test string
多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容 
三、注释
jade模板代码：
 doctype html

 html

     head

         meta(charset='utf8')

         title jade模板引擎学习-by ghostwu

     body

         h3 单行注释

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

         h3 不会编译到html文件的注释

         //- div#box.box2.box3

         h3 块注释,也叫多行注释

         //-

             input(type='checkbox', name='meinv', value='仙女') 仙女

             input(type='checkbox', name='meinv', value='御姐') 御姐

         h3 这里不是注释

         input(type='checkbox', name='meinv', value='仙女')

         | 仙女

         input(type='checkbox', name='meinv', value='御姐')

         | 御姐

编译之后:

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf8">

     <title>jade模板引擎学习-by ghostwu</title>

   </head>

   <body>

     <h3>单行注释</h3>

     <!-- div.box.box2 这是一段div-->

     <h3>不会编译到html文件的注释</h3>

     <h3>块注释,也叫多行注释</h3>

     <h3>这里不是注释</h3>

     <input type="checkbox" name="meinv" value="仙女">仙女

     <input type="checkbox" name="meinv" value="御姐">御姐

   </body>

 </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: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术

 五、解释变量

 doctype html

 html

     head

         meta(charset='utf8')

         - var title = 'jade模板引擎学习-by ghostwu';

         title #{title.toUpperCase()}

         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:;') 网游小说

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

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

新建data.json文件数据

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
 doctype html

 html

     head

         meta(charset='utf8')

         - var title = 'jade模板引擎学习-by ghostwu';

         title #{title.toUpperCase()}

     body

         h3 #{content}

编译命令：jade index2.jade -P -O data.json  -O 指定一个json文件，把json文件的数据传递到模板

编译后的结果：

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf8">

     <title>JADE模板引擎学习-BY GHOSTWU</title>

   </head>

   <body>

     <h3>跟着ghostwu学习jade</h3>

   </body>

 </html>

[js高手之路]Node.js模板引擎教程-jade速学与实战1的更多相关文章

  1. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  2. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

  3. [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

    强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次 ...

  5. [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

    这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...

  6. [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

    该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...

  7. [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

    接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...

  8. [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

    promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...

  9. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

随机推荐

  1. html、js、django处理日期问题

    在html中使用日期控件,利用ngmodel将输入的值传到js里: <input type="date" ng-model="timeOps.test.a_time ...

  2. JS的事件多次触发，只执行最后一次

    有时候我们在JS编程的过程中经常遇到一个问题就是事件频繁高速被触发,利用计时器来控制频率又会丢弃掉有用的事件,我们只是想让程序执行最后一次的事件,那么就可以用如下方法解决问题 //写在事件外边,防止被 ...

  3. noip冲刺赛第五次考试

    1.公约数 (gcd.cpp\c\pas) [问题描述] 给定一个正整数,在[1,n]的范围内,求出有多少个无序数对(a,b)满足 gcd(a,b)=a xor b. [输入格式] 输入共一行,一个正 ...

  4. [您有新的未分配科技点]无旋treap：从好奇到入门（例题：bzoj3224 普通平衡树）

    今天我们来学习一种新的数据结构:无旋treap.它和splay一样支持区间操作,和treap一样简单易懂,同时还支持可持久化. 无旋treap的节点定义和treap一样,都要同时满足树性质和堆性质,我 ...

  5. Linux改变语言设置的命令

    --Linux语言设置--------------2013/09/22Linux中语言的设置和本地化设置真是一个很繁琐的事情,时不时的会出现乱码的情况,在这篇文章中讨论的是shell中出现乱码的一些解 ...

  6. .Net Reactor 5脱壳教程

    今天别人发来一个.Net的DLL让我脱壳,第一步自然是先扔进de4dot 我这个de4dot 是集成了  Ivancito0z / TheProxy / PC-RET 4.9mod / wuhenso ...

  7. 安卓开发中Spinner控件的使用

    在安卓手机应用开发中,Spinner对象常用方法有以下五种. 用法 1 :以资源方式,静态展示 Spinner 选项 用法 2 :以代码方式,动态展示 Spinner 选项 用法 3 :同时显示图片和 ...

  8. linux基础简答（1）

    linux基础简答题 扇区及其4个主分区的原因 在第一个扇区中,保存着引导记录和分区信息,容量为512bytes,主引导记录(相当于MBR)446 bytes,分区表64bytes,记录每个分区信息要 ...

  9. Webstorm 提示 Can't use Subversion command line client

    Webstorm 提示 Can't use Subversion command line client Webstorm 提示 Can't use Subversion command line c ...

  10. Writing A Threadpool in Rust

    文 Akisann@CNblogs / zhaihj@Github 本篇文章同时发布在Github上:https://zhaihj.github.io/writing-a-threadpool-in- ...