pug模板

pug安装

nodeJS ---> node环境
npm ---> 插件管理器 ---> 下载安装插件
【链接】Node.js下载地址： https://nodejs.org/en/

image.png

点击下载 v6.11.2 LTS 稳定版

image.png

使用npm安装完成即可。需要安装pug命令行工具pug-cli　　
[注意]一定要全局安装pug-cli，否则无法正常编译 。
在终端命令输入："node -v" | "npm -v" 结果如下即安装成功

image.png

在SublimeText中创建一个pug文件,如index.pug。

pug模板：

doctype html
html
    head
        meta(charset="utf-8")
        title pug的练习
    body
        h1 学习pug
        div
            a(href="###",class="baidu") 百度
            //div(class="div1")
        div#div1
            div(id="div2")
            p.
                xxxxxx
                xxxxxx
                xxxxxx
            span 你好
                strong 哈哈

在终端命令找到pug所在目录，再输入命令" pug index.pug"输出结果，会得到一个相对应压缩的html文件。

image.png

在终端命令找到pug所在目录，再输入命令" pug -P index.pug"输出结果，会得到一个相对应的标准html文件。

 
  
    
    
  
  
    
学习pug
    
百度
      
    
    

      

      

        xxxxxx
        xxxxxx
        xxxxxx
      
你好哈哈
    
  

在终端命令找到pug所在目录，再输入命令" pug -P -w index.pug"输出结果，会得到一个相对应的标准html文件并且可以实时监控该HTML文件。

image.png

注意：
在终端命令找到pug所在目录，再输入命令" pug -P -w *.pug"输出结果，会得到�所有pug文件相对应的标准html文件并且可以实时监控所有HTML文件。

在终端命令找到pug所在目录，再输入命令" pug -P index.pug -o xxx"输出结果，"-o"后面跟文件夹路径，pug文件会将�html文件输出到指定文件夹中

文件包含：包含（include）功能允许把另外的文件内容插入进来

image.png

继承：extends
Pug 支持使用 block 和 extends 关键字进行模板的继承。一个称之为“块”（block）的代码块，可以被子模板覆盖、替换。这个过程是递归的。

(1)继承

image.png

(2)继承后更改内容

image.png

[pug模板引擎 链接]：http://www.cnblogs.com/xiaohuochai/p/7222227.html