作為網(wǎng)頁(yè)設(shè)計(jì)師或開發(fā)人員，我們可能都必須寫出我們的HTML的公平份額。盡管這不是最艱巨的任務(wù)，但通常會(huì)感到有些無聊或重復(fù)。這是PUG HTML預(yù)處理器進(jìn)來的地方。

>

> html也是靜態(tài)的，這意味著，如果您要顯示動(dòng)態(tài)數(shù)據(jù)（例如，從API獲?。?，您總是會(huì)在JavaScript內(nèi)部得到HTML STINGS的Mishmash。這可能是一次噩夢(mèng)，要進(jìn)行調(diào)試和維護(hù)。 PUG是節(jié)點(diǎn)和瀏覽器的模板引擎。它將其編譯為HTML并具有簡(jiǎn)化的語法，這可以使您更有生產(chǎn)力，并且代碼更可讀。 PUG使得編寫可重復(fù)使用的HTML以及從數(shù)據(jù)庫(kù)或API中獲取的數(shù)據(jù)很容易。

>在本指南中，我將演示如何用帕格啟動(dòng)和跑步。我們將從NPM安裝它開始，介紹其基本語法，然后查看在Pug中使用JavaScript的幾個(gè)示例。最后，我們將通過構(gòu)建一個(gè)簡(jiǎn)單的節(jié)點(diǎn)/Express項(xiàng)目來探索一些PUG更高級(jí)的功能，該項(xiàng)目將PUG用作模板引擎。

鑰匙要點(diǎn)

Pug，以前稱為Jade，是一種模板引擎，可編譯為HTML，可用于編寫清潔器，更可讀的代碼，尤其是在處理動(dòng)態(tài)內(nèi)容時(shí)。

