环境准备：

全局安装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. day57作业（包含data内容）

    day57作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&quo ...

  2. CISSP一次通过指南（文末附福利）

    2017年12月19日,在上海黄浦区汉口路亚洲大厦17层通过了CISSP认证考试,拖拉了一年,终于成绩还算令人满意,为攒人品将自己一年多的复习心得和大家分享,希望能够帮到需要考证的朋友. 本文作者:i ...

  3. 【bzoj4503】 两个串 FFT

    $FFT$套路题(然而我看错题了) 我们考虑化一下式子. 设当前比较的两个部分为$S[i....i+|T|-1]$和$T[0....|T|-1]$. 我们对串$T$中出现问号的位置全部赋值为$0$. ...

  4. subscripts(下标)

    /* subscripts(下标): 访问对象中数据的快捷方式 所谓下标脚本语法就是能够通过, 实例[索引值]来访问实例中的数据 类似于以前我们访问数字和字典, 其实Swift中的数组和字典就是一个结 ...

  5. Luogu P4670 [BalticOI 2011 Day2]Plagiarism 题解

    我最近是不是数据结构学傻了啊... 这道题看是1e5,所以复杂度为\(O(nlogn)\)的是完全可以跑过去的,然后看题,要求的对于每个数满足要求的区间的长度之和,我们自然而然的就可以想到用FHQ-T ...

  6. python基础笔记之注释三种方法

    ---恢复内容开始--- 1,,单行注释  用# 2,多行注释 用 “”” dddd""" 3,较长行虽然分行写但是只是注释,最终显示为一行:用 \ ---恢复内容结束- ...

  7. springclould nginx转发 websocket400报错问题

    之前一直找原因一直围绕着nginx转发的问题 说头信息没设置全 然后nginx配置文件上加了这些 #http块加以下几行: map $http_upgrade $connection_upgrade ...

  8. javac后期需要重点阅读的类

    (1)Annotate (300行) Enter annotations on symbols. Annotations accumulate in a queue,which is processe ...

  9. Python -- Gui编程 -- Win32API的使用

    消息框 messageBox.py import win32api, win32con win32api.MessageBox(0, 'Hello World!', 'Come Here', win3 ...

  10. maven tomcat插件上传项目到tomcat服务器报错SEVERE: One or more listeners failed to start.

    以前觉了maven依赖设置很简单,就是将手动导入jar包转化为自动下载导入 但发现的一个问题, 在使用maven插件tomcat打包上传工具时 tomcat-maven-plugin <buil ...