搜尋

首頁 >web前端 >css教學 >帕格HTML模板引擎：初學者指南

帕格HTML模板引擎：初學者指南

Lisa Kudrow
Lisa Kudrow原創
2025-02-10 11:27:09995瀏覽

帕格HTML模板引擎：初學者指南

作為網頁設計師或開發人員，我們可能都必須寫出我們的HTML的公平份額。儘管這不是最艱鉅的任務，但通常會感到有些無聊或重複。這是PUG HTML預處理器進來的地方。

>

> html也是靜態的，這意味著，如果您要顯示動態數據（例如，從API獲取），您總是會在JavaScript內部得到HTML STINGS的Mishmash。這可能是一次噩夢，要進行調試和維護。 PUG是節點和瀏覽器的模板引擎。它將其編譯為HTML並具有簡化的語法，這可以使您更有生產力，並且代碼更可讀。 PUG使得編寫可重複使用的HTML以及從數據庫或API中獲取的數據很容易。

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

鑰匙要點

Pug，以前稱為Jade，是一種模板引擎，可編譯為HTML，可用於編寫清潔器，更可讀的代碼，尤其是在處理動態內容時。
    >它簡化了將動態數據集成到HTML中的集成，使其成為數據驅動的應用程序的絕佳選擇，儘管小型靜態站點不是必需的或最小的動態內容。
  • 安裝涉及設置節點，npm和pug-cli軟件包，並在編輯器中使用語法突出顯示，以易於開發。
    • > pug使用一個簡化的語法，沒有關閉標籤，並且依賴於結構HTML文檔的縮進，這可以大大減少書面代碼的數量。
  • >它支持用於動態模板的JavaScript集成，允許直接在哈巴狗文件中進行變量，迭代和條件。
  • >教程結束了在節點/Express項目中使用pug的實踐演示來創建員工目錄，展示了高級功能，例如模板繼承和可重複使用的代碼的混音。
  • 什麼是PUG使用什麼？
    • >
  • >在我們開始看哈巴斯之前，讓我們一秒鐘來了解所涉及的概念。
    • >模板引擎是一個程序，負責將模板（可以使用多種語言中的任何一種編寫）編譯為HTML。模板引擎通常會從外部源接收數據，並將其註入其編譯的模板中。這是由以下圖進行了說明的。
  • >帕格HTML模板引擎：初學者指南 學分：Dreftymac，Tempengweb016，CC BY-SA 3.0

    這種方法使您可以重複使用靜態網頁元素，同時根據數據定義動態元素。它還有助於分開關注點，使您的應用程序邏輯與顯示邏輯隔離。 如果您的網站或Web應用程序是數據驅動的，那麼您更有可能從模板引擎中受益- 例如用於管理員工的員工目錄，列出了各種產品供用戶購買的網站或具有動態性的網站搜索功能。

    >如果您從API獲取少量數據（在這種情況下，您只需使用JavaScript的本機模板字符串），或者如果您正在製作小型靜態站點。

    一點歷史

    >還值得注意的是，由於2015年的商標索賠，Pug曾經被稱為Jade，直到被迫更名。

    >在線仍有很多與Jade相關的材料。儘管其中一些可能仍然非常有效，但名稱更改與主要版本凹痕相吻合的事實意味著，與其前任相比，Pug的語法具有幾種差異，棄用和刪除。這些已記錄在這裡。

    如果您有興趣了解更多信息，則可以閱讀本Github問題中的原始名稱更改公告。否則，只需確保將“模板”一詞添加到與PUG相關的Google搜索中，以避免結果充滿狗。

    >安裝哈巴狗

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

    >安裝節點/npm有幾個選項。要么轉到項目主頁，然後下載適合您的系統的正確二進製文件，或使用NVM等版本管理器。我建議在可能的情況下使用版本管理器，因為這將使您可以安裝不同的節點版本並隨意之間切換。它還將否定一堆潛在的權限錯誤。

    >

    >您可以查看我們的教程“使用NVM安裝多個版本的node.js”以獲取更深入的指南。

    >在系統上安裝了節點和npm後，您可以像這樣安裝PUG-CLI軟件包：

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

    >

    在撰寫本文時，如下所示：

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

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

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

    $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
    >我目前正在使用Sublime Text 3，並且在開箱即用，這就是.pug文件的外觀：

    帕格HTML模板引擎：初學者指南

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

    帕格HTML模板引擎：初學者指南

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

    >嘗試pug html而不安裝

    如果您想遵循本教程中的簡單示例，則還可以在各種在線代碼遊樂場中運行它們。

    例如，Codepen >>>

    html ，然後選擇pug作為預處理器。這將使您可以將哈巴索代碼輸入HTML窗格，並看到結果實時出現。 > 作為額外的獎勵，您可以單擊HTML窗格中的向下箭頭，然後選擇“>”視圖編譯的HTML

    查看Pug已生成的標記。 >現在我們已經安裝了哈巴狗，讓我們嘗試一下。創建一個名為Pug-expamples的新目錄，然後更改為其。然後創建一個名為HTML的目錄和一個稱為index.pug的文件：> >

    注意：Touch命令是Linux/MacOS特定的。 Windows用戶會迴聲。

    >工作的工作方式是，我們將在index.pug中編寫PUG代碼，並讓Pug-Cli觀看此文件以進行更改。當它檢測到任何內容時，它將採用index.pug的內容，並將其作為HTML目錄中的HTML渲染。

    >

    開始這件事，打開Pug-examples目錄中的終端，然後輸入以下內容：> 
    <span>npm i -g pug-cli
