模版引擎，對(duì)現(xiàn)在的 Web 開(kāi)發(fā)極為重要，幾乎所有主流 Web 框架都會(huì)支持一種或多種模版引擎，模版引擎可以分離用戶界面和業(yè)務(wù)邏輯，工作原理主要是一種翻譯，后端對(duì)特定的標(biāo)記、語(yǔ)法、變量等渲染后再輸送給瀏覽器，如今模版引擎已經(jīng)非常強(qiáng)大，在相關(guān)領(lǐng)域可以幫助開(kāi)發(fā)者節(jié)約很多時(shí)間精力，比如緩存、設(shè)計(jì)分層、插件化。不同的模版引擎千變?nèi)f化，各種語(yǔ)言也是層出不窮，比如 php 模版引擎中的老大哥 Smarty，Python 的 Jinja2，也是 Flask 中內(nèi)置的模版引擎，如今前端也有新生模版引擎，依賴前端的性能提升，像后端一樣處理模版語(yǔ)言渲染數(shù)據(jù)。

Leaf 作為 Vapor 官方提供的組件之一原生集成在 Vapor 中，Leaf 模版文件以 .leaf 結(jié)尾，模版語(yǔ)法夾雜在 HTML 之間，我們可以直接使用而不需要引入其他外部依賴。

渲染

我們可以在路由中進(jìn)行模版的渲染，同時(shí)附帶給模版?zhèn)鲄?shù)，參數(shù)以 Dict 的形式放在第二個(gè)位置，然后在 .leaf 模版文件中就能拿到對(duì)應(yīng)的數(shù)據(jù)。

標(biāo)記 (#)

Leaf 使用 # 作為模版語(yǔ)法的標(biāo)記，筆者也很苦惱為啥 Vapor 的作者要用井號(hào)做語(yǔ)法標(biāo)記，在 Github 也有人提出 # 會(huì)與 HTML/CSS 有沖突（issue #11）。

我們可以用 #() 來(lái)輸出 HTML， 這里需要注意的是這樣輸出 Leaf 會(huì)對(duì)其中的 HTML 進(jìn)行轉(zhuǎn)義，舉個(gè)例子，如下代碼輸出到瀏覽器，HTML 源代碼真是內(nèi)容其實(shí)是：hello ，并沒(méi)有被 A 標(biāo)簽包起來(lái)。

如果想輸出原始 HTML 怎么辦呢？我們可以用 raw() {} 來(lái)輸出不會(huì)被轉(zhuǎn)移的 HTML，也就是說(shuō)到瀏覽器會(huì)被解析成對(duì)應(yīng)的 HTML 代碼，如下會(huì)在瀏覽器輸出：<a>hello</a>。

需要注意的是不要讓用戶輸入內(nèi)容用 #raw(){ } 進(jìn)行原始輸出，比如評(píng)論，以免造成惡意代碼執(zhí)行的漏洞！

變量

比較

判斷

下面這段代碼邏輯就是 if:elif:else

循環(huán)

基本循環(huán)用 #loop ，第一個(gè)參數(shù)傳入數(shù)組，第二個(gè)參數(shù)寫(xiě)出循環(huán)內(nèi)部的實(shí)例變量名，假設(shè)我的 users 內(nèi)容是 [“Objective-C”、”Swift”、”Vapor”]，輸出內(nèi)容在瀏覽器看起來(lái)就會(huì)是這個(gè)樣子：

Hello, Objective-C!

Hello, Swift!

Hello, Vapor!

模塊化

我們構(gòu)建一些多頁(yè)面 Web 程序，常常會(huì)有每個(gè)頁(yè)面或者一種頁(yè)面部分相似的內(nèi)容，比如網(wǎng)站的頭部、腳部，頭部一般用來(lái)放導(dǎo)航欄，腳部放一些版權(quán)聲明、三方鏈接等等，那么在整個(gè)網(wǎng)站任何頁(yè)面中這兩部分的內(nèi)容基本都是一致的，那么我們可以把這兩部分的內(nèi)容抽出一個(gè)單獨(dú)的 .leaf 文件存放，并在需要的地方引入進(jìn)來(lái)就可以了。

Leaf 提供了四個(gè)方法來(lái)引入/包含其他模版：

這四個(gè)標(biāo)簽都不需要補(bǔ)全 .leaf 后綴，Leaf 會(huì)自動(dòng)查找對(duì)應(yīng)文件。

#import() 用來(lái)聲明一個(gè)插入點(diǎn)在當(dāng)前模版。

#extend() 用來(lái)繼承一個(gè)模版，使用模版的內(nèi)容，然后就只能用 #export() 填充之前聲明的插入點(diǎn)。

#embed("body") 才是用來(lái)引入一個(gè)模版的內(nèi)容到當(dāng)前位置。

舉個(gè)栗子