https://segmentfault.com/a/1190000006198621
安装
npminstall-g pug
npm install -g pug-cli
测试是否安装好 pug -V
语法
一段简单的代码
输入pug -P -w test.pug比较好,因为输出的html格式会好看,并且是被监听的,修改test.pug的时候,只要保存,html会及时更新
按照正确的缩镜 ,
1.文档声明和头尾标签
2.元素标签
注意缩镜 (语法看图一) , 元素后面 空一格 再写文本
3.属性标签
a#id.className(href='www.baidu.com') 或者 a( id='id' , class='className' , href='www.baidu.com' )
紧贴着元素后面写ID或class,其他的标签 在元素后面 用括号里写 用逗号隔开
4.注释
6.转义 与 非转义
变量默认是自动转义的,转义后的代码 < 会被解析成 <, 加感叹号则是不转义的 , 显示的代码就是代码原文
7.循环
for循环
for each 循环
嵌套循环
case循环
8.if else
9.mixin
生成 mixin
mixin 名字
代码段
+名字 (调用)
传参
参数不确定
多个mixin嵌套
关键字
属性
模板包含(includes)
局部调用
模板引用 (Extends)
多个页面会用到的 模板类型
block
block 的覆盖与继承
http://www.cnblogs.com/xiaohuochai/p/7222227.html
当 图一这样写 h2在block content 的下面 表示同级元素 ,并不是 block content的子元素 ,所以可被继承
当 图二这样写 h2在block content 缩镜下面 表示是 子元素,如果 index.pug中有block content ,这将会被覆盖,layout 中的block content 是一个默认值 ,如果 index中没有content 就用layout中的数据 ,如果有 则覆盖。
include 是包含功能,允许把别的文件内容插入进来
extends 是继承 , 来指出这个被继承的模板的路径