這次給大家?guī)韓ode前端模板引擎Jade標簽使用詳解，node前端模板引擎Jade標簽使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。
1、文檔聲明
我們在開始寫一個 html 頁面的時候，首先要寫上 DOCTYPE 文檔聲明的，現(xiàn)在通常情況下我們都是采用 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
編譯結(jié)果如下：
復制代碼 代碼如下:
2、標簽
jade 中的標簽的寫法非常的簡單，就是一個單詞。
doctype?html html ?head ?title ?body
以上代碼會被編譯成:
<!DOCTYPE html> <html> ?<head> ?<title></title> ?</head> ?<body></body> </html>
jade 是以嚴格的縮進來區(qū)分標簽的開始和結(jié)束的，默認為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.
有的時候，我們會需要輸出一些特殊排版格式的文本或者是為了提高代碼的閱讀性，需要顯示出如下的效果：
? 1. 001
? 2. 002
? 3. 003
? 4. 004
那么我們在 jade 中應該怎么寫呢，這里 jade 給我們提供了兩種方式，第一種是在每一行前面加上一個 | 和空格：
p ?|?1.?001 ?|?2.?002 ?|?3.?003 ?|?4.?004
第二種方法是：在標簽名后面緊跟一個 . 號。則此標簽下面的內(nèi)容會被 jade 解析為一個代碼段：
p. ?1.?001 ?2.?002 ?3.?003 ?4.?004
這下有的同學就傻傻分不清了，這兩種方式到底有什么區(qū)別呢？這里我們就不得不說到標簽混排，如果我們有這樣一個需求，在上面的代碼中 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 中應該怎么寫呢？和 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 標簽能夠省略不寫.
說完了 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.
結(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é)果為：
那么問題就來了，如果我們要寫一個單屬性應該怎么寫？比如給表單元素添加 checked屬性：
input(type="checkbox",?name="all",?checked,?value="全選")
編譯結(jié)果為：
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
Atas ialah kandungan terperinci node前端模板引擎Jade標簽使用詳解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk memadam nod dalam nvm
Dec 29, 2022 am 10:07 AM
Cara memadam nod dengan nvm: 1. Muat turun "nvm-setup.zip" dan pasangkannya pada pemacu C 2. Konfigurasikan pembolehubah persekitaran dan semak nombor versi melalui arahan "nvm -v" 3. Gunakan "nvm arahan install" Pasang nod; 4. Padamkan nod yang dipasang melalui arahan "nvm uninstall".
PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
Mar 05, 2025 pm 05:57 PM
Penjelasan dan Panduan Pemasangan Terperinci untuk Pinetwork Nodes Artikel ini akan memperkenalkan ekosistem pinetwork secara terperinci - nod pi, peranan utama dalam ekosistem pinetwork, dan menyediakan langkah -langkah lengkap untuk pemasangan dan konfigurasi. Selepas pelancaran Rangkaian Ujian Blockchain Pinetwork, nod PI telah menjadi bahagian penting dari banyak perintis yang aktif mengambil bahagian dalam ujian, bersiap sedia untuk pelepasan rangkaian utama yang akan datang. Jika anda tidak tahu kerja pinet, sila rujuk apa itu picoin? Berapakah harga untuk penyenaraian? Penggunaan PI, perlombongan dan analisis keselamatan. Apa itu Pinetwork? Projek Pinetwork bermula pada tahun 2019 dan memiliki syiling pi cryptocurrency eksklusifnya. Projek ini bertujuan untuk mewujudkan satu yang semua orang boleh mengambil bahagian
Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod
Mar 28, 2023 pm 07:28 PM
Bagaimana untuk mengendalikan muat naik fail? Artikel berikut akan memperkenalkan kepada anda cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod saya harap ia akan membantu anda!
Mari kita bincangkan tentang cara menggunakan pkg untuk membungkus projek Node.js ke dalam fail boleh laku.
Dec 02, 2022 pm 09:06 PM
Bagaimana untuk membungkus fail boleh laku nodejs dengan pkg? Artikel berikut akan memperkenalkan kepada anda cara menggunakan pkg untuk membungkus projek Node ke dalam fail boleh laku. Saya harap ia akan membantu anda!
Analisis mendalam tentang alat pengurusan proses Node 'pm2'
Apr 03, 2023 pm 06:02 PM
Artikel ini akan berkongsi dengan anda alat pengurusan proses Node "pm2", dan bercakap tentang mengapa pm2 diperlukan, cara memasang dan menggunakan pm2, saya harap ia akan membantu semua orang!
Pengesahan berasaskan token dengan Angular dan Node
Sep 01, 2023 pm 02:01 PM
Pengesahan adalah salah satu bahagian terpenting dalam mana-mana aplikasi web. Tutorial ini membincangkan sistem pengesahan berasaskan token dan cara ia berbeza daripada sistem log masuk tradisional. Pada penghujung tutorial ini, anda akan melihat demo berfungsi sepenuhnya yang ditulis dalam Angular dan Node.js. Sistem Pengesahan Tradisional Sebelum beralih kepada sistem pengesahan berasaskan token, mari kita lihat sistem pengesahan tradisional. Pengguna memberikan nama pengguna dan kata laluan mereka dalam borang log masuk dan klik Log Masuk. Selepas membuat permintaan, sahkan pengguna di bahagian belakang dengan menanyakan pangkalan data. Jika permintaan itu sah, sesi dibuat menggunakan maklumat pengguna yang diperoleh daripada pangkalan data dan maklumat sesi dikembalikan dalam pengepala respons supaya ID sesi disimpan dalam penyemak imbas. Menyediakan akses kepada aplikasi tertakluk kepada
Apa yang perlu dilakukan jika npm nod gyp gagal
Dec 29, 2022 pm 02:42 PM
npm node gyp gagal kerana versi "node-gyp.js" dan "Node.js" tidak sepadan Penyelesaiannya: 1. Kosongkan cache nod melalui "npm cache clean -f" 2. Melalui "npm install -. g n" Pasang modul n; 3. Pasang versi "nod v12.21.0" melalui arahan "n v12.21.0".
Artikel untuk bercakap tentang modul fail fs dan modul laluan dalam Node (analisis kes)
Nov 18, 2022 pm 08:36 PM
Artikel ini menggunakan kes membaca dan menulis fail serta memproses laluan untuk mengetahui tentang modul fail fs dan modul laluan dalam Node.
