之前也有講到模板，今天繼續深入研究
1.理解模版引擎的作用
2.安裝與配置常用的模版引擎
3.渲染靜態與動態內容
模版引擎（Template Engine） 是用來將後端數據動態渲染到 HTML 頁面中的工具。它允許開發者通過變數或控制結構（如條件、循環）來生成動態的 HTML。這樣，後端能根據不同的數據渲染不同的頁面內容。
常見的模版引擎包括：
Pug：簡潔、無標籤的語法。
EJS：類似 HTML 的語法，易於學習和使用。
安裝與配置模版引擎
Pug
安裝 Pug
npm install pug
設置 Pug 為 Express 的模版引擎：
app.set('view engine', 'pug'); // 設置 Pug 為默認模版引擎
app.set('views', './views'); // 指定存放模版文件的目錄
創建 Pug 模版文件：
doctype html
html
head
title= title
body
h1 Hello #{name}!
渲染模版：
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome', name: 'John' });
});
EJS
安裝 EJS：
npm install ejs
設置 EJS 為模版引擎：
app.set('view engine', 'ejs'); // 設置 EJS 為模版引擎
app.set('views', './views'); // 指定模版文件目錄
創建 EJS 模版文件
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1>Hello <%= name %>!</h1>
</body>
</html>
渲染 EJS 模版：
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome', name: 'John' });
});
模版引擎的強大之處在於能夠根據數據生成動態頁面。可以將靜態的 HTML 片段與動態的變量混合使用。
app.get('/users', (req, res) => {
const users = [{ name: 'Alice' }, { name: 'Bob' }];
res.render('users', { title: 'User List', users: users });
});
在 users.pug 中，利用循環來渲染每個用戶的名稱：
doctype html
html
head
title= title
body
h1= title
ul
each user in users
li= user.name
在應用中使用模版引擎生成動態頁面時，應該注意性能優化。例如：
iThome鐵人賽
看影片追技術