您的位置:首页> 日志> 前端技术 正文
DTOP

Jade基础语法介绍

laomao800 | 2016年01月04日 |

>>收藏本文 已有 3条评论

Jade是一个基于javascript,可以运行与node与浏览器环境的一个前端模板引擎,而在对它进行学习了解后,作一番简介兼对自我的复习。

项目github主页:https://github.com/jadejs/jade

当然更好的介绍文章就是官方文档了。

 

tag标签

通过缩进关系,代替以往html的层级包含关系,如一个简单的静态页面可以表达为

(与emmet类比一下可以帮助理解)

内联书写层级

a: img

(通过分号区分元素内内容

自闭合标签

img、meta、link 等自闭合会自动识别
可通过在标签后添加 / 强制输出自闭合元素

style属性

style属性可以想上面的格式传入一个文本包含所有样式内容,或者传入一个类似js中的对象,达到同样的效果

 

变量

使用 “=” 号输出变量值到元素内

通过 #{variable} 插入相应的变量值

 

属性

html 元素属性通过在标签右边通过括号包含(此处逗号可拆分为多行书写属性的格式)

也支持表达式进行属性的判断:

如果是布尔型的属性,jade会自动根据当前doctype输出适合的格式,对比如下:

 

文本

  • 通过在文字前面添加竖线符号“|”可让 jade 原样输出内容
  • 在html标签标记后面通过空格隔开文本内容
  • 在html标签标记后通过添加英文句号“.”添加块级文本

上面3个形式的方式效果为:

 

注释

可以通过双斜杠进行注释,jade有3种注释方式,可以分别对应输出html注释、不输出html注释、块级html注释,如图:

 

迭代

jade支持通过js语法形式运行一些表达式,最简单常用的就一个迭代可以表达为:

 

条件判断

jade 支持 if 、case条件判断,类比js的相应语法:

 

Filter

支持其他不同语法的代码插入。(需要安装有相应的包)

比如我们可以在一个段落下插入一段markdown文本:

 

Mixins

如果我们以前有接触过sass等预编译样式语言的话,也就理解了这个的用法,方法十分类似,通过定义部分可以公用的代码之后,适当的设置可传入参数,可以实现代码大程度上的复用。
定义和使用的语法也比较简单:

http://jade-lang.com/reference/mixins/
可以参考官方说明文档,重点可以着重理解最后2种调用方式。

 

Extends

layout.jade 文件:


index.jade 文件:


默认继承方式为覆盖原内容,还可选 prepend 在代码前插入, append 在代码后插入,


可以省略 block 写为:


 

Include

index.jade 文件


head.jade 文件


包含文件