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