pug模板

pug安裝

nodeJS ---> node環(huán)境
npm ---> 插件管理器 ---> 下載安裝插件
【鏈接】Node.js下載地址: https://nodejs.org/en/

image.png

點擊下載 v6.11.2 LTS 穩(wěn)定版
image.png

使用npm安裝完成即可。需要安裝pug命令行工具pug-cli  
[注意]一定要全局安裝pug-cli,否則無法正常編譯 。
在終端命令輸入:"node -v" | "npm -v" 結(jié)果如下即安裝成功
image.png

在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文件。


image.png

在終端命令找到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文件。


image.png

注意:
在終端命令找到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)來
image.png

繼承:extends
Pug 支持使用 block 和 extends 關(guān)鍵字進(jìn)行模板的繼承。一個稱之為“塊”(block)的代碼塊,可以被子模板覆蓋、替換。這個過程是遞歸的。

(1)繼承
image.png

(2)繼承后更改內(nèi)容
image.png

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • linux資料總章2.1 1.0寫的不好抱歉 但是2.0已經(jīng)改了很多 但是錯誤還是無法避免 以后資料會慢慢更新 大...
    數(shù)據(jù)革命閱讀 12,218評論 2 33
  • Ubuntu的發(fā)音 Ubuntu,源于非洲祖魯人和科薩人的語言,發(fā)作 oo-boon-too 的音。了解發(fā)音是有意...
    螢火蟲de夢閱讀 99,554評論 9 467
  • pug模板引擎原本叫?jade,但后來因為商標(biāo)原因更名為pug,哈巴狗。但語法還與之前的相同,只是換了個名字。pu...
    放飛吧自我閱讀 1,904評論 1 3
  • 今天學(xué)習(xí)到了pug的使用方法,下面我為大家介紹一個例子 doctype html html head meta(c...
    likeli閱讀 1,246評論 0 0
  • 為什么要使用pug呢,到底它對我們有什么好處,帶給我們什么便利。 1.無需結(jié)束標(biāo)簽 在html中,幾乎每個標(biāo)簽都需...
    沒_有_人閱讀 2,420評論 0 3