Jade基本規則：
Jade的基本規則寫法很簡單，只要向後退一格，就表示該標籤則是在它的下層，基本上它看起來就像是一個樹狀結構，同時只需寫起始標籤就好，當經由編譯工具後，就會自動將標籤給包覆起來，因此以下是簡單的小示範。
basic.jade
doctype html
html
head
title helloJade
body
h1 Jade Basic
p 這是Jade基本寫法 |
basic.html
<!DOCTYPE html>
<html>
<head>
<title>helloJade</title>
</head>
<body>
<h1>Jade Basic</h1>
<p>這是Jade基本寫法</p>
</body>
</html> |
Jade文字(Plain Text)：
在Jade中，當要輸入文字時，共有三種方式。
txt-1.jade
第一種寫法：直接在標籤後方加入空一格後，加入文字。
p 這是Jade基本寫法 |
txt-1.html
<p>這是Jade基本寫法</p> |
第二種寫法：在標籤斷行後方加入|。
txt-2.jade
p ｜ 這是Jade基本寫法 |
txt-2.html
<p>這是Jade基本寫法</p> |
第三種寫法：在標籤後方加入.，這種通常運用於多行文字時使用。
txt-3.jade
p. 這是Jade基本寫法 支援多行文字 就不用一直加入| |
txt-3.html
<p>這是Jade基本寫法支援多行文字就不用一直加入|</p> |
Jade繼承(Extends)：
光聽繼承這二字應該完全感受不到它是啥東東，其實它就像Dreamweaver網頁模版的概念，透過已製作好的模版後，再針對活動內容加以修改裡面的元素，如此一來就能讓網頁版型重覆再利用，同時可加快網頁的製作時間。
在製作模版時，當可替換的元素，則用block標示。
tpl.jade
doctype html
html
head
block webtitle
title 無標題
body
block h1title
h1 梅問題講堂
block postcontent
div 內容 |
使用已製作模版，當要引用時，則用extends，並指向佈景名稱，要替換元素時，一樣用block，就可將剛所設定的區塊給替換所需的內容，當不輸入時，就會依照版型的預設值。
extends.jade
extends ./tpl.jade
block webtitle
title 梅問題講堂
block postcontent
div.container
| 內容 |
extends.html
<!DOCTYPE html>
<html>
<head>
<title>梅問題講堂</title>
</head>
<body>
<h1>梅問題講堂</h1>
<div class="container">內容</div>
</body>
</html> |
Jade匯入(Includes)：
匯入這功能，就像一般的php或是apsx一樣，可以將內容直接匯入進來，就像拷貝貼上一樣，而這以前大部分都用iframe來製作，但現有了匯入後，就能將版型拆成多隻後，再把它合併起來，因此當要修改時就更方便了。
head.jade
head meta(chartset='utf-8') meta(name='description',content='梅問題講堂') link(href='style.css',rel='stylesheet') title jade includes |
footer.jade
#footer p copyright (c) 2014-10-31 |
include.jade
doctype html html body header 梅問題 #content 內容 include ./footer.jade |
include.html
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf-8">
<meta name="description" content="梅問題講堂">
<link href="style.css" rel="stylesheet">
<title>jade includes</title>
</head>
<body>
<header>梅問題</header>
<div id="content">內容</div>
<div id="footer">
<p>copyright (c) 2014-10-31</p>
</div>
</body>
</html> |
Jade函式(Mixins)：
而Jade的函式，就跟SCSS一樣，當函式裡面寫了什麼內容，Jade函式則是完整的將內容給列出來，使用上也相當的簡單。
mixins.jade
mixin link(url,linkname,linkclass)
a(href=url,class=linkclass)=linkname
+link('http://minwt.com','梅問題','btn')
+link('http://google.com','google','btn') |
mixins.html
<a href="http://minwt.com" class="btn">梅問題</a> <a href="http://google.com" class="btn">google</a> |
以上這五大類，是在製作版型中，常會使用到Jade的功能，而最讓梅干感覺到方便的是，它的繼承跟匯入的功能，只要善用這二組功能，就等於在製作一個小型的網站，當按下儲存的同時，所有的文件都會編譯過一次，立即就有更新所有的內容，相當的方便，因此有興趣的朋友不妨也可試試看，有任何問題也歡迎隨時討論。