环境准备：

全局安装jade: npm安装翡翠g

初始化项目包裹。js : NPM初始化-是

安装完成之后，可以使用玉石帮助查看翡翠的命令行用法

一、在项目目录下新建索引。翡翠文件

inde.jade代码：

doctype html html head meta(charset=' utf-8 ')标题正文h3欢迎学习jade1，标签按照超文本标记语言的缩进格式写

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

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

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

编译之后的index.html代码：

！DOCTYPE html html head meta charset=' utf-8 ' title/title/head body H3欢迎学习jade/h3 /body/html二、类别、身份证等其他属性与多行文本的书写

新建指数2 .翡翠文件，代码如下：

doctype html html head meta(charset=' utf8 ')title jade模板引擎主体h1 jade模板引擎h1 jade模板引擎h1 jade模板引擎div # box。方框1。方框2(class='方框3 ')# ABC。方框1。方框2。方框3 H3。方框1。方框2淘宝。' com '，目标='blank ')淘宝输入（类型='按钮，值='点我)br第1页，这是strong你好/strong 2，测试3,字符串p | 1，这是strong你好| 2，测试| 3,测试字符串执行编译命令：翡翠指数2 .翡翠ghostwu.html把指数2 .翡翠编译成ghostwu.html文件，编译之后的代码如下：

！DOCTYPE html html head meta charset=' utf8 ' title jade模板引擎/标题/头身h1jade模板引擎/h1翡翠模板引擎/h1翡翠模板引擎/h1 div id=' box ' class=' box 1 box 2 box 3 '/div id=' ABC ' class=' box 1 box 2 box 3 '/div H3 class=' box 1 box 2 ABC def '/h3a href=' http://www .淘宝。com ' rel=' external no follow ' target=' blank '淘宝/a输入类型='按钮'值='点我br p 1，这是stronghello/strong 2，test 3，string /p p 1，这是tronghello/strong 2，test 3，test string /p /body/html1，div#box.box1.box2(class='box3 ')这种写法是蚂蚁的写法#就是编号属性点(.)就是班级属性括号也是属性写法

2、#abc.box1.box2.box3、全面没有给元素标签名称，默认就是给差异标签加上这些属性

3,多行文本的两种写法

页(第页的缩写)

1,这是tronghello/strong2，test3，字符串

多行文本第一种写法：p标签后面要跟一个。里面用原始的超文本标记语言标签写法

p

| 1,这是强您好| 2,测试| 3,测试字符串

多行文本第2种写法：文本前面用竖线(| ),标签后面跟内容

三、注释

翡翠模板代码：

doctype html html head meta(charset=' utf8 ')title jade模板引擎学习幽灵尸体h3单行注释//div.box.box2这是一段分区h3不会编译到超文本标记语言文件的注释//- div#box.box2.box3 h3块注释，也叫多行注释//-输入（类型='复选框'，名称='我的天'，值='仙女)仙女输入（类型='复选框'，名称='我的天'，值='御姐)御姐h3这里不是注释输入（类型='复选框'，名称='我的天'，值='仙女') | 仙女输入（类型='复选框'，名称='我的天'，值='御姐') | 御姐编译之后：

！DOCTYPE html html head meta charset=' utf8 ' title jade模板引擎学习-由ghostwu/title /head body h3提供单行注释/h3！- div.box.box2这是一段div - h3不会编译到超文本标记语言文件的注释/h3 h3块注释，也叫多行注释/h3 h3这里不是注释/h3输入类型='复选框'名称='我的天'值='仙女'仙女输入类型='复选框'名称='我的天'值='御姐'御姐/body/html1，单行注释

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

2,只在翡翠中注释，不会被编译到超文本标记语言文件

//- div#box.box2.box3

3,块注释（多行文本注释),被注释的内容要另起一行

4、复选框后面的显示文字部分要注意，不要挨着属性的后面，要另起一行，写在竖线的后面

四、玉模板实战菜单

doctype html html head meta(charset=' utf8 ')title jade模板引擎学习-用幽灵的方式* { margin : 0；padd : 0；}李{列表式-类型：无；} a { text-decoration : none颜色：白色；} # nav { width :980 pxh three : 34 pxmargin 336020 px汽车；线高：34 px背景技术： # 800;} #导航li { float:left} #导航li。活动{背景：红色；} # nav Li :悬停{背景： # 09f} #导航阿利{ padding: 5px 10px }车身div # nav ul Li。活动a(href=' JavaScript :')首页阿利)玄幻小说阿利)修真小说阿利)都世小说阿利)科幻小说阿利)网游小说编译（翡翠指数之后的效果： -w:实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术

五、解释变量

doctype html html head meta(charset=' utf8 ')-var title=' jade模板引擎学习——代笔人；title #{title.toUpperCase()}样式* { margin : 0；padd : 0；}李{列表式-类型：无；} a { text-decoration : none颜色：白色；} # nav { width :980 pxh three : 34 pxmargin 336020 px汽车；线高：34 px背景技术： # 800;} #导航li { float:left} #导航li。活动{背景：红色；} # nav Li :悬停{背景： # 09f} #导航阿利{ padding: 5px 10px }车身div # nav ul Li。active a(href=' JavaScript :)首页阿利)玄幻小说阿利)修真小说阿利)都世小说阿利)科幻小说阿利)网游小说#{}: 可以解释变量，toUpperCase():变量转大写

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

新建data.json文件数据

{'content' : '跟着幽灵学习翡翠指数2 .翡翠文件模板： doctype html html head meta(charset=' utf8 ')-var title=' jade模板引擎学习——代笔人；标题# {标题。touppercase()} body H3 # { content }编译命令：翡翠索引2 .翡翠-邮政总局数据。json -O指定一个json文件，把json文件的数据传递到模板

编译后的结果：

！DOCTYPE html html head meta charset=' utf8 ' title Jade模板引擎学习-BY GHOSTWU/title /head body h3跟着幽灵学习jade/h3 /body/html以上这篇基于Node.js模板引擎教程杰德速学与实战一就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。