怎樣使用node前端模板引擎Jade標籤
這次帶給大家怎麼使用node前端模板引擎Jade標籤，使用node前端模板引擎Jade標籤的注意事項有哪些，下面就是實戰案例，一起來看一下。
1、文件宣告
我們在開始寫一個html 頁面的時候，首先要寫上DOCTYPE 文檔宣告的，現在通常情況下我們都是採用HTML5 的文檔宣告方式，那麼在jade 裡面我們該怎麼寫呢？
在jade 裡面寫文件宣告有2種方式：
我們可以直接在jade 檔案裡面寫doctype html 即可
-
jade 為我們提供了一個簡單的寫法，(不過好像jade 在升級之後的新版本中不推薦使用此方法了-_-||| )
當然，jade 也預設支援其他類型的文件聲明，只需要使用doctype 跟上下面的選項即可。 jade 預設支援的有:
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
編譯結果如下：
複製程式碼 程式碼如下:
#2、標籤
jade 中的標籤的寫法非常的簡單，就是一個字。
doctype html html head title body
以上程式碼會被編譯成:
<!DOCTYPE html> <html> <head> <title></title> </head> <body></body> </html>
jade 是以嚴格的縮進來區分標籤的開始和結束的，預設為2個空格表示縮排。
如果我們要寫一個標籤並且帶有內容，比如說要寫一個標題，我們只需要在標籤單字後面加一個空格，然後跟上內容即可。
h1 this is a title. p this is a paragraph.
編譯結果為：
this is a title.
this is a paragraph.
有的時候，我們會需要輸出一些特殊排版格式的文字或是為了提高程式碼的閱讀性，需要顯示出如下的效果：
< ;p>
1. 001
2. 002
3. 003
4. 004
那麼我們在jade 中應該怎麼寫呢，這裡jade 給我們提供了兩種方式，第一種是在每一行前面加上一個| 和空格：
p | 1. 001 | 2. 002 | 3. 003 | 4. 004
第二種方法是：在標籤名後面緊跟一個.號。則此標籤下面的內容會被 jade 解析為一個程式碼片段：
p. 1. 001 2. 002 3. 003 4. 004
這下有的同學就傻傻分不清了，這兩種方式到底有什麼差別呢？這裡我們就不得不說到標籤混排，如果我們有這樣一個需求，在上面的程式碼中 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
編譯結果如下：
1. 001
aaa
2. 002
3. 003
4. 004
3、標籤的屬性與屬性值
##h1 p 等等這些標籤，我們通常都會給他們寫上id & class屬性的，那麼這在jade 應該怎麼寫呢？和zen coding 的語法一樣，我們只需要這樣寫：h1#id.class this is a title. p#j-text.text this is a paragraph.編譯結果為：
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.
编译结果为：
this is a title.
this is a paragraph.
什么？写 p 写烦了？那就不写咯。
#id.class #id.class1.class2 this is a p without tags.
编译结果为：
this is a p without tags.
这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.
说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。
比如上面的 id 和 class 的写法我们就可以改写成：
h1(id="id", class="class") this is a title. p(id="j-text", class="text") this is a paragraph.
结果是一样的：
this is a title.
this is a paragraph.
说来说去还是这两个属性，烦了？那我们换一个吧：
a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html
编译结果为：
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选")
编译结果为：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎樣使用node前端模板引擎Jade標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
Django是前端還是後端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交
前端面試官常問的問題
Mar 19, 2024 pm 02:24 PM
在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。
Django：前端和後端開發都能搞定的神奇框架！
Jan 19, 2024 am 08:52 AM
Django：前端和後端開發都能搞定的神奇框架！ Django是一個高效、可擴展的網路應用程式框架。它能夠支援多種Web開發模式，包括MVC和MTV，可以輕鬆地開發出高品質的Web應用程式。 Django不僅支援後端開發，還能夠快速建構出前端的介面，透過模板語言，實現靈活的視圖展示。 Django把前端開發和後端開發融合成了一種無縫的整合，讓開發人員不必專門學習
Golang與前端技術結合：探討Golang如何在前端領域發揮作用
Mar 19, 2024 pm 06:15 PM
Golang與前端技術結合：探討Golang如何在前端領域發揮作用，需要具體程式碼範例隨著互聯網和行動應用的快速發展，前端技術也愈發重要。而在這個領域中，Golang作為一門強大的後端程式語言，也可以發揮重要作用。本文將探討Golang如何與前端技術結合，以及透過具體的程式碼範例來展示其在前端領域的潛力。 Golang在前端領域的角色作為一門高效、簡潔且易於學習的
PPT蒙版該怎麼添加
Mar 20, 2024 pm 12:28 PM
關於PPT蒙版，很多人肯定對它很陌生，一般人做PPT不會將牠吃透，而是湊活著可以做出來自己喜歡的就行，所以很多人都不知道PPT蒙版到底是什麼意思，也不知道這個蒙版有什麼作用，甚至更不知道它可以讓圖片變得不再那麼單調，想要學習的小伙伴們快來了學習學習，為你的PPT圖片上添上點吧PPT蒙版吧，讓它不再單調了。那麼，PPT蒙版該怎麼添呢？請往下看。 1.首先我們開啟PPT，選擇一張空白的圖片，之後右鍵點選【設定背景格式】，純色選擇顏色就行。 2.點選【插入】，藝術字，輸入字3.點選【插入】，點選【形狀】