</span>

    您應該看到類似以下內容：

    >

    注意：在上面的命令中，-w選項代表觀看，點告訴Pug，請注意當前目錄中的所有內容，-o ./html告訴PUG在HTML目錄中輸出其HTML， - p選項會使輸出。

    >

    現在，讓我們從上面的屏幕截圖創建頁面（關於缺乏語法突出顯示的內容）。將以下內容輸入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的內容。您應該看到以下內容：
    <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>

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

    上面的代碼產生以下內容：
    pug <span>-w . -o ./html -P
</span>
    >

    現在採用此代碼：
    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>
    >您使用哪種凹痕（如果需要的話，甚至可以使用選項卡）並不重要，但是強烈建議您保持凹痕層面的水平一致。在本文中，我將使用兩個空間。

    >其次，哈巴狗沒有任何關閉標籤。顯然，這將為您節省一些鍵盤，並為帕格提供乾淨，易於閱讀的語法。

    >現在我們已經有了一些基本的哈巴狗的處理方法，讓我們快速瀏覽其語法。如果其中任何一個似乎令人困惑，或者您想更深入地走，請務必諮詢該項目的出色文檔。

    > Doctype

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

    例如，Doctype HTML將編譯為，標準HTML5 Doctype，而Doctype嚴格會給我們。哈巴狗將盡最大努力確保其輸出對文檔類型有效。

    >

    >標籤

    如前所述，哈巴狗沒有任何關閉標籤，並且依賴於嵌套的凹痕。這可能需要少量習慣，但是一旦這樣做，它就會制定乾淨可讀的代碼。以示例為例：

    上面的代碼對此進行了編譯：

    > 

    <span>npm i -g pug-cli
</span>
    請注意，Pug足夠聰明，可以關閉我們的任何自關閉標籤（例如元素）。

    >

    類，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還為我們提供了方便的快捷方式。如果未指定標籤，它將假定
    元素：>

    這兩個都編譯為：
    <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>

    >使用括號添加屬性：
    pug <span>-w . -o ./html -P
