环境准备：

全局安装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. FunDA（10）－ 用户功能函数模式：User Function Model

    前面我们提过:FunDA就像一个管道(PipeLine).管道内流动着一串数据(Data)或者运算指令(Action).管道的源头就是能产生纯数据的数据源(Source),跟着在管道的中间会有一些节点 ...

  2. 小型Http服务器

    HTTP又叫做超文本传输协议,现如今用的最多的版本是1.1版本.HTTP有如下的特点: 支持客户/服务器模式(C/S或B/S) 简单快速:基于请求和响应,请求只需传送请求方法和请求路径 灵活:HTTP ...

  3. java保留小数点两位的4种方法

    import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...

  4. 《JAVA与模式》之模板方法模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  5. J05-Java IO流总结五 《 BufferedInputStream和BufferedOutputStream 》

    1. 概念简介 BufferedInputStream和BufferedOutputStream是带缓冲区的字节输入输出处理流.它们本身并不具有IO流的读取与写入功能,只是在别的流(节点流或其他处理流 ...

  6. (转)Db2数据库一次生产故障详细记录---数据库坏页

    原文:http://www.talkwithtrend.com/Article/216335 前言 数据库最严重的故障莫过于数据库损坏.数据库坏页是数据库损坏的一种,如果数据库中有数据页出现损坏,在没 ...

  7. Win7 Eclipse调试Centos Hadoop2.2-Mapreduce(转)

    一. 自己搭建开发环境 今天自己搭建了一套Centos5.3 + Hadoop2.2 + Hbase0.96.1.1的开发环境,Win7 Eclipse调试MapReduce成功.可能是版本比较高的原 ...

  8. Android之Zxing二维码扫描图片拉伸

    还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多 ...

  9. Pycharm 问题：Clear Read-Only Status

    用的是ubuntu系统,一直在普通用户模式下打开Git下建的项目,今天运行神经网络程序时,由于有一个cudnn错误,必须要在sudo模式下才不会报错,所以用sudo试着打开了pycharm,发现是完全 ...

  10. Java处理正则表达式特殊字符转义 转

    正则需要转义字符:'$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'   异常现象: java.util.reg ...