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.
有的时候，我们会需要输出一些特殊排版格式的文本或者是为了提高代码的阅读性，需要显示出如下的效果：
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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci node前端模板引擎Jade标签使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
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".
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!
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!
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
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".
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!
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
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs?
Feb 24, 2023 pm 07:33 PM
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs? Artikel berikut akan memperkenalkan kepada anda cara menggunakan nod untuk melaksanakan sistem log masuk tunggal. Saya harap ia akan membantu anda!
