2014年10月2日 星期四

『Node.js』Jade Template Engine 模板引擎語法(上集)



Node.js 開發網頁它有許多的樣板引擎可以使用,例如常見的 Jade, EJS。樣板引擎也可以稱為樣板處理器 (Template Processor)或者叫過濾器 (Filter)。其他的語言也有個別使用的樣板引擎,像是 PHP 的 Smarty、 Ruby 的 ERB,本章節會以 jade 作為基礎的介紹如何透過樣板引擎實作 Node.js 網頁。

官方網站:http://jade-lang.com/

今天會介紹的內容有:
  1. Jade 特點
  2. Jade 語法
  3. Jade 輸出資料
接下來您可以使用:http://codepen.io/ 作為線上編輯做以下實作的測試編輯器



首先,我們先來比較一下 HTML  跟 Jade 的表示方式

===== HTML =====

<div class="wrap">
  <h1>Lorem Ipsum</h1>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. </p>
 <a href=“http://www.google.com">Google</a>
</div>

===== Jade =====
.wrap
  h1 Lorem Ipsum
  p Contrary to popular belief, Lorem Ipsum is not simply random text.
  a(href='http://www.google.com') Google

Jade 特點
  1. Jade 用縮排來定義 HTML 的階層結構
  2. Jade  比 HTML 寫起來更簡潔
  3. Jade 在編譯後,會將 HTML  的補上結束標籤
  4. Jade 不需要寫小於大於的符號
Jade 語法

因為 Jade 是利用縮排的方式來定義 HTML 的階層結構,也就是說,下一行的縮排的話,就是上一行的子節點。

撰寫

html

編譯後

<html></html>

******************************************************

撰寫

div#wrap

編譯後

<div id=“wrap"></div>

******************************************************

撰寫

p.article.a1.a2.a3

編譯後

<p class=“article a1 a2 a3”></p>

******************************************************

撰寫

p
     span

編譯後

<p><span></span></p>

******************************************************

撰寫

p
     Contrary to popular belief 
     | Lorem Ipsum is simply dummy text of the printing 
     | It has survived not only five centuries  

編譯後

<p>Contrary to popular belief Lorem Ipsum is simply dummy text of the printing It has survived not only five centuries </p>

******************************************************

標籤屬性:屬性部分就用括號的方式括弧起來,有多個屬性時就用逗點分隔或者段行來分隔

方法一
input(type="text", placeholder=“hello”)

方法二
input(
     type='text'
     name='age'
     placeholder='typing your age'
)

方法三:也可以用 javascript 的判斷控制屬性資料
- var isFemale = true
input(type='text' value=isFemale ? 'Female' : 'Male')


Jade 輸出資料

迴圈

試著寫迴圈



輸出結果



條件

條件是指當判斷為真或否時,各別出現不同的結果,什麼意思呢?直接看範例好了



結果




Jade 就先寫到這裡,下集待續..


參考資料:
http://jade-lang.com/
http://naltatis.github.io/jade-syntax-docs/
http://naltatis.github.io/jade-syntax-docs/#basics
http://blog.kerash.tw/2013/04/nodejs-jade-template-engine/

沒有留言:

張貼留言