位置: 编程技术 - 正文
基于Node.js模板引擎教程-jade速学与实战1(node.js模块)
编辑：rootadmin推荐整理分享基于Node.js模板引擎教程-jade速学与实战1(node.js模块)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:node 模板,node.js模块,node.js设计模式(第2版)下载,nodejs 模块开发,node.js模块,node 模板,node.js模块,基于nodejs的项目,内容如对您有帮助，希望把文章链接给更多的朋友！
环境准备：
全局安装jade: npm install jade -g
初始化项目package.json: npm init --yes
安装完成之后，可以使用 jade --help 查看jade的命令行用法
一、在项目目录下新建index.jade文件
inde.jade代码：
1，标签按照html的缩进格式写
2，标签的属性可以采用圆括号
3，如果标签有内容，可以直接写在标签的后面
然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)
编译之后的index.html代码：
二、class,id等其他属性与多行文本的书写
新建index2.jade文件,代码如下：
执行编译命令：jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.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,test3,string
多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法
p
| 1, this isstrong hello| 2, test| 3, test string
多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容
三、注释
jade模板代码：
编译之后:
1，单行注释
// div.box.box2 这是一段div
2，只在jade中注释，不会被编译到html文件
//- div#box.box2.box3
3，块注释( 多行文本注释 )，被注释的内容要另起一行
4，checkbox后面的显示文字部分 要注意，不要挨着属性的后面，要另起一行，写在竖线的后面
四、jade模板实战菜单
编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术
五、解释变量
#{}： 可以解释变量, toUpperCase():变量转大写
把json文件的数据在编译的时候传递到模板,
新建data.json文件数据
编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板
编译后的结果：
以上这篇基于Node.js模板引擎教程-jade速学与实战1就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。
Nodejs+express+ejs简单使用实例代码 前几天主要看了express，今天开始接触ejs，jade还是不想看了，O(∩_∩)O哈哈~varexpress=require("express");varejs=require('ejs');//varfs=require("fs");//varbodyParser=require('bod
Mongoose中document与object的区别示例详解 前言本文主要给大家总结介绍了关于Mongoose中document与object区别的相关内容，分享出来供大家参考学习，其实这个问题其实是mongoose非常常见的问题，经
Express使用html模板的详细代码 express默认使用jade模板，可以配置让其支持使用ejs或html模板。1.安装ejs在项目根目录安装ejs.npminstallejs2、引入ejsvarejs=require('ejs');//我是新引入的ejs插件3
标签: node.js模块
本文链接地址:https://www.jiuchutong.com/biancheng/379502.html 转载请保留说明！上一篇：利用express启动一个server服务的方法(express如何使用)
下一篇：Nodejs+express+ejs简单使用实例代码
