pug

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.注释


5.变量的声明和数据传递

在页面中 应用  #{变量}

直接在页面中声明(优先级最高)
在命令行中声明
在json文件中声明运用

6.转义 与 非转义

变量默认是自动转义的,转义后的代码 < 会被解析成 <, 加感叹号则是不转义的 , 显示的代码就是代码原文


7.循环


for循环


for循环

for each 循环


for each 循环
each 循环

嵌套循环



case循环

8.if else

9.mixin

生成 mixin

mixin 名字

代码段

+名字 (调用)

传参

参数不确定


多个mixin嵌套

关键字

属性

模板包含(includes)

局部调用

模板引用 (Extends)

多个页面会用到的  模板类型

block 


index.pug


图一
图二

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 是继承 , 来指出这个被继承的模板的路径

推荐阅读更多精彩内容