>它簡(jiǎn)化了將動(dòng)態(tài)數(shù)據(jù)集成到HTML中的集成，使其成為數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序的絕佳選擇，盡管小型靜態(tài)站點(diǎn)不是必需的或最小的動(dòng)態(tài)內(nèi)容。
• 安裝涉及設(shè)置節(jié)點(diǎn)，npm和pug-cli軟件包，并在編輯器中使用語法突出顯示，以易于開發(fā)。
> pug使用一個(gè)簡(jiǎn)化的語法，沒有關(guān)閉標(biāo)簽，并且依賴于結(jié)構(gòu)HTML文檔的縮進(jìn)，這可以大大減少書面代碼的數(shù)量。
• >它支持用于動(dòng)態(tài)模板的JavaScript集成，允許直接在哈巴狗文件中進(jìn)行變量，迭代和條件。
• >教程結(jié)束了在節(jié)點(diǎn)/Express項(xiàng)目中使用pug的實(shí)踐演示來創(chuàng)建員工目錄，展示了高級(jí)功能，例如模板繼承和可重復(fù)使用的代碼的混音。
• 什么是PUG使用什么？
>
• >在我們開始看哈巴斯之前，讓我們一秒鐘來了解所涉及的概念。
>模板引擎是一個(gè)程序，負(fù)責(zé)將模板（可以使用多種語言中的任何一種編寫）編譯為HTML。模板引擎通常會(huì)從外部源接收數(shù)據(jù)，并將其注入其編譯的模板中。這是由以下圖進(jìn)行了說明的。
• > 學(xué)分：Dreftymac，Tempengweb016，CC BY-SA 3.0

  這種方法使您可以重復(fù)使用靜態(tài)網(wǎng)頁(yè)元素，同時(shí)根據(jù)數(shù)據(jù)定義動(dòng)態(tài)元素。它還有助于分開關(guān)注點(diǎn)，使您的應(yīng)用程序邏輯與顯示邏輯隔離。 如果您的網(wǎng)站或Web應(yīng)用程序是數(shù)據(jù)驅(qū)動(dòng)的，那么您更有可能從模板引擎中受益 - 例如用于管理員工的員工目錄，列出了各種產(chǎn)品供用戶購(gòu)買的網(wǎng)站或具有動(dòng)態(tài)性的網(wǎng)站搜索功能。

  >如果您從API獲取少量數(shù)據(jù)（在這種情況下，您只需使用JavaScript的本機(jī)模板字符串），或者如果您正在制作小型靜態(tài)站點(diǎn)。

  一點(diǎn)歷史

  >還值得注意的是，由于2015年的商標(biāo)索賠，Pug曾經(jīng)被稱為Jade，直到被迫更名。

  >在線仍有很多與Jade相關(guān)的材料。盡管其中一些可能仍然非常有效，但名稱更改與主要版本凹痕相吻合的事實(shí)意味著，與其前任相比，Pug的語法具有幾種差異，棄用和刪除。這些已記錄在這里。
  如果您有興趣了解更多信息，則可以閱讀本Github問題中的原始名稱更改公告。否則，只需確保將“模板”一詞添加到與PUG相關(guān)的Google搜索中，以避免結(jié)果充滿狗。

  >安裝哈巴狗

  >在我們寫一些哈巴狗之前，我們需要安裝節(jié)點(diǎn)，NPM（與節(jié)點(diǎn)捆綁在一起）和任Pug-Cli軟件包。

  >安裝節(jié)點(diǎn)/npm有幾個(gè)選項(xiàng)。要么轉(zhuǎn)到項(xiàng)目主頁(yè)，然后下載適合您的系統(tǒng)的正確二進(jìn)制文件，或使用NVM等版本管理器。我建議在可能的情況下使用版本管理器，因?yàn)檫@將使您可以安裝不同的節(jié)點(diǎn)版本并隨意之間切換。它還將否定一堆潛在的權(quán)限錯(cuò)誤。

  >

  >您可以查看我們的教程“使用NVM安裝多個(gè)版本的node.js”以獲取更深入的指南。
  >在系統(tǒng)上安裝了節(jié)點(diǎn)和npm后，您可以像這樣安裝PUG-CLI軟件包：

  >您可以通過將哈巴狗鍵入終端來檢查安裝過程是否正確運(yùn)行。這將輸出PUG的版本和您已安裝的CLI的版本。

  >

  在撰寫本文時(shí)，如下所示：

  >

  <span>npm i -g pug-cli
  </span>

  >語法在您的編輯器中突出顯示

  如果您的編輯器不提供PUG的語法突出顯示，那么尋找擴(kuò)展程序以添加此功能是個(gè)好主意。

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  >我目前正在使用Sublime Text 3，并且在開箱即用，這就是.pug文件的外觀：

  

  為了解決這個(gè)問題，可以安裝崇高的哈巴狗軟件包：>

  

  >語法突出顯示將使使用哈巴狗文件，尤其是任何長(zhǎng)度的文件。

  >嘗試pug html而不安裝

  如果您想遵循本教程中的簡(jiǎn)單示例，則還可以在各種在線代碼游樂場(chǎng)中運(yùn)行它們。

  例如，Codepen >>>

  html ，然后選擇pug作為預(yù)處理器。這將使您可以將哈巴索代碼輸入HTML窗格，并看到結(jié)果實(shí)時(shí)出現(xiàn)。> 作為額外的獎(jiǎng)勵(lì)，您可以單擊HTML窗格中的向下箭頭，然后選擇“>”視圖編譯的HTML

  查看Pug已生成的標(biāo)記。 >現(xiàn)在我們已經(jīng)安裝了哈巴狗，讓我們嘗試一下。創(chuàng)建一個(gè)名為Pug-expamples的新目錄，然后更改為其。然后創(chuàng)建一個(gè)名為HTML的目錄和一個(gè)稱為index.pug的文件：> >

  注意：Touch命令是Linux/MacOS特定的。 Windows用戶會(huì)回聲。

  >工作的工作方式是，我們將在index.pug中編寫PUG代碼，并讓Pug-Cli觀看此文件以進(jìn)行更改。當(dāng)它檢測(cè)到任何內(nèi)容時(shí)，它將采用index.pug的內(nèi)容，并將其作為HTML目錄中的HTML渲染。

  >

  開始這件事，打開Pug-examples目錄中的終端，然后輸入以下內(nèi)容：>

  <span>npm i -g pug-cli
  </span>

  您應(yīng)該看到類似以下內(nèi)容：

  >

  注意：在上面的命令中，-w選項(xiàng)代表觀看，點(diǎn)告訴Pug，請(qǐng)注意當(dāng)前目錄中的所有內(nèi)容，-o ./html告訴PUG在HTML目錄中輸出其HTML， -p選項(xiàng)會(huì)使輸出。

  >

  現(xiàn)在，讓我們從上面的屏幕截圖創(chuàng)建頁(yè)面（關(guān)于缺乏語法突出顯示的內(nèi)容）。將以下內(nèi)容輸入index.pug：

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  >
  >保存pug.index，然后檢查./html/index.html的內(nèi)容。您應(yīng)該看到以下內(nèi)容：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  還不錯(cuò)，是嗎？哈巴狗CLI將我們的哈巴狗檔案列為常規(guī)html。這個(gè)示例可以突出顯示有關(guān)哈巴狗的幾個(gè)重要點(diǎn)。首先，它是空格敏感的，這意味著PUG使用凹痕來弄清楚哪些標(biāo)簽相互嵌套。例如：

  上面的代碼產(chǎn)生以下內(nèi)容：

  pug <span>-w . -o ./html -P
  </span>

  >
  現(xiàn)在采用此代碼：

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  這會(huì)產(chǎn)生以下內(nèi)容：

  >

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  >您使用哪種凹痕（如果需要的話，甚至可以使用選項(xiàng)卡）并不重要，但是強(qiáng)烈建議您保持凹痕層面的水平一致。在本文中，我將使用兩個(gè)空間。

  >其次，哈巴狗沒有任何關(guān)閉標(biāo)簽。顯然，這將為您節(jié)省一些鍵盤，并為帕格提供干凈，易于閱讀的語法。

  >現(xiàn)在我們已經(jīng)有了一些基本的哈巴狗的處理方法，讓我們快速瀏覽其語法。如果其中任何一個(gè)似乎令人困惑，或者您想更深入地走，請(qǐng)務(wù)必咨詢?cè)擁?xiàng)目的出色文檔。

  > Doctype

  您可以使用PUG生成許多文檔類型聲明。>

  例如，Doctype HTML將編譯為，標(biāo)準(zhǔn)HTML5 Doctype，而Doctype嚴(yán)格會(huì)給我們。哈巴狗將盡最大努力確保其輸出對(duì)文檔類型有效。

  >

  >標(biāo)簽

  如前所述，哈巴狗沒有任何關(guān)閉標(biāo)簽，并且依賴于嵌套的凹痕。這可能需要少量習(xí)慣，但是一旦這樣做，它就會(huì)制定干凈可讀的代碼。以示例為例：

  上面的代碼對(duì)此進(jìn)行了編譯：

  >

  <span>npm i -g pug-cli
  </span>

  請(qǐng)注意，Pug足夠聰明，可以關(guān)閉我們的任何自關(guān)閉標(biāo)簽（例如元素）。

  >

  類，ID和屬性

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  使用.className和#idname表示法表示

  類和ID。例如：

  pug還為我們提供了方便的快捷方式。如果未指定標(biāo)簽，它將假定

  元素：>

  這兩個(gè)都編譯為：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  >使用括號(hào)添加屬性：

  pug <span>-w . -o ./html -P
  </span>

  這將導(dǎo)致以下結(jié)果：

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  >關(guān)于屬性還有很多要說的。例如，您可以使用JavaScript將變量包含在您的屬性中，也可以將值數(shù)組分配給屬性。我們將繼續(xù)在下一節(jié)中使用JavaScript。

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  純文本和文本塊

  PUG提供了各種直接將純文本添加到渲染的HTML中的方法。

  >我們已經(jīng)看到了如何添加純文本內(nèi)聯(lián)：

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  >另一種方法是將管子字符（|）的線上置為前綴：

  這給了我們以下內(nèi)容：

  >處理大量文本時(shí)，您可以只是一個(gè)點(diǎn)。在標(biāo)簽名稱之后或關(guān)閉括號(hào)之后，如果標(biāo)簽具有屬性：

  >

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  這將導(dǎo)致：

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  >評(píng)論

  <span>div<span>.remark</span>
  </span><span>p Pug rocks!!
  </span>

  >最后，可以添加評(píng)論：

  <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
  </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>

  此評(píng)論將添加到渲染的HTML： 您開始評(píng)論這樣的評(píng)論：

  <span>nav
  </span>  <span>navbar-default  div
  </span>    <span>h1 My Website!
  </span>  <span>ul
  </span>    <span>li
  </span>      <span>a Home
  </span>    <span>li
  </span>      <span>a Page 1
  </span>    <span>li
  </span>      <span>a Page 2
  </span>  <span>input
  </span>

  執(zhí)行此操作時(shí)，該評(píng)論將保留在PUG文件中，但不會(huì)出現(xiàn)在html中。

  >評(píng)論必須出現(xiàn)在自己的行上。在這里，該評(píng)論將被視為純文本：

  <span><span><span><nav</span>></span>
  </span>  <span><span><span><div</span>></span>
  </span>    <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span>
  </span>  <span><span><span></div</span>></span>
  </span>  <span><span><span><ul</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span>
  </span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span>
  </span>  <span><span><span></ul</span>></span>
  </span>  <span><span><span><input</span>/></span>
  </span><span><span><span></nav</span>></span>
  </span>

  多行論也是可能的：

  <span>nav<span>#navbar-default</span>  
  </span>  <span>div<span>.container-fluid</span>
  </span>    <span>h1<span>.navbar-header</span> My Website!
  </span>

  >

  <span>npm i -g pug-cli
  </span>

  基本語法demo

  >您可以找到一個(gè)自舉風(fēng)格的布局的演示，該布局演示了我們到目前為止討論的技術(shù)：

  >請(qǐng)參閱sitepoint（@sitepoint）
  codepen。
  

  在PUG HTML模板中使用JavaScript

  >關(guān)于哈巴狗的偉大事物之一是能夠在模板中運(yùn)行JavaScript。這很容易將變量插入我們的模板，迭代陣列和對(duì)象，有條件地呈現(xiàn)HTML等等。

  >緩沖vs無封閉代碼

  >這是在使用JavaScript中使用JavaScript之前要注意的一個(gè)重要區(qū)別。

  >未封閉的代碼以減去（ - ）開頭。它不會(huì)直接向輸出添加任何內(nèi)容，但可以從pug中使用其值：>

  另一方面，緩沖代碼始于等效（=）。它評(píng)估JavaScript表達(dá)式并輸出結(jié)果。

  >

  上面的代碼對(duì)此進(jìn)行了編譯：

  >

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  出于安全原因，緩沖代碼被HTML逃脫了。

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  上面的代碼對(duì)此進(jìn)行了編譯：

  >

  pug <span>-w . -o ./html -P
  </span>

  插值

  >字符串插值是在具有相應(yīng)值的模板中替換一個(gè)或多個(gè)占位符的過程。正如我們剛剛看到的那樣，緩沖輸入提供了一種這樣做的方法。另一個(gè)正在使用＃{}。在這里，PUG將評(píng)估卷曲括號(hào)之間的任何代碼，逃脫它并將其渲染到模板中。

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  上面的代碼對(duì)此進(jìn)行了編譯：

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  >

  因?yàn)榫砬ㄌ?hào)可以包含任何有效的JavaScript表達(dá)式，因此打開了一堆可能性：

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  此編譯為：

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  >也可以使用！{}將Unscaped值渲染到模板中。但這不是最好的主意，如果輸入來自不受信任的來源。>

  >

  注意：當(dāng)要為元素屬性中的變量中持有的值分配時(shí)，您可以省略＃{}。例如：img（alt = name）。

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  迭代

  <span>div<span>.remark</span>
  </span><span>p Pug rocks!!
  </span>

  pug的每個(gè)關(guān)鍵字使得可以輕松迭代陣列：>

  這將導(dǎo)致以下結(jié)果：

  您也可以將其用于迭代對(duì)象中的鍵：>

  這將導(dǎo)致：

  <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
  </span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>

  pug還允許您提供一個(gè)其他塊，如果數(shù)組或?qū)ο鬄榭?，將?zhí)行該塊：

  >

  <span>nav
  </span>  <span>navbar-default  div
  </span>    <span>h1 My Website!
  </span>  <span>ul
  </span>    <span>li
  </span>      <span>a Home
  </span>    <span>li
  </span>      <span>a Page 1
  </span>    <span>li
  </span>      <span>a Page 2
  </span>  <span>input
  </span>

  最后，請(qǐng)注意，您可以用作每個(gè)的別名。>

  條件

  根據(jù)JavaScript表達(dá)式的結(jié)果，有條件提供了一種非常方便的呈現(xiàn)不同HTML的方法

  <span>npm i -g pug-cli
  </span>

  在此示例中，我們正在檢查員工對(duì)象是否具有Extn屬性，然后輸出該屬性的值（如果存在）或文本“ N/A”。

  > javaScript在哈巴狗演示中 在下面，您可以找到我們本節(jié)中討論的一些技術(shù)的演示。這比以前的演示更大的好處展示了帕格的好處，因?yàn)槲覀円砑痈鄦T工所需要做的就是在我們的SitePointEmploines Employees Array中添加更多對(duì)象。>

  >請(qǐng)參閱codepen上的sitepoint（@sitepoint）

  在pug demo中的javascript。

  一個(gè)動(dòng)手示例
  
  >現(xiàn)在，我們對(duì)Pug的語法及其運(yùn)作方式有一個(gè)合理的想法，讓我們通過構(gòu)建一個(gè)小型Express.js應(yīng)用程序來結(jié)束，以演示一些Pug的更高級(jí)功能。

  此示例的代碼可在GitHub上找到。

  >

  >

  注意：如果您以前沒有使用過Express，則不用擔(dān)心。它是Node.js的網(wǎng)絡(luò)框架，為構(gòu)建Web應(yīng)用程序提供了一組強(qiáng)大的功能。如果您想了解更多信息，請(qǐng)查看我們從Express教程開始的入門。

  首先，讓我們創(chuàng)建一個(gè)新項(xiàng)目并安裝Express：>

  下一步在Pug-Express文件夾中創(chuàng)建一個(gè)app.js文件：>

  然后添加以下內(nèi)容：

  >在這里，我們宣布一條路線（/），該路線將響應(yīng)帶有文本“ Hello，World！”的Get請(qǐng)求。我們可以通過node app.js啟動(dòng)服務(wù)器，然后訪問http：// localhost：3000。

  如果您看到這樣的東西，那么事情就已經(jīng)計(jì)劃了：

  >

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  添加一些數(shù)據(jù)

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  這個(gè)Express App不會(huì)做任何壯觀的事情。我們將構(gòu)建一個(gè)簡(jiǎn)單的員工目錄，該目錄從數(shù)據(jù)庫(kù)中獲取員工列表，并將其顯示在表格中。為此，我們需要一個(gè)數(shù)據(jù)庫(kù)和一些數(shù)據(jù)。

  > 但是，對(duì)于這個(gè)小示例，安裝和配置數(shù)據(jù)庫(kù)的安裝和配置有點(diǎn)沉重，因此我將使用一個(gè)稱為JSON服務(wù)器的軟件包。這將使我們能夠創(chuàng)建一個(gè)db.json文件，它將變成一個(gè)REST API，我們可以對(duì)此進(jìn)行CRUD操作。

  pug <span>-w . -o ./html -P
  </span>

  >讓我們安裝它：

  現(xiàn)在在項(xiàng)目的根部創(chuàng)建上述db.json文件：

  最后，我們需要一些JSON來填充它。我們將使用隨機(jī)用戶生成器，該生成器是一個(gè)免費(fèi)的開源API，用于生成隨機(jī)用戶數(shù)據(jù)。 25個(gè)人應(yīng)該為我們的示例做，因此請(qǐng)轉(zhuǎn)到https://randomuser.me/api/?Results=25，然后將結(jié)果復(fù)制到db.json。>

  >最后，在第二個(gè)終端窗口中啟動(dòng)服務(wù)器：

  <span>npm i -g pug-cli
  </span>

  這將導(dǎo)致JSON服務(wù)器在端口3001上啟動(dòng)并觀看我們的數(shù)據(jù)庫(kù)文件以進(jìn)行更改。

  >將哈巴狗設(shè)置為模板引擎

  Express對(duì)使用PUG有很好的支持，因此幾乎不需要配置。>

  首先，讓我們?cè)谖覀兊捻?xiàng)目中添加哈巴狗：

  然后，在app.js中，我們需要告訴Express使用pug：

  接下來，創(chuàng)建一個(gè)視圖目錄，然后在“視圖目錄”中添加index.pug文件：

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  >在該文件中添加一些內(nèi)容：

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  然后像這樣更改app.js：

  pug <span>-w . -o ./html -P
  </span>

  最后，重新啟動(dòng)節(jié)點(diǎn)服務(wù)器，然后刷新您的瀏覽器，您應(yīng)該看到以下內(nèi)容：>

  watching index.pug
  rendered /home/jim/Desktop/pug-examples/html/index.html
  

  <span>doctype html
  </span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
  </span> <span>head
  </span>   <span>title Hello, World!
  </span> <span>body
  </span>   <span>h1 Hello, World!
  </span>   <span>div<span>.remark</span>
  </span>     <span>p Pug rocks!
  </span>

  就是這樣。你很好。

  >

  構(gòu)建員工目錄

  >列表上的下一個(gè)任務(wù)是將一些數(shù)據(jù)交給哈巴狗模板以顯示。為此，我們需要一種從JSON服務(wù)器中獲取數(shù)據(jù)的方法。不幸的是，fetch API不是在節(jié)點(diǎn)中實(shí)現(xiàn)的，所以讓我們使用流行的HTTP客戶端Axios：>

  然后像這樣更改app.js：

  >這里有幾件事。我們已經(jīng)將路由處理程序變成了異步功能，因此我們可以等待員工數(shù)據(jù)從JSON服務(wù)器返回，然后再將其移交給模板。

  > 然后，我們像以前一樣渲染索引，但是這次我們將其傳遞給包含所有數(shù)據(jù)的字面物體。

  >

  <span><span><!DOCTYPE html></span>
  </span><span><span><span><html</span> lang<span>="en"</span>></span>
  </span>  <span><span><span><head</span>></span>
  </span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
  </span>  <span><span><span></head</span>></span>
  </span>  <span><span><span><body</span>></span>
  </span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
  </span>    <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></body</span>></span>
  </span><span><span><span></html</span>></span>
  </span>

  注意：每次更改app.js時(shí)，您都必須重新啟動(dòng)節(jié)點(diǎn)服務(wù)器。如果這開始變得煩人，請(qǐng)查看Nodemon，這將為您做。

  現(xiàn)在是哈巴狗。更改index.pug看起來如下：

  <span>div<span>.remark</span>
  </span>  <span>p Pug rocks!!
  </span>

  >希望這里發(fā)生并不奇怪。我們正在使用Smantic-UI-CSS進(jìn)行某種樣式，以及我們自己的幾種樣式。 然后，在桌子主體中，我們正在迭代我們從app.js傳遞的一系列員工，然后將其詳細(xì)信息輸出到表中。

  頁(yè)面底部的

  是我們版權(quán)要求和當(dāng)年的頁(yè)腳。

  如果您現(xiàn)在刷新頁(yè)面，則應(yīng)該看到此信息：

  >

  模板繼承

  <span><span><span><div</span> class<span>="remark"</span>></span>
  </span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
  </span><span><span><span></div</span>></span>
  </span>

  >這已經(jīng)很不錯(cuò)了，但是要解決問題，我將演示如何隨著項(xiàng)目的增長(zhǎng)而提供最大的靈活性。

  。

  >讓我們從“ views”目錄中創(chuàng)建一個(gè)layout.pug文件開始

  然后添加以下內(nèi)容：

  我們?cè)谶@里完成的是創(chuàng)建一個(gè)布局文件，而不是通過項(xiàng)目中的其他哈巴狗文件擴(kuò)展。當(dāng)您有大量的哈巴狗文件時(shí)，這會(huì)節(jié)省大量的代碼。

  >

  >這種工作的方法是，我們定義了孩子模板可以替換的兩個(gè)內(nèi)容（塊內(nèi)容和塊塊）。對(duì)于頁(yè)腳塊，我們還定義了一些后備內(nèi)容，如果兒童模板不重新定義此塊，這些內(nèi)容將呈現(xiàn)。

  >

  >現(xiàn)在我們可以告訴我們的index.pug文件以從我們的布局繼承：

  >

  <span>npm i -g pug-cli
  </span>

  結(jié)果與我們以前相同，但是代碼現(xiàn)在具有更好的結(jié)構(gòu)。

  > Mixins

  > Mixins允許您創(chuàng)建可重復(fù)使用的哈巴狗塊。我們可以使用它將表行提取到自己的文件中。

  >

  >在“視圖文件夾”中創(chuàng)建一個(gè)稱為Mixins的文件夾，在該文件夾中創(chuàng)建一個(gè)名為_tablerow.pug的文件：

  使用Mixin關(guān)鍵字聲明

  $ pug <span>--version
  </span>pug version: <span>2.0.3
  </span>pug-cli version: <span>1.0.0-alpha6
  </span>

  > Mixins。它們被匯編為功能，可以進(jìn)行論證。將以下內(nèi)容添加到視圖/mixins/_tablerow.pug：

  >

  <span>mkdir -p pug-examples/html
  </span><span>cd pug-examples
  </span><span>touch index.pug
  </span>

  現(xiàn)在更改index.pug so：

  如您所見，我們正在將Mixin導(dǎo)入文件頂部。然后，我們通過將其名稱與加號(hào)符號(hào)前綴并傳遞給我們的員工對(duì)象以顯示。>

  pug <span>-w . -o ./html -P
  </span>

  這對(duì)于我們的小應(yīng)用程序來說是過度的，但是它演示了PUG的一個(gè)非常有用的功能，該功能使我們能夠編寫可重復(fù)使用的代碼。

  結(jié)論

  如果您做得這么遠(yuǎn)，就做得很好！我們?cè)诒窘坛讨泻w了很多基礎(chǔ)。我們研究了安裝PUG，其基本語法，其JavaScript支持以及迭代和有條件渲染的構(gòu)造。最后，我們構(gòu)建了一個(gè)功能齊全的Express App，該應(yīng)用程序從遠(yuǎn)程源中汲取數(shù)據(jù)并將其饋送到哈巴狗模板中。

  。

  > pug還有很多事情可以做。我鼓勵(lì)您查看其出色的文檔，并開始在項(xiàng)目中使用它。您也可以將其與幾個(gè)現(xiàn)代JS框架（例如React或Vue）一起使用，甚至已將其移植到其他幾種語言中。

  如果您正在尋找挑戰(zhàn)，為什么不嘗試擴(kuò)展員工目錄以添加缺失的CRUD功能。而且，如果您遇到語法，請(qǐng)不要忘記幫助總是在手頭上。

  >

  關(guān)于哈停html模板預(yù)處理器的常見問題

  以下是一些關(guān)于哈巴狗的常見問題。

  什么是PUG HTML模板預(yù)處理器？它通過提供更簡(jiǎn)潔和表現(xiàn)力的語法來簡(jiǎn)化和增強(qiáng)編寫HTML的過程。

  為什么使用pug代替HTML？

  pug提供了與傳統(tǒng)HTML相比的更緊湊，更可讀的語法。它允許基于凹痕的結(jié)構(gòu)化，這通常會(huì)導(dǎo)致更清潔，更有條理的代碼。哈巴狗還支持變量，混合素，并包括使模板創(chuàng)建更有效。

  >

  使用PUG是否有任何限制或缺點(diǎn)？

  > PUG提供了許多優(yōu)勢(shì)，但其主要限制是如果您習(xí)慣了傳統(tǒng)的HTML，則學(xué)習(xí)曲線。此外，在團(tuán)隊(duì)中，并非每個(gè)人都熟悉PUG可能需要進(jìn)行一些調(diào)整。

  >我可以將pug與諸如react或angular之類的前端框架中使用嗎？

  > PUG主要是為生成HTML而設(shè)計(jì)的，但可以與各種前端框架一起使用，例如React，Angular或Vue.js。但是，使用這些框架使用哈巴狗可能需要其他配置和工具。

  >我可以在同一項(xiàng)目中將常規(guī)HTML與PUG混合嗎？

  是的，您可以輕松地將PUG模板與同一項(xiàng)目中的常規(guī)HTML文件一起集成。從一種格式過渡到另一種格式或使用不同方法與開發(fā)人員進(jìn)行合作時(shí)，這很有幫助。

  如何安裝和設(shè)置PUG？

  要使用哈巴狗，您需要安裝名為“ pug”的node.js軟件包。您可以在項(xiàng)目中在全球或本地安裝它。安裝后，您可以開始使用.PUG文件擴(kuò)展名創(chuàng)建PUG模板。

以上是帕格HTML模板引擎：初學(xué)者指南的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！