Jade模板引擎学习(一)安装及基本语法
2024-08-20 11:01:01
Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持。
一、功能
客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式
可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀
AST过滤器 过滤器 ...
二、jade安装
npm install jade -g
jade -h
三、jade工具
四、jade语法
4.1 标签
以p标签为例
p
会转换为:
<p></p>
jade能自动识别自闭和标签:
input
会转换为:
<input/>
4.2 文本
4.2.1标签中添加文本
p 欢迎加入wandoujia-fe
会转换为:
<p>欢迎加入wandoujia-fe</p>
4.2.2 标签中嵌套标签
直接跟写html一样就行
p Welcome to wandoujia fe, we want <b>you</b>
会转换为:
<p>Welcome to wandoujia fe, we want <b>you</b></p>
4.2.3 标签中有大段的块内容
- 方式一:在标签后面添加 "
."
比如一段js代码,注意是script后面有一个"."
script.
console.log('Welcome to join wandoujia-fe')
console.log('We want you')
- 方式二:每段前面添加"
|"
script
| console.log('Welcome to join wandoujia-fe')
| console.log('We want you')
转换结果:
<script>
console.log('Welcome to join wandoujia-fe')
console.log('We want you')
</script>
4.3 属性
以 ()
来分割属性
a(rel="nofollow", href="http://www.wandoujia.com/join#getJobInfo=1") 招聘
会转换为:
<a rel="nofollow" href="http://www.wandoujia.com/join#getJobInfo=1">招聘</a>
4.4 注释
4.4.1 单行注释
// changed by yc-team
会转换为:
<!-- changed by yc-team -->
4.4.2 多行注释
body
//
p 测试代码by yaochun
会转换为:
<body>
<!--p 测试代码by yaochun
-->
</body>
4.4.3 不输出的注释
在单行注释上加一个短横线 -
//- 这段注释不会输出
p 文本测试by yaochun
会转换为:
<p>文本测试by yaochun</p>
注意: 很多文档里面提到的条件注释已经不再支持
4.5 doctype
添加一个doctype只需要doctype,然后再跟一个可选的值,默认是html
doctype html
会转换为:
<!DOCTYPE html>
注意:!!!
这种简写的方式已经被抛弃了~
可选值还有:
- xml
- transitional
- srict
- frameset
- 1.1
- basic
- mobile
4.6 设置id或class
标签后面跟上#id
,.classname
,如果没有标签则使用默认标签div
#content
p#info
a.btn
会转换为:
<div id="content"></div>
<p id="info"></p>
<a class="btn"></a>
4.7 1个id和多个class
连着写即可
a#download-btn.btn.blue-btn
会转换为:
<a id="download-btn" class="btn blue-btn"></a>
转自:http://www.w3cplus.com/html/jade.html
最新文章
- poj 3414 Pots bfs+模拟
- 006-Map、Tuple、Zip实战解析
- FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
- windows7实现打印机共享的方法
- 【Bug Fix】Error : Can&;#39;t create table &;#39;moshop_1.#sql-534_185&;#39; (errno: 150)
- Vue系列之 =>; 使用webpack-dev-server工具实现自动打包编译
- CefSharp浏览器网页中文语言设置
- LoadRunner脚本参数化之设置条件与运行结果说明
- springmvc注解方式
- Python基础(九) type元类
- 剑指offer(42)和为S的字符串
- 实训一(cocos2d-x相关)
- Linux-c系统编程
- git reset与git revert比較
- HDU 3546
- 【bzoj4016】 FJOI2014—最短路径树问题
- soj1762.排座椅
- Linux教程 - 管道和重定向
- Vector &; ArrayList Hashtable &; HashMap ArrayList &; LinkedList
- [转载]DataView详解
热门文章
- Machine Learning笔记整理 ------ (三)基本性能度量
- 小程序之web-view打开外部链接
- JavaScript中childNodes和children的区别
- ACM hust 2.1
- 软工网络15团队作业4——Alpha阶段敏捷冲刺-4
- Qt语言家(Qt Linguist)更新翻译报错-Qt5.9-MinGW
- 【week2】 词频统计效能分析
- HDU 2117 Just a Numble
- Nautilus-Share-Message: Called ";net usershare info"; but it failed: Failed to
- server2003 必要的系统优化和安全设置