</span>

    這將導致以下結果：
    watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

    >關於屬性還有很多要說的。例如，您可以使用JavaScript將變量包含在您的屬性中，也可以將值數組分配給屬性。我們將繼續在下一節中使用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中的方法。

    >我們已經看到瞭如何添加純文本內聯：
    <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>

    這將導致：

    <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>
    >最後，可以添加評論：

    <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>
    此評論將添加到渲染的HTML： 您開始評論這樣的評論：
    <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>

    執行此操作時，該評論將保留在PUG文件中，但不會出現在html中。

    >評論必須出現在自己的行上。在這裡，該評論將被視為純文本：
    <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

    >您可以找到一個自舉風格的佈局的演示，該佈局演示了我們到目前為止討論的技術：

    >請參閱sitepoint（@sitepoint）
    codepen。

    在PUG HTML模板中使用JavaScript

    >關於哈巴狗的偉大事物之一是能夠在模板中運行JavaScript。這很容易將變量插入我們的模板，迭代陣列和對象，有條件地呈現HTML等等。

    >緩衝vs無封閉代碼

    >這是在使用JavaScript中使用JavaScript之前要注意的一個重要區別。

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

    另一方面，緩衝代碼始於等效（=）。它評估JavaScript表達式並輸出結果。

    >

    上面的代碼對此進行了編譯：

    > 
    $ 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>
    上面的代碼對此進行了編譯：

    > 

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

    >字符串插值是在具有相應值的模板中替換一個或多個佔位符的過程。正如我們剛剛看到的那樣，緩衝輸入提供了一種這樣做的方法。另一個正在使用＃{}。在這裡，PUG將評估捲曲括號之間的任何代碼，逃脫它並將其渲染到模板中。 
    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>
    >

    因為捲曲括號可以包含任何有效的JavaScript表達式，因此打開了一堆可能性：

    <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值渲染到模板中。但這不是最好的主意，如果輸入來自不受信任的來源。 >

    >

    注意：當要為元素屬性中的變量中持有的值分配時，您可以省略＃{}。例如：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的每個關鍵字使得可以輕鬆迭代陣列：>

    這將導致以下結果：

    您也可以將其用於迭代對像中的鍵：>

    這將導致：

    <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還允許您提供一個其他塊，如果數組或對象為空，將執行該塊：

    > 

    <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>
    最後，請注意，您可以用作每個的別名。 >

    條件

    根據JavaScript表達式的結果，有條件提供了一種非常方便的呈現不同HTML的方法
    <span>npm i -g pug-cli
</span>

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

    > javaScript在哈巴狗演示中 在下面，您可以找到我們本節中討論的一些技術的演示。這比以前的演示更大的好處展示了帕格的好處，因為我們要添加更多員工所需要做的就是在我們的SitePointEmploines Employees Array中添加更多對象。 >

    >請參閱codepen上的sitepoint（@sitepoint）

    在pug demo中的javascript。

    一個動手示例

    >現在，我們對Pug的語法及其運作方式有一個合理的想法，讓我們通過構建一個小型Express.js應用程序來結束，以演示一些Pug的更高級功能。

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

    >

    >

    注意：如果您以前沒有使用過Express，則不用擔心。它是Node.js的網絡框架，為構建Web應用程序提供了一組強大的功能。如果您想了解更多信息，請查看我們從Express教程開始的入門。

    首先，讓我們創建一個新項目並安裝Express：>

    下一步在Pug-Express文件夾中創建一個app.js文件：>

    然後添加以下內容：

    >在這裡，我們宣布一條路線（/），該路線將響應帶有文本“ Hello，World！”的Get請求。我們可以通過node app.js啟動服務器，然後訪問http：// localhost：3000。

    如果您看到這樣的東西，那麼事情就已經計劃了：

    > 

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

    添加一些數據
    <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>

    這個Express App不會做任何壯觀的事情。我們將構建一個簡單的員工目錄，該目錄從數據庫中獲取員工列表，並將其顯示在表格中。為此，我們需要一個數據庫和一些數據。

    > 但是，對於這個小示例，安裝和配置數據庫的安裝和配置有點沉重，因此我將使用一個稱為JSON服務器的軟件包。這將使我們能夠創建一個db.json文件，它將變成一個REST API，我們可以對此進行CRUD操作。 
    pug <span>-w . -o ./html -P
