环境准备：

全局安装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. Mysql数据库一:安装与创建windows服务

    Mysql数据库安装与创建windows服务 1.先下载压缩包(mysql-5.7.18-winx64.zip)移动到对应目录(如D:\software)后解压. 2.安装服务端: mysqld:带d ...

  2. 什么是Ajax？Ajax的原理是什么？Ajax的核心技术是什么？Ajax的优缺点是什么？

    Ajax是一种无需重新加载整个网页,能够更新部分网页的技术.Asynchronous JavaScript and XML的缩写,是JavaScript.XML.CSS.DOM等多个技术的组合. Aj ...

  3. 二，windows下安装memcached服务

    window下安装memcached服务的流程如下: 1. 下载memcache的windows稳定版,解压放某个盘下面,比如在c:\memcached 2. 在终端(也即cmd命令界面)下输入 ‘c ...

  4. webpack快速入门——处理HTML中的图片

    在webpack中是不喜欢你使用标签<img>来引入图片的,但是我们作前端的人特别热衷于这种写法, 国人也为此开发了一个:html-withimg-loader.他可以很好的处理我们在ht ...

  5. [HTML] H5在webApp中的注意事项

    常用的meta标签 <!--防止手机中网页放大和缩小--> <meta name="viewport" content="width=device-wi ...

  6. [Dart]语法基础

    此页面向您展示如何使用每个主要Dart功能,从变量和运算符到类和库,假设您已经知道如何使用其他语言编程. 要了解有关Dart核心库的更多信息,请参阅 Dart Libraries之旅.无论何时需要有关 ...

  7. nginx-限制后端服务器连接数

    http加 limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver ...

  8. SQL 必知必会 总结（一）

    SQL必知必会 总结(一) 第 1 课 了解SQL 1.数据库(database): 保存有组织的数据容器(通常是一个文件或一组文件). 2.数据库管理系统(DBMS): 数据库软件,数据库是通过 D ...

  9. 【12】JMicro微服务-Zookeeper

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到11小节 1. CuratorFramework支持 JMicro目前基于Zookeeper实现统 ...

  10. 剑指offer四十七之求1+2+3+...+n

    一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.思路 1.需利用逻辑与的短路特性实现递归终 ...