範本引擎 讓您可以在應用程式中使用靜態範本檔案。在執行階段,範本引擎會將範本檔案中的變數替換為實際值,並將範本轉換為傳送給客戶端的 HTML 檔案。這種方法讓設計 HTML 頁面變得更為容易。
與 Express 搭配使用的熱門範本引擎有 Pug、Mustache 和 EJS。 Express 應用程式產生器 預設使用 Jade,但它也支援其他多種範本引擎。
請參閱 範本引擎(Express wiki),以取得可與 Express 搭配使用的範本引擎清單。另請參閱 比較 JavaScript 範本引擎:Jade、Mustache、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
屬性,則必須指定 view
檔案的副檔名。否則,您可以省略它。
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' })
})
當您向首頁發出要求時,index.pug
檔案將會以 HTML 呈現。
注意:檢視引擎快取不會快取範本輸出的內容,只會快取底層範本本身。即使已啟用快取,檢視仍會在每次要求時重新呈現。
如需進一步了解範本引擎在 Express 中運作的方式,請參閱:“為 Express 開發範本引擎”。