這次帶給大家node前端模板引擎Jade標籤使用詳解，node前端模板引擎Jade標籤使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
1、文件宣告
我們在開始寫一個html 頁面的時候，首先要寫上DOCTYPE 文檔宣告的，現(xiàn)在通常情況下我們都是採用HTML5 的文檔宣告方式，那麼在jade 裡面我們該怎麼寫呢？
在jade 裡面寫文件宣告有2種方式：
我們可以直接在jade 檔案裡面寫doctype html 即可
-
jade 為我們提供了一個簡單的寫法，(不過好像jade 在升級之後的新版本中不推薦使用此方法了-_-||| )
當然，jade 也預(yù)設(shè)支援其他類型的文件聲明，只需要使用doctype 跟上下面的選項即可。 jade 預(yù)設(shè)支援的有:
var?doctypes?=?exports.doctypes?=?{
?'5':?'<!DOCTYPE html>',
?'xml':?'<?xml version="1.0" encoding="utf-8" ?>',
?'default':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
?'transitional':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
?'strict':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
?'frameset':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
?'1.1':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
?'basic':?'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
?'mobile':?'<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};
doctype 對大小寫是不敏感的, 所以下面兩個是一樣的效果:
doctype?Default doctype?default
例如：如果我們要想寫XHTML 1.0 Strict 文件聲明，則可以這樣寫：
doctype?strict
編譯結(jié)果如下：
複製程式碼 程式碼如下:
#2、標籤
jade 中的標籤的寫法非常的簡單，就是一個字。
doctype?html html ?head ?title ?body
以上程式碼會被編譯成:
<!DOCTYPE html> <html> ?<head> ?<title></title> ?</head> ?<body></body> </html>
jade 是以嚴格的縮進來區(qū)分標籤的開始和結(jié)束的，預(yù)設(shè)為2個空格表示縮排。
如果我們要寫一個標籤並且?guī)в袃?nèi)容，比如說要寫一個標題，我們只需要在標籤單字後面加一個空格，然後跟上內(nèi)容即可。
h1?this?is?a?title. p?this?is?a?paragraph.
編譯結(jié)果為：
?
this is a title.
?this is a paragraph.
有的時候，我們會需要輸出一些特殊排版格式的文字或是為了提高程式碼的閱讀性，需要顯示出如下的效果：
< ;p>
? 1. 001
? 2. 002
? 3. 003
? 4. 004
那麼我們在jade 中應(yīng)該怎麼寫呢，這裡jade 給我們提供了兩種方式，第一種是在每一行前面加上一個| 和空格：
p ?|?1.?001 ?|?2.?002 ?|?3.?003 ?|?4.?004
第二種方法是：在標籤名後面緊跟一個.號。則此標籤下面的內(nèi)容會被 jade 解析為一個程式碼片段：
p. ?1.?001 ?2.?002 ?3.?003 ?4.?004
這下有的同學(xué)就傻傻分不清了，這兩種方式到底有什麼差別呢？這裡我們就不得不說到標籤混排，如果我們有這樣一個需求，在上面的程式碼中 1 的後面需要加上一個 strong 標籤。
首先我們說第一種情況下，我們的寫法：
p ?|?1.?001 ?strong?aaa ?|?2.?002 ?|?3.?003 ?|?4.?004
如果是第二種寫法的話，我們就需要這樣寫：
p. ?1.?001 ?<strong>aaa</strong> ?2.?002 ?3.?003 ?4.?004
編譯結(jié)果如下：
? 1. 001
? aaa
? 2. 002
? 3. 003
? 4. 004
3、標籤的屬性與屬性值
##h1 p 等等這些標籤，我們通常都會給他們寫上id & class屬性的，那麼這在jade 應(yīng)該怎麼寫呢？和zen coding 的語法一樣，我們只需要這樣寫：h1#id.class?this?is?a?title. p#j-text.text?this?is?a?paragraph.編譯結(jié)果為：
this is a title.
this is a paragraph.
等等，那我要是想添加多個 class 怎么辦呢？這樣辦：
h1#id.class1.class2.class3?this?is?a?title. p#j-text.text?this?is?a?paragraph.
編譯結(jié)果為：
this is a title.
this is a paragraph.
什么？寫 p 寫煩了？那就不寫咯。
#id.class #id.class1.class2?this?is?a?p?without?tags.
編譯結(jié)果為：
this is a p without tags.
這里要說明一下，在 jade 的語法里面，只有 p 標簽?zāi)軌蚴÷圆粚?
說完了 id 和 class，我們再來說一下標簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語法也和 zen coding 類似，我們需要在標簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進行分割。
比如上面的 id 和 class 的寫法我們就可以改寫成：
h1(id="id",?class="class")?this?is?a?title. p(id="j-text",?class="text")?this?is?a?paragraph.
結(jié)果是一樣的：
this is a title.
this is a paragraph.
說來說去還是這兩個屬性，煩了？那我們換一個吧：
a(herf="/index.html",?title="this?is?a?link.",?target="_blank",?data-uid="1000")?index.html
編譯結(jié)果為：
那么問題就來了，如果我們要寫一個單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：
input(type="checkbox",?name="all",?checked,?value="全選")
編譯結(jié)果為：
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
以上是node前端模板引擎Jade標籤使用詳解的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
nvm 怎麼刪除node
Dec 29, 2022 am 10:07 AM
nvm刪除node的方法：1、下載「nvm-setup.zip」並將其安裝在C碟；2、設(shè)定環(huán)境變量，並透過「nvm -v」指令查看版本號；3、使用「nvm install」指令安裝node；4、透過「nvm uninstall」指令刪除已安裝的node即可。
Pi Node教學(xué)：什麼是Pi節(jié)點？如何安裝和設(shè)定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork節(jié)點詳解及安裝指南本文將詳細介紹PiNetwork生態(tài)系統(tǒng)中的關(guān)鍵角色——Pi節(jié)點，並提供安裝和配置的完整步驟。 Pi節(jié)點在PiNetwork區(qū)塊鏈測試網(wǎng)推出後，成為眾多先鋒積極參與測試的重要環(huán)節(jié)，為即將到來的主網(wǎng)發(fā)布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創(chuàng)建一個人人可參與
node專案中如何使用express來處理檔案的上傳
Mar 28, 2023 pm 07:28 PM
怎麼處理文件上傳？以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳，希望對大家有幫助！
聊聊用pkg將Node.js專案打包為執(zhí)行檔的方法
Dec 02, 2022 pm 09:06 PM
如何用pkg打包nodejs可執(zhí)行檔？以下這篇文章跟大家介紹一下使用pkg將Node專案打包為執(zhí)行檔的方法，希望對大家有幫助！
深入淺析Node的進程管理工具'pm2”
Apr 03, 2023 pm 06:02 PM
這篇文章跟大家分享Node的進程管理工具“pm2”，聊聊為什麼需要pm2、安裝和使用pm2的方法，希望對大家有幫助！
npm node gyp失敗怎麼辦
Dec 29, 2022 pm 02:42 PM
npm node gyp失敗是因為“node-gyp.js”跟“Node.js”版本不匹配，其解決辦法：1、透過“npm cache clean -f”清除node快??；2、透過“npm install -g n”安裝n模組；3、透過「n v12.21.0」指令安裝「node v12.21.0」版本即可。
使用Angular和Node進行基於令牌的身份驗證
Sep 01, 2023 pm 02:01 PM
身份驗證是任何網(wǎng)路應(yīng)用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統(tǒng)以及它們與傳統(tǒng)登入系統(tǒng)的差異。在本教程結(jié)束時，您將看到一個用Angular和Node.js編寫的完整工作演示。傳統(tǒng)身份驗證系統(tǒng)在繼續(xù)基於令牌的身份驗證系統(tǒng)之前，讓我們先來看看傳統(tǒng)的身份驗證系統(tǒng)。使用者在登入表單中提供使用者名稱和密碼，然後點擊登入。發(fā)出請求後，透過查詢資料庫在後端驗證使用者。如果請求有效，則使用從資料庫中獲取的使用者資訊建立會話，然後在回應(yīng)頭中傳回會話訊息，以便將會話ID儲存在瀏覽器中。提供用於存取應(yīng)用程式中受
什麼是單一登入系統(tǒng)？用nodejs怎麼實作？
Feb 24, 2023 pm 07:33 PM
什麼是單一登入系統(tǒng)？用nodejs怎麼實作？以下這篇文章為大家介紹一下使用node實作單一登入系統(tǒng)的方法，希望對大家有幫助！
