模板引擎是一種強大的工具，允許我們直接從後端動態生成HTML並傳遞至前端顯示。本篇會介紹模板引擎的概念，並演示如何在Express中使用兩種常見的模板引擎，Pug和EJS。模板引擎的概念模板引擎是一種將數據和模板結合以生成動態內容的工具。在Express中，模板引擎通常用於動態生成HTML頁面。例如以下的Pug模板示例:htmlheadtitleMyAppbodyh1Welcometo{title}pThisisapagecreatedbyPug.這個模板中的{title}是一個變數，在實際渲染時被替換為具體的值。使用Pug或EJSPug以前稱為JadePug是一種基於縮排的模板引擎，它使用簡潔的語法和縮排來定義HTML結構。下面是一個簡單的Pug範例:npminstallpug//設定視圖引擎為Pugapp.set"viewengine","pug";//設定視圖文件夾的位置依據需求調整app.set"views",path.joindirname,"views";在views文件夾中創建一個名為index.pug的文件htmlheadtitleMyPugPagebodyh1Welcometo{title}!p{message}ulforvari0;iitems.length;i++li{itemsi]}Pug的優勢之一是簡化了HTML的撰寫，減少了冗餘標籤和字符，使代碼更具可讀性。EJSEmbeddedJavaScriptEJS允許在HTML中嵌入JavaScript代碼，使你能夠以動態的方式生成HTML。所以在代碼上跟趨近於HTML，以下是一個簡單的EJS範例:npminstallejsJavascript//設定視圖引擎為EJSapp.set"viewengine","ejs";//設定視圖文件夾的位置依據需求調整app.set"views",path.joindirname,"views";在views文件夾中創建一個名為index.ejs的文件!DOCTYPEhtmlhtmlheadtitleMyEJSPage/title/headbodyh1Welcometo%title%/h1p%message%/pul%forvari0;iitems.length;i++{%li%itemsi]%/li%};%/ul/body/html在這個例子中，%%用於輸出JavaScript變數的值，而%%用於執行JavaScript代碼，例如for循環。設定路由來渲染最後，在我們的Express應用程式中添加一個路由以渲染模板:Javascriptapp.get"/",req,res{res.render"index",{title:"Home",message:"HelloWorld.",items:"item1","item2"]};};這個路由將渲染views文件夾中的index.pug或index.ejs，並將title、message、items作為變數傳遞給模板。系列文章ahref"https://pardn.io/blog/nodejsinstall"target"self"Node.js.JavaScript的後端魔法/aahref"https://pardn.io/blog/nodejspromiseasync"target"self"Promise與Async/Await的非同步設計/aahref"https://pardn.io/blog/nodejshelloworld"target"self"建立第一個Node.js應用程式有多難？/aahref"https://pardn.io/blog/nodejsexpress"target"self"什麼？Express竟然如此的好用/aahref"https://pardn.io/blog/nodejsmongodbmysql"target"self"前進資料庫!MongoDB與MySQL/aahref"https://pardn.io/blog/nodejsmiddleware"target"self"中介軟體Middleware與定制流程/a服務端渲染SSR的救星！Pug與EJSahref"https://pardn.io/blog/nodejsjwtxsscsp"target"self"實作JWT會員登入以及防範SQL注入與XSS攻擊/aahref"https://pardn.io/blog/nodejsrestfulapi"target"self"RESTfulAPI該怎麼設計？/aahref"https://pardn.io/blog/nodejsmochasupertest"target"self"Mocha？Supertest？單元與整合測試？/aahref"https://pardn.io/blog/nodejspm2"target"self"搭配Pm2讓Node.js持久化在線/a相關連結作者:PardnChiu]https://github.com/pardnchiuNode.js官方網站:https://nodejs.org/zhtw]https://nodejs.org/zhtwPUG:https://pugjs.org/api/gettingstarted.html]https://pugjs.org/api/gettingstarted.htmlEJS:https://ejs.bootcss.com]https://ejs.bootcss.com
邱敬幃 Pardn Chiu