Express 文件(使用模板引擎)

博弈發表於2019-02-16

使用模板引擎

模板引擎使你可以在應用程式中使用靜態模板檔案,在執行時,模板引擎用實際值替換模板檔案中的變數,並將模板轉換為傳送到客戶端的HTML檔案,這種方法可以更輕鬆地設計HTML頁面。

一些與Express一起使用的流行模板引擎是PugMustacheEJSExpress應用程式生成器使用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開發模板引擎”。


上一篇:使用中介軟體

下一篇:錯誤處理

相關文章