环境准备：

全局安装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. git入门（3）git checkout 和git branch分支的创建和删除

    在一个项目中,需要多人同时开发,协同coding 要求: 开发时请用开发分支daily/0.0.1, 禁止直接使用master分支开发新建分支 git checkout -b daily/0.0.1 ...

  2. ffmpeg编解码视频导致噪声增大的一种解决方法

    一.前言 ffmpeg在视音频编解码领域算是一个比较成熟的解决方案了.公司的一款视频编辑软件正是基于ffmpeg做了二次封装,并在此基础上进行音视频的编解码处理.然而,在观察编码后的视频质量时,发现图 ...

  3. LAP+mysql-主从+redis

    Redis是一个开源的,内存中的数据结构存储系统,他可以用作数据库,缓存和消息中间介.支持多种类型数据库结构,如字符串(strings),散列(hashes),列表(lists),集合(sets),有 ...

  4. Head First 设计模式 第1章 策略模式

    本章从浅入深的讲解了策略模式的使用,以及策略模式中所涉及到的几个设计原则,在本章的最后给出了策略模式的定义. 1.定义及优点 什么是策略模式呢? 答:定义算法族(对象),分别封装起来,让他们之间可以相 ...

  5. 野生程序员对.NETFramework 4.0 ThreadPool的理解

    ThreadPool 类 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 I/O.代表其他线程等待以及处理计时器. 命名空间:   System.Threading程序集:  mscor ...

  6. 序列化之protobuf与avro对比(Java)

    最近在做socket通信中用到了关于序列化工具选型的问题,在调研过程中开始趋向于用protobuf,可以省去了编解码的过程.能够实现快速开发,且只需要维护一份协议文件即可. 但是调研过程中发现了pro ...

  7. C++11 中值得关注的几大变化（网摘）

    C++11 中值得关注的几大变化(详解) 原文出处:[陈皓 coolshell] 源文章来自前C++标准委员会的 Danny Kalev 的 The Biggest Changes in C++11 ...

  8. 关于excel的导入导出

    目前为方便操作,很多系统都增加了批量导入导出的功能.文件导入导出一般的格式都是excel,现将常用设计用例总结如下:   批量导入 一.模板检查检测:一般excel导入,都会提供模板下载功能 1.模板 ...

  9. meta标签的name和http-equiv属性

    META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息.META标签有两个重要的属性:H ...

  10. let 和 var定义变量的区别-盼盼Degenerate

    let和var关键字的区别 声明后未赋值,表现相同 (function() { var varTest; let letTest; console.log(varTest); //输出undefine ...