NodeJS簡易部落格系統（一）Jade/Pug模板引擎入門
國慶到現在一直忙著移動端比賽的事情，今天開始nodejs後端框架express的學習。學習路線大概如下：
- 模板引擎pug/swig基本使用
- mongodb的簡單學習
- 資料庫框架mongoose的簡單使用
- NodeJs常用
- express的簡單使用
- 所有view頁面的製作
- 部落格系統業務邏輯實現
這就是我對NodeJs學習的一個簡單介紹，下面開始學習模板引擎pug。
一、屬性
1、單行屬性
左邊是pug的寫法，右邊是在html中的翻譯，管道符號 | 的行是用於控制空格的。
| a(href='baidu.com') 百度 | | a(class='button' href='baidu.com') 百度 | <a href="baidu.com">百度</a> <a class="button" href="baidu.com">百度</a> |
2、多行屬性
| input( type='checkbox' name='agreement' checked ) |
<input type="checkbox" name="agreement" checked="checked" /> |
3、用引號括起來的屬性
| div(class='div-class', (click)='play()') div(class='div-class' '(click)'='play()') | <div class="div-class" (click)="play()"></div> <div class="div-class" (click)="play()"></div> |
4、屬性嵌入
| - var url = 'pug-test.html'; a(href='/' + url) 連結 | | - url = 'https://example.com/' a(href=url) 另一個連結 |
<a href="/pug-test.html">連結</a> <a href="https://example.com/">另一個連結</a> |
5、不轉義的屬性
在預設情況下，所有的屬性都經過轉義（即把特殊字元轉換成轉義序列）來防止諸如跨站指令碼攻擊之類的攻擊方式。如果您非要使用特殊符號，您需要使用 != 而不是 =。
| div(escaped="<code>") div(unescaped!="<code>") |
<div escaped="<code>"></div> <div unescaped="<code>"></div> |
還有.後面跟類屬性;#後面跟ID屬性;style={}為樣式屬性;省略掉標籤名稱的話，它就是預設值div。
二、控制語句
1、分支語句case
case是 JavaScript 的switch指令的縮寫，並且它接受如下的形式：
| - var friends = 10 case friends when 0 p 您沒有朋友 when 1 p 您有一個朋友 default p 您有 #{friends} 個朋友 |
<p>您有 10 個朋友</p> |
同時可以用break來終止條件，所有js程式碼無用-作為字首。
2、迴圈語句
| - for (var x = 0; x < 3; x++) li item |
<li>item</li> <li>item</li> <li>item</li> |
或者
| - var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"] each item in list li= item |
<li>Uno</li> <li>Dos</li> <li>Tres</li> <li>Cuatro</li> <li>Cinco</li> <li>Seis</li> |
3、條件語句
Pug 的條件判斷的一般形式的括號是可選的，所以您可以省略掉開頭的 -，效果是完全相同的。
| - var user = { description: 'foo bar baz' } - var authorised = false #user if user.description h2.green 描述 p.description= user.description else if authorised h2.blue 描述 p.description. 使用者沒有新增描述。 不寫點什麼嗎…… else h2.red 描述 p.description 使用者沒有描述 |
<div id="user"> <h2 class="green">描述</h2> <p class="description">foo bar baz</p> </div> |
用 = 開始一段帶有輸出的程式碼時它將被 HTML 轉義：
| p= '這個程式碼被 <轉義> 了！' | <p>這個程式碼被 <轉義> 了！</p> |
三、包含、繼承和擴充套件
1、包含
包含（include）功能允許您把另外的檔案內容插入進來。
| //- index.pug doctype html html include includes/head.pug body h1 我的網站 p 歡迎來到我這簡陋得不能再簡陋的網站。 include includes/foot.pug |
<!DOCTYPE html> <head> <body> </html> |
| //- includes/head.pug head title 我的網站 script(src='/javascripts/jquery.js') script(src='/javascripts/app.js') |
|
| //- includes/foot.pug footer#footer p Copyright (c) foobar |
2、繼承
Pug 支援使用 block 和 extends 關鍵字進行模板的繼承。一個稱之為“塊”（block）的程式碼塊，可以被子模板覆蓋、替換。這個過程是遞迴的。
|
<!DOCTYPE html> <html> <head> <title>Express</title> <link rel="stylesheet" href="/stylesheets/style.css"> </head> <body> <h1>Express</h1> <p>Welcome to Express</p> </body> </html> |
|
3、擴充套件
擴充套件其實就是在block裡又有block。
四、迭代
1、each
| ul each val, index in {1:'一',2:'二',3:'三'} li= index + ': ' + val |
<ul> <li>1: 一</li> <li>2: 二</li> <li>3: 三</li> </ul> |
此外，each支援三目運算子，也可以在each語句後面接else塊，表示會在陣列與物件沒有可供迭代的值時被執行。
2、while
| - var n = 0; ul while n < 4 li= n++ |
<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul> |
當然，也可以使用break來結束迴圈。
五、混入mixin
mixin可以說是pug非常強大的功能，是一種允許您在 Pug 中重複使用一整個程式碼塊的方法。
| //- 定義 mixin list ul li foo li bar li baz //- 使用 +list +list |
<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> |
也可以如函式般使用：
| mixin pet(name) li.pet= name ul +pet('貓') +pet('狗') +pet('豬') |
<ul> <li class="pet">貓</li> <li class="pet">狗</li> <li class="pet">豬</li> </ul> |
當然也可以混入塊，這就很舒服了，如果你只想在當前模板中重複利用一個塊，可以不用另外生成模板繼承或者包含，直接用混入塊。
| mixin article(title) +article('Hello world') +article('Hello world') |
<div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>沒有提供任何內容。</p> </div> </div> <div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>這是我</p> <p>隨便寫的文章</p> </div> </div> |
還可以混入屬性：
| mixin link(href, name) +link('/foo', 'foo')(class="btn") |
<a class="btn" href="/foo">foo</a> |
在使用混入時，可以傳入不定長的陣列，這個和java中有點類似，用變數加字首...來說明這是個不定長陣列：
| mixin list(id, ...items) +list('my-list', 1, 2, 3, 4) |
<ul id="my-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> |
在宣告完混入塊後呼叫時，一定要記得加字首+。