亚洲va国产va天堂va久久,japanese在线播放

如何安裝和設置PUG？ <\/p>要使用哈巴狗，您需要安裝名為“ pug”的node.js軟件包。您可以在項目中在全球或本地安裝它。安裝後，您可以開始使用.PUG文件擴展名創(chuàng)建PUG模板。<\/antml><\/antml><\/ancy><\/ance><\/ancy><\/ancy><\/ance><\/ancy><\/ancy><\/ancy><\/ancy><\/antml><\/ancy>\n<\/div><\/ance>\n<\/h3><\/ancy><\/ancy><\/antml><\/codepen>\n<\/li><\/ancland>\n<\/ul>"}

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

基本語法demo

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

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

首頁

web前端

css教學

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

Lisa Kudrow

Feb 10, 2025 am 11:27 AM

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

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

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

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

鑰匙要點

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

安裝涉及設置節(jié)點，npm和pug-cli軟件包，並在編輯器中使用語法突出顯示，以易於開發(fā)。

pug使用一個簡化的語法，沒有關(guān)閉標籤，並且依賴於結(jié)構(gòu)HTML文檔的縮進，這可以大大減少書面代碼的數(shù)量。

>它支持用於動態(tài)模板的JavaScript集成，允許直接在哈巴狗文件中進行變量，迭代和條件。

>教程結(jié)束了在節(jié)點/Express項目中使用pug的實踐演示來創(chuàng)建員工目錄，展示了高級功能，例如模板繼承和可重複使用的代碼的混音。

什麼是PUG使用什麼？

>在我們開始看哈巴斯之前，讓我們一秒鐘來了解所涉及的概念。

>模板引擎是一個程序，負責將模板（可以使用多種語言中的任何一種編寫）編譯為HTML。模板引擎通常會從外部源接收數(shù)據(jù)，並將其註入其編譯的模板中。這是由以下圖進行了說明的。

學分：Dreftymac，Tempengweb016，CC BY-SA 3.0

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

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

一點歷史

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

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

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

>安裝哈巴狗

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

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

>

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

>在系統(tǒng)上安裝了節(jié)點和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窗格，並看到結(jié)果實時出現(xiàn)。 > 作為額外的獎勵，您可以單擊HTML窗格中的向下箭頭，然後選擇“>”視圖編譯的HTML

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

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

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

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

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

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

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

現(xiàn)在，讓我們從上面的屏幕截圖創(chuàng)建頁面（關(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)容。您應該看到以下內(nèi)容：

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

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

上面的代碼產(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

這會產(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>

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

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

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

> Doctype

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

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

>標籤

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

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

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

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

類，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>

這將導致以下結(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)容：

>處理大量文本時，您可以只是一個點。在標籤名稱之後或關(guān)閉括號之後，如果標籤具有屬性：

<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>

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

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

<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

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

>請參閱sitepoint（@sitepoint）
codepen。

在PUG HTML模板中使用JavaScript

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

>緩衝vs無封閉代碼

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

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

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

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

$ 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的每個關(guān)鍵字使得可以輕鬆迭代陣列：>

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

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

這將導致：

<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還允許您提供一個其他塊，如果數(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>

最後，請注意，您可以用作每個的別名。 >

條件

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

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

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

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

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

在pug demo中的javascript。

一個動手示例

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

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

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

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

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

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

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

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

$ 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>

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

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

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

>讓我們安裝它：

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

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

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

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

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

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

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

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

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

接下來，創(chuàng)建一個視圖目錄，然後在“視圖目錄”中添加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>

最後，重新啟動節(jié)點服務器，然後刷新您的瀏覽器，您應該看到以下內(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)建員工目錄

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

然後像這樣更改app.js：

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

> 然後，我們像以前一樣渲染索引，但是這次我們將其傳遞給包含所有數(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時，您都必須重新啟動節(jié)點服務器。如果這開始變得煩人，請查看Nodemon，這將為您做。

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

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

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

頁面底部的

是我們版權(quán)要求和當年的頁腳。

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

模板繼承

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

。

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

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

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

>這種工作的方法是，我們定義了孩子模板可以替換的兩個內(nèi)容（塊內(nèi)容和塊塊）。對於頁腳塊，我們還定義了一些後備內(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)建可重複使用的哈巴狗塊。我們可以使用它將表行提取到自己的文件中。

>在“視圖文件夾”中創(chuàng)建一個稱為Mixins的文件夾，在該文件夾中創(chuàng)建一個名為_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。它們被彙編為功能，可以進行論證。將以下內(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導入文件頂部。然後，我們通過將其名稱與加號符號前綴並傳遞給我們的員工對像以顯示。 >

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

這對於我們的小應用程序來說是過度的，但是它演示了PUG的一個非常有用的功能，該功能使我們能夠編寫可重複使用的代碼。

結(jié)論

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

。

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

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

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

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

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

為什麼使用pug代替HTML？

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

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

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

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

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

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

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

如何安裝和設置PUG？

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

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

本網(wǎng)站聲明

本文內(nèi)容由網(wǎng)友自願投稿，版權(quán)歸原作者所有。本站不承擔相應的法律責任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡admin@php.cn

熱AI工具

熱工具

基本語法demo<\/h3>\n
>您可以找到一個自舉風格的佈局的演示，該佈局演示了我們到目前為止討論的技術(shù)：<\/p>\n
>請參閱sitepoint（@sitepoint）
codepen。\n
<\/p>\n
在PUG HTML模板中使用JavaScript <\/p>\n

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<\/h3>\n
>我可以將pug與諸如react或angular之類的前端框架中使用嗎？ <\/p>> PUG主要是為生成HTML而設計的，但可以與各種前端框架一起使用，例如React，Angular或Vue.js。但是，使用這些框架使用哈巴狗可能需要其他配置和工具。

<\/h3>\n
>我可以在同一項目中將常規(guī)HTML與PUG混合嗎？ <\/p>是的，您可以輕鬆地將PUG模板與同一項目中的常規(guī)HTML文件一起集成。從一種格式過渡到另一種格式或使用不同方法與開發(fā)人員進行合作時，這很有幫助。

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

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

>

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

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

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

基本語法demo

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

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

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

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

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

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

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

基本語法demo<\/h3>\n>您可以找到一個自舉風格的佈局的演示，該佈局演示了我們到目前為止討論的技術(shù)：<\/p>\n>請參閱sitepoint（@sitepoint） codepen。\n<\/p>\n在PUG HTML模板中使用JavaScript <\/p>\n

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

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

>

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

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

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

基本語法demo

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

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

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

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

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

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

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

基本語法demo<\/h3>\n
>您可以找到一個自舉風格的佈局的演示，該佈局演示了我們到目前為止討論的技術(shù)：<\/p>\n
>請參閱sitepoint（@sitepoint）
codepen。\n
<\/p>\n
在PUG HTML模板中使用JavaScript <\/p>\n

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

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

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

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

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

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

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

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