jade基本语法介绍
之前在博客中介绍了jade模版,在接下来的使用过程中,越来越觉得语法规范化的重要,今天抽空在这里总结一下这些天
使用jade模版的心得。
tag标签
标签都是通过TAB缩进,来代替HTML中的层级包含关系
1、内联书写层级
a、img标签 通过分号区分元素内内容
2、自闭合标签
img、meta、link等自闭合标签会自动识别,也可在标签后添加/强制输出自闭合元素
style属性
图中已完美呈现:
变量
使用“=”输出变量值到元素内
通过 #{variable} 插入相应的变量值
这个没怎么用到,先提一提!
属性
html 元素属性通过在标签右边通过括号包含(此处逗号可拆分为多行书写属性的格式)
文本
通过在文字前面添加竖线符号“|”可让 jade 原样输出内容
在html标签标记后面通过空格隔开文本内容
在html标签标记后通过添加英文句号“.”添加块级文本
上面3个形式的方式效果为:
注释
可以通过双斜杠进行注释,jade有3种注释方式,可以分别对应输出html注释、不输出html注
释、块级html注释:
迭代
jade支持通过js语法形式运行一些表达式,最简单常用的就一个迭代可以表达为:
是不是很好用!!!
条件判断
jade 支持 if 、case条件判断,类比js的相应语法:
js可以直接写在里面,是不是很神奇!!!
Include
include.jade文件
head.jade文件
包含文件