首頁 > 文章 > web前端 > node前端模板引擎Jade標籤使用詳解

node前端模板引擎Jade標籤使用詳解

php中世界最好的语言原創: 2018-05-22 10:27:311616瀏覽

這次帶給大家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 解析為一個程式碼片段：

這下有的同學就傻傻分不清了，這兩種方式到底有什麼差別呢？這裡我們就不得不說到標籤混排，如果我們有這樣一個需求，在上面的程式碼中 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

编译结果为：

index.html

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

input(type="checkbox", name="all", checked, value="全选")

编译结果为：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

node前端模板引擎Jade標籤使用詳解

this is a title.

this is a title.

this is a title.

this is a title.

相關文章