使用模板引擎
模板引擎使你可以在應用程式中使用靜態模板檔案,在執行時,模板引擎用實際值替換模板檔案中的變數,並將模板轉換為傳送到客戶端的HTML檔案,這種方法可以更輕鬆地設計HTML頁面。
一些與Express一起使用的流行模板引擎是Pug、Mustache和EJS,Express應用程式生成器使用Jade作為其預設值,但它也支援其他幾個。
有關可與Express一起使用的模板引擎列表,請參閱模板引擎(Express wiki),另請參閱比較JavaScript模板引擎:Jade、Moustache、Dust等。
注意:Jade已更名為Pug,你可以繼續在你的應用中使用Jade,它可以正常工作,但是,如果你想要模板引擎的最新更新,則必須在應用程式中將Jade替換為Pug。
要渲染模板檔案,請設定以下應用程式設定屬性,在由生成器建立的預設應用程式app.js
中設定:
-
views
,模板檔案所在的目錄,例如:app.set(`views`, `./views`)
,預設為應用程式根目錄中的views
目錄。 -
view engine
,使用的模板引擎,例如,要使用Pug模板引擎:app.set(`view engine`, `pug`)
。
然後安裝相應的模板引擎npm包,例如安裝Pug:
$ npm install pug --save
相容Express的模板引擎(如Jade和Pug)匯出名為
__express(filePath, options, callback)
的函式,該函式由res.render()
函式呼叫以渲染模板程式碼。某些模板引擎不遵循此約定,Consolidate.js庫遵循此約定,對映所有流行的Node.js模板引擎,因此可以在Express中無縫工作。
設定檢視引擎後,你不必在應用程式中指定引擎或載入模板引擎模組,Express在內部載入模組,如下所示(對於上面的示例)。
app.set(`view engine`, `pug`)
在views
目錄中建立一個名為index.pug
的Pug模板檔案,其中包含以下內容:
html
head
title= title
body
h1= message
然後建立一個路由來渲染index.pug
檔案,如果未設定view engine
屬性,則必須指定檢視檔案的副檔名,否則,你可以省略它。
app.get(`/`, function (req, res) {
res.render(`index`, { title: `Hey`, message: `Hello there!` })
})
當你向主頁發出請求時,index.pug
檔案將渲染為HTML。
注意:檢視引擎快取不會快取模板輸出的內容,只快取底層模板本身,即使快取已開啟,仍會每個請求重新渲染檢視。
要了解有關模板引擎如何在Express中工作的更多資訊,請參閱:“為Express開發模板引擎”。