使用玉和咕unt彈加快HTML生產
將彙編為：
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span> </span> <span><span><span><img</span> src<span>="images/image.png"</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
使用Jade，您不必編寫關閉標籤，這有助於避免潛在的錯誤，例如忘記添加關閉標籤或失去其正確順序。線路開頭的任何文本都被解釋為標籤。您需要為每個標籤使用適當的凹痕。
>注意：如果省略了標籤名稱，則將創建DIV作為默認標籤。
>
使用管道字符（|）>有時我們需要在新行上寫下標籤的原始內容，但是，正如我前面提到的，在行開頭的任何文本都被視為標籤
。為避免這種情況，請使用管道或|字符在線路的開頭，並在新行上寫入標籤的內部文本。
在上一節中，我對玉的語法進行了快速概述。在以下各節中，我們將介紹一些其他常見和強大的玉器功能，以及一些更高級的玉。我們將通過簡單的“工作空缺頁面”示例來做到這一點。您可以在源代碼文件中的每種情況或此github存儲庫中找到每個情況的完整示例。讓我們開始！
塊並擴展（玉繼承）
>
>稱為layout.jade的文件將是我們頁面佈局的基本結構，這是一種干燥的概念，因為您無需為每個頁面編寫這些標籤。相反，您需要擴展佈局並開始編寫塊內容特定的代碼，如我們所見。>
>注意：刪除了CSS和JavaScript代碼以進行簡潔和焦點。您可以在存儲庫中找到這些。另外，我已經使用了複製grunt任務將JS和样式目錄從應用程序目錄傳輸到構建目錄。這是layout.jade file：
>>您可以根據需要創建腳步和jade。對於我們的頁面，我們將使用Foundation和jQuery來幫助我們建立一些基本的設計和功能。
>
這是partials/head.jade文件：
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade<span><span><!DOCTYPE html></span> </span><span><span><span><html</span>></span> </span> <span><span><span><head</span>></span> </span> <span><span><span><title</span>></span> Jade Tutorial <span><span></title</span>></span> </span> <span><span><span></head</span>></span> </span> <span><span><span><body</span>></span> </span> <span><span><span><p</span> class<span>="className"</span> id<span>="idName"</span>></span> Hello SitePoint Readers! <span><span></p</span>></span> </span> <span><span><span><img</span> src<span>="images/image.png"</span>></span> </span> <span><span><span></body</span>></span> </span><span><span><span></html</span>></span></span>
>
jobs.jade：
doctype html
html(lang="en" dir="ltr")
block head
include partials/head.jade
body
block content
block footer
include partials/footer.jade
head meta(name="viewport", content="width=device-width, initial-scale=1.0") meta(charset="UTF-8") title Jobs link(rel = "stylesheet" href = "style/foundation.min.css") link(rel = "stylesheet" href = "style/app.css")
在上一節中，我們包括Job-Container.jade。在本節中，我們將研究循環和混合物的好處，以及如何在Jade中使用它們。
這是新代碼段的初始版本：如您所見，我們正在使用多個普通循環語句，例如第一行中的一個 - 作業中的每個作業。 - 字符用於未直接添加任何輸出的無封閉代碼。
>
在以前的代碼段中，有冗餘代碼可以使用Mixins變乾，如以下代碼：div#footer.row
div.small-12.large-12.columns
p Copyright (c) foobar
script(src="js/jquery.min.js")
script(src="js/foundation.min.js")
script(src="js/app.js")>在這裡，我們使用Mixin功能創建了可重複使用的Jade塊。混合素就像具有名稱並在其內部代碼中評估的參數的方法（或函數）。在上面的示例中，我們創建了一個稱為SkillsBlock（）的Mixin。
>要使用此Mixin，我們只編寫其名稱並傳遞適當的參數值，並將Mixin名稱和符號前綴以將其識別為Mixin Call。>注意：與上述代碼一樣，我們可以通過=，！ =或＃{}來評估值。但是，當您使用！ =時，請小心，這不會逃脫，因此對於用戶輸入不安全。
extends layout.jade
block content
div#container.row
div.small-12.large-12.columns
include job-container.jade傳遞JSON數據
建立我們的環境後，讓我們通過使用grunt任務將JSON數據從JSON文件傳遞到Jade的JOSON數據來做一些很棒的事情。>首先，創建JSON文件data.json，然後用所需的數據填充它。
>作業數據/當地人（傳遞給Jade模板的數據稱為當地人）屬性將傳遞給文件屬性中標識的JADE文件，並且可以在Jade代碼中使用。這種方式使您能夠輕鬆地將文本內容添加到網頁中。
>>最後，如果您查看演示，您可以看到頁面的外觀。當然，該來源是編譯的，因此在這種情況下，演示並不重要。屏幕截圖如下所示。
總結
使用模板引擎的理由可能會有所不同，但可以將它們歸類為更高的生產力，更少的重複和具有更愉快的語法。另外，您可能不想用母語編寫代碼，因為它過於重複，容易出錯，或者您根本不喜歡它。這是像Jade這樣的語言，調整了您的代碼簡潔而簡單，開始發揮作用。Jade可以幫助您編寫清潔器代碼，這使您的工作變得不那麼乏味。我們使用Grunt涵蓋了一些基本知識，技巧和技巧。您可以在本教程中了解更多有關Jade的信息，因此您可以查看官方文檔以獲取更多信息。
>>常見問題（常見問題解答）關於使用Jade和Grunt加快HTML生產
什麼是翡翠，為什麼我應該將其用於HTML生產？它通過允許您編寫易於維護的干淨，可讀的代碼來簡化編寫HTML的過程。它還支持動態代碼，可重複使用的塊和包含，它們可以顯著加快HTML生產的速度。
>如何在加速HTML生產時如何補充Jade？
grunt是JavaScript任務跑步者自動化重複的任務，例如縮小，編譯，單位測試和覆蓋。當與翡翠一起使用時，可以將翡翠模板編譯到HTML中的過程中，從長遠來看可以節省大量的時間和精力。
>我如何安裝Jade and Grunt？ >可以通過NPM（節點軟件包管理器）安裝Jade和Grunt。您可以通過在終端或命令提示符中安裝'npm安裝grunt -cli -g'來安裝'jade和grunt。
有幾種可以將HTML轉換為Jade的在線工具，例如html2jade.org和codebeautify.org。但是，如果要以編程方式將HTML轉換為Jade，則可以使用“ HTML2Jade” NPM軟件包。>
>使用HTML用於Jade Conversion的在線工具有什麼好處？對於HTML到Jade轉換，易於使用，不需要任何安裝。他們可以快速將您的HTML代碼轉換為Jade語法，如果您是Jade的新手，或者如果您有大量需要轉換的HTML代碼，這可能會非常有幫助。>
>我如何使用' HTML2JADE'NPM軟件包，用於HTML到Jade轉換？ >>通過NPM安裝'HTML2Jade'軟件包後，您可以使用它來轉換通過在終端或命令提示符中運行“ html2jade yourfile.html”，通過運行“ html2jade yourfile.html ”到Jade。這將輸出相當於您的HTML代碼的JADE。>我可以將Jade與其他任務跑步者一起使用，例如Gulp？
是的，可以與Gulp這樣的其他任務跑步者使用Jade。有一些可用於大口的插件可以將玉模板編譯為HTML，類似於Grunt。使用“ Include”關鍵字，然後使用文件的路徑。這對於在多個模板中包括標頭和頁腳等常見元素非常有用。
>我可以在我的玉模板中使用javascript嗎？您可以使用' - '字符在玉模板中啟動JavaScript代碼線。
>>如何在玉模板中調試錯誤？
以上是使用玉和咕unt彈加快HTML生產的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用HTML，CSS和JavaScript創建動畫倒計時計時器
Apr 11, 2025 am 11:29 AM
您是否曾經在項目上需要一個倒計時計時器？對於這樣的東西，可以自然訪問插件，但實際上更多
如何通過CSS選擇第一個類名為item的子元素？
Apr 05, 2025 pm 11:24 PM
在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時，常常會遇到元素個數不�...
為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？
Apr 05, 2025 pm 05:51 PM
關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...
我們如何創建一個在SVG中生成格子呢模式的靜態站點
Apr 09, 2025 am 11:29 AM
格子呢是一塊圖案布，通常與蘇格蘭有關，尤其是他們時尚的蘇格蘭語。在Tartanify.com上，我們收集了5,000多個格子呢
