pug安裝
nodeJS ---> node環(huán)境
npm ---> 插件管理器 ---> 下載安裝插件
【鏈接】Node.js下載地址: https://nodejs.org/en/
點擊下載 v6.11.2 LTS 穩(wěn)定版
使用npm安裝完成即可。需要安裝pug命令行工具pug-cli
[注意]一定要全局安裝pug-cli,否則無法正常編譯 。
在終端命令輸入:"node -v" | "npm -v" 結(jié)果如下即安裝成功
在SublimeText中創(chuàng)建一個pug文件,如index.pug。
pug模板:
doctype html
html
head
meta(charset="utf-8")
title pug的練習(xí)
body
h1 學(xué)習(xí)pug
div
a(href="###",class="baidu") 百度
//div(class="div1")
div#div1
div(id="div2")
p.
xxxxxx
xxxxxx
xxxxxx
span 你好
strong 哈哈
在終端命令找到pug所在目錄,再輸入命令" pug index.pug"輸出結(jié)果,會得到一個相對應(yīng)壓縮的html文件。
在終端命令找到pug所在目錄,再輸入命令" pug -P index.pug"輸出結(jié)果,會得到一個相對應(yīng)的標(biāo)準(zhǔn)html文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pug的練習(xí)</title>
</head>
<body>
<h1>學(xué)習(xí)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"輸出結(jié)果,會得到一個相對應(yīng)的標(biāo)準(zhǔn)html文件并且可以實時監(jiān)控該HTML文件。
注意:
在終端命令找到pug所在目錄,再輸入命令" pug -P -w *.pug"輸出結(jié)果,會得到?所有pug文件相對應(yīng)的標(biāo)準(zhǔn)html文件并且可以實時監(jiān)控所有HTML文件。
在終端命令找到pug所在目錄,再輸入命令" pug -P index.pug -o xxx"輸出結(jié)果,"-o"后面跟文件夾路徑,pug文件會將?html文件輸出到指定文件夾中
文件包含:包含(include)功能允許把另外的文件內(nèi)容插入進(jìn)來繼承:extends
Pug 支持使用 block 和 extends 關(guān)鍵字進(jìn)行模板的繼承。一個稱之為“塊”(block)的代碼塊,可以被子模板覆蓋、替換。這個過程是遞歸的。
(2)繼承后更改內(nèi)容
[pug模板引擎 鏈接]:http://www.cnblogs.com/xiaohuochai/p/7222227.html