很久之前就想自己搭一個博客了，最開始用hexo+github，但是換電腦後總是有些麻煩。後來使用WordPress，但是用WordPress總覺得沒什麼技術含量，前後端都是人家寫好的，而且買的垃圾虛擬機老是出問題，動不動就要提交工單解決，所以最後乾脆就直接在博客園上寫了。 最近比較閑，所以正好抽時間 ...
很久之前就想自己搭一個博客了，最開始用hexo+github，但是換電腦後總是有些麻煩。後來使用WordPress，但是用WordPress總覺得沒什麼技術含量，前後端都是人家寫好的，而且買的垃圾虛擬機老是出問題，動不動就要提交工單解決，所以最後乾脆就直接在博客園上寫了。
最近比較閑，所以正好抽時間簡單看了下node.js，然後看了看express，順便搭了個博客出來練手。當然也不僅是單純的練手，更多的算是一種探路或者摸索吧，因為公司雖然有大牛，但更多的是忙於應付業務，基本上是沒時間去學學新的東西來嘗試解決我們在開發中遇到的各種問題，這其中就包括比如重覆書寫大量相同代碼，後期維護困難等。
在此之前，我也沒有真正寫過後臺項目，雖然在學校用PHP+MySQL寫過幾個簡單的頁面，但是畢業快一年了，以前的東西都太久沒用，基本都快忘記了。所以現在使用node.js+mongoDB也算是從零開始吧，在寫的過程中，有簡單的去對項目結構等作出一些優化調整，但越往後，理解也就越深，所以更多的乾脆就留著下一版來更改吧。
這一個版本算是初級版本吧，基本功能是全的。不過經過這三個多星期的實際操作和閱讀一些別人的博客，從代碼結構和工程結構方面，都有更深的理解，所以還有很多能夠優化的地方。不過並不打算等到都做好了再寫，而是先把這段時間遇到的坑記錄下來，要不時間越久，忘的也就越多，早點記錄，多少還能留下點什麼，也能幫助其他新手朋友更容易入門。
這一個版本所用到的庫，包括node框架express4.4X、資料庫mongoDB、模板引擎pug（原jade）。
廢話不多說，進入正題。
我在項目中使用的pug.js是最新2.0版本的。
1.基礎文檔
在pug中沒有結束標簽，需要嚴格使用縮進來表示父子元素之間的關係。
編譯前：
doctype html
html
head
title pug基礎
body
p.text 必須嚴格使用縮進，來表明父子和兄弟元素間的關係
編譯後：
<!DOCTYPE html> <html> <head> <title>pug基礎 </title> </head> <body> <p class="text">必須嚴格使用縮進，來表明父子和兄弟元素間的關係</p> </body> </html>
2.內容渲染(插值)
各個模板引擎渲染方法都差不多，這裡主要是給大家展示在pug模板里插值的寫法。
方法一:
插入固定字元串，直接在標簽後面敲空格輸入字元串就行
插入變數時，輸出字元使用#{}；輸出html代碼使用!{}
在使用大括弧插值時，還支持JavaScript表達式
編譯前：
- var string = "string"; - var html = "<span>htmlString</span>"; p 直接寫插入字元串，只需在標簽後面敲一個空格 p 需要渲染為字元串的變數#{string}
p 大括弧插值也支持JavaScript表達式#{string.toUpperCase()}
p 需要渲染為html代碼的變數!{html}
編譯後：
<p>直接寫插入字元串，只需在標簽後面敲一個空格</p> <p>需要渲染為字元串的變數string</p> <p>需要渲染為字元串的變數STRING</p> <p>需要渲染為html代碼的變數<span>htmlString</span></p>
方法二：
1.使用=插入text
2.使用!=插入html
3.同樣也支持JavaScript表達式
編譯前：
- var string = "string"; - var html = "<span>htmlString</span>" p 直接寫插入字元串，只需在標簽後面敲一個空格 p= '需要渲染為字元串的變數'+string.toUpperCase() p!= '需要渲染為html代碼的變數'+html
編譯後:
<p>直接寫插入字元串，只需在標簽後面敲一個空格</p> <p>需要渲染為字元串的變數STRING</p> <p>需要渲染為html代碼的變數<span>htmlString</span></p>
3.屬性
pug模板中給元素添加屬性
簡單添加
編譯前：
a(class='link' href='www.baidu.com') 百度
編譯後：
<a class="link" href="www.baidu.com">百度</a>
一元二次運算
編譯前：
- var active= true
a(class=active? 'link-active' : '' href="www.baidu.com") 百度
編譯後：
<a class="link-active" href="www.baidu.com">百度</a>
class條件
編譯前：
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
編譯後：
<a href="/">Home</a> <a class="active" href="/about">About</a>
屬性插值
編譯前：
- var btnType = 'info'
- var btnSize = 'lg'
button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize)
//- 支持ES6的環境中
button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
編譯後：
<button class="btn btn-info btn-lg" type="button"></button> <button class="btn btn-info btn-lg" type="button"></button>
4.語句
語句包括編程語言中的for、if、switch這些，只是在pug中，稍微有些不同。
case
case語句和JavaScript中的switch語句類似。
編譯前：
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
編譯後：
<p>you have 10 friends</p>
if
編譯前：
- var user = { name: 'tom' }
- var age = false
#user
if user.description
h2.green 如果user.name為true
p.description= user.name
else if age
h2.blue 如果age為true
p.description= age
else
h2.red Description
p.description User has no description
編譯後：
<h2 class="green">如果user.name為true</h2>
<p class="description">foo bar baz</p>
each
編譯前：
- var arr = ['zero', 'one', 'two'];
- var obj = {name:'tom',age:21,country:'china'};
ul.array
each val, index in arr
li= index + ': ' + val
ul.object
each val, key in obj
li= key + ': ' + val
編譯後：
<ul class="array"> <li>0: zero</li> <li>1: one</li> <li>2: two</li> </ul> <ul class="object"> <li>name: tom</li> <li>age: 21</li> <li>country: china</li> </ul>
5.include
通過include，你可以在一個pug模板里，引入另外一個pug組件。
編譯前：
//- index.pug
doctype html
html
title include用法
body
include components/head.pug
p 在index.pug文件中引入了head.pug和footer.pug兩個組件
include components/footer.pug
//- components/head.pug
h1 這是head.pug組件
//- components/footer.pug
footer 這是footer.pug組件
編譯後：
<!DOCTYPE html> <html> <head> <title>include用法</title> </head> <body> <h1>這是head.pug組件</h1> <p>在index.pug文件中引入了head.pug和footer.pug兩個組件</p>
<footer>這是footer.pug組件</footer>
</body>
</html>
6.模板繼承
include可以幫我們少寫很多重覆代碼，同時更容易去維護每個組件。而繼承則能夠使模板更加靈活，進一步減少我們的工作量。
在pug里，我們可以使用extends來繼承模板，使用block來定義可能會變化或者可擴展的內容。
編譯前：
//- layout.pug
doctype html
html
head
title Template Inheritance用法
//- 這裡是可以擴展的link區域
block links
link(rel="stylesheet" href='/main.css')
script(src="/jquery.js")
body
head 所有頁面的公共頭部
//- 這裡是可以擴展的內容區域
block content
//- 這裡是可以擴展的script區域
block scripts
script(src="/bootstrap.js")
//- index.pug
extends layout.pug
block links
link(rel="stylesheet" href='/bootstrap.css')
link(rel="stylesheet" href="/index.css")
block content
h1 模板繼承的用法
p 使用extends來繼承模板
p 使用block來自定義模板里的內容
block append scripts
script(src="index.js")
編譯後：
<doctype html> <html> <head> <title>Template Inheritance用法</title> <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="index.css"> </head> <body> <header> 所有頁面的公共頭部</header> <h1>模板繼承的用法</h1> <p>使用extends來繼承模板</p> <p>使用block來自定義模板里的內容</p> <script src="/index.js"></script> <script src="/bootstrap.js"></script> </body> </html>
7.內聯script
我們有時也會在html頁面內嵌一些JavaScript代碼，在pug中也很簡單
編譯前：
doctype html
html
head
title 內聯script
body
h1 需要在此頁面中內聯一些腳本
script.
console.log('只需要在script後面加上一個.符號')
編譯後：
<doctype html> <html> <head> <title>內聯script</title> </head> <body> <h1>需要在此頁面中內聯一些腳本</h1> <script> console.log('只需要在script後面加上一個.符號') </script> </body> </html>
結語：
以上基本涵蓋了pug的95%內容，還剩下一點少用的沒有一一贅述，比如過濾器（filters）和註釋（comments）等，markdown過濾器是個好東西，不過我覺得一般就個人項目，比如博客這樣的會用上。
這些東西也足夠你在項目中使用了，對於剩下的那5%，大家可以自己去看看官網，瞭解一下，都挺簡單pug.js。
另外在我使用的時候，發現pug的寫法除了縮進以外，也可以按照標準的html書寫格式來創建模板，插值什麼的，通過#{}方式同樣好使。
不過在官網上沒看見可以使用這種方式創建模板的說明，這是第一次使用pug(jade)，所以不知道會不會是相容以前的版本，有知道的朋友麻煩告訴我一聲，謝謝哈！
