pug模板
2017-09-04 本文已影响0人
浅夏_cd06
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文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pug的练习</title>
</head>
<body>
<h1>学习pug</h1>
<div><a class="baidu" href="###">百度</a>
<!--div(class="div1")-->
</div>
<div id="div1">
<div id="div2"></div>
<p>
xxxxxx
xxxxxx
xxxxxx
</p><span>你好<strong>哈哈</strong></span>
</div>
</body>
</html>
在终端命令找到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）的代码块，可以被子模板覆盖、替换。这个过程是递归的。
image.png
(2)继承后更改内容
image.png
[pug模板引擎 链接]：http://www.cnblogs.com/xiaohuochai/p/7222227.html