</span>
    >讓我們安裝它：

    現在在項目的根部創建上述db.json文件：

    最後，我們需要一些JSON來填充它。我們將使用隨機用戶生成器，該生成器是一個免費的開源API，用於生成隨機用戶數據。 25個人應該為我們的示例做，因此請轉到https://randomuser.me/api/?Results=25，然後將結果復製到db.json。 帕格HTML模板引擎：初學者指南>

    >最後，在第二個終端窗口中啟動服務器：

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

    這將導致JSON服務器在端口3001上啟動並觀看我們的數據庫文件以進行更改。

    >將哈巴狗設置為模板引擎

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

    首先，讓我們在我們的項目中添加哈巴狗：

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

    接下來，創建一個視圖目錄，然後在“視圖目錄”中添加index.pug文件：
    $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>

    >在該文件中添加一些內容：
    <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>

    最後，重新啟動節點服務器，然後刷新您的瀏覽器，您應該看到以下內容：> 
    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>
    就是這樣。你很好。

    >

    構建員工目錄

    帕格HTML模板引擎：初學者指南>列表上的下一個任務是將一些數據交給哈巴狗模板以顯示。為此，我們需要一種從JSON服務器中獲取數據的方法。不幸的是，fetch API不是在節點中實現的，所以讓我們使用流行的HTTP客戶端Axios：>

    然後像這樣更改app.js：

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

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

    >
    <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時，您都必須重新啟動節點服務器。如果這開始變得煩人，請查看Nodemon，這將為您做。

    現在是哈巴狗。更改index.pug看起來如下：

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

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

    頁面底部的

    是我們版權要求和當年的頁腳。

    如果您現在刷新頁面，則應該看到此信息：

    >

    模板繼承

    <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>
    >這已經很不錯了，但是要解決問題，我將演示如何隨著項目的增長而提供最大的靈活性。

    。

    >讓我們從“ views”目錄中創建一個layout.pug文件開始

    然後添加以下內容：

    我們在這裡完成的是創建一個佈局文件，而不是通過項目中的其他哈巴狗文件擴展。當您有大量的哈巴狗文件時，這會節省大量的代碼。

    >

    >這種工作的方法是，我們定義了孩子模板可以替換的兩個內容（塊內容和塊塊）。對於頁腳塊，我們還定義了一些後備內容，如果兒童模板不重新定義此塊，這些內容將呈現。

    >

    >現在我們可以告訴我們的index.pug文件以從我們的佈局繼承：

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

    結果與我們以前相同，但是代碼現在具有更好的結構。

    > Mixins

    > Mixins允許您創建可重複使用的哈巴狗塊。我們可以使用它將表行提取到自己的文件中。

    >

    >在“視圖文件夾”中創建一個稱為Mixins的文件夾，在該文件夾中創建一個名為_tablerow.pug的文件：

    使用Mixin關鍵字聲明
    $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
    > Mixins。它們被彙編為功能，可以進行論證。將以下內容添加到視圖/mixins/_tablerow.pug：

    > 

    <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
    現在更改index.pug so：

    如您所見，我們正在將Mixin導入文件頂部。然後，我們通過將其名稱與加號符號前綴並傳遞給我們的員工對像以顯示。 > 
    pug <span>-w . -o ./html -P
</span>
    這對於我們的小應用程序來說是過度的，但是它演示了PUG的一個非常有用的功能，該功能使我們能夠編寫可重複使用的代碼。

    結論

    如果您做得這麼遠，就做得很好！我們在本教程中涵蓋了很多基礎。我們研究了安裝PUG，其基本語法，其JavaScript支持以及迭代和有條件渲染的構造。最後，我們構建了一個功能齊全的Express App，該應用程序從遠程源中汲取數據並將其饋送到哈巴狗模板中。

    。

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

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

    >

    關於哈停html模板預處理器的常見問題

    以下是一些關於哈巴狗的常見問題。

    什麼是PUG HTML模板預處理器？它通過提供更簡潔和表現力的語法來簡化和增強編寫HTML的過程。

    為什麼使用pug代替HTML？

    pug提供了與傳統HTML相比的更緊湊，更可讀的語法。它允許基於凹痕的結構化，這通常會導致更清潔，更有條理的代碼。哈巴狗還支持變量，混合素，並包括使模板創建更有效。

    >

    使用PUG是否有任何限製或缺點？

    > PUG提供了許多優勢，但其主要限制是如果您習慣了傳統的HTML，則學習曲線。此外，在團隊中，並非每個人都熟悉PUG可能需要進行一些調整。

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

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

    >我可以在同一項目中將常規HTML與PUG混合嗎？

    是的，您可以輕鬆地將PUG模板與同一項目中的常規HTML文件一起集成。從一種格式過渡到另一種格式或使用不同方法與開發人員進行合作時，這很有幫助。

    如何安裝和設置PUG？

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

以上是帕格HTML模板引擎：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript json html5 css bootstrap html npm angular xhtml express echo Static String Array Object if switch for while select format include require try Directory using public Length finally Conditional Attribute Property copy JS number symbol function this history display input table tr github windows macos idea sublime text database http https linux ui issue everything word axios Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：前端開發人員的30個救生工具下一篇：前端開發人員的30個救生工具

相關文章

看更多