# 模板引擎简介

URL: https://caijiao.org/express/chapter4/1-template-engine
Source: docs/express/chapter4/1-template-engine.md
Description: 本章节介绍模板引擎的基本概念，讲解如何在 Express 中使用模板引擎渲染动态内容，提升页面的可定制性和用户交互体验。

模板引擎是用于生成动态 HTML 页面的工具。它可以将服务器端的数据与 HTML 模板结合，生成最终的页面内容。Express 支持多种模板引擎，如 EJS、Pug、Handlebars 等。

## 为什么使用模板引擎？

在传统的服务器端开发中，HTML 内容通常是静态的，无法根据用户请求的不同动态变化。通过模板引擎，服务器可以在响应中动态生成 HTML 内容，展示不同的数据。

### 模板引擎的优势：

- **动态内容渲染**：根据请求动态渲染页面内容。
- **代码复用**：模板文件可以复用 HTML 结构，减少代码重复。
- **可读性和维护性**：模板语法简洁，易于维护。

## Express 中使用模板引擎

Express 默认不自带模板引擎，但可以通过 `view engine` 设置与任意模板引擎结合。以 EJS 为例：

### 安装 EJS

```bash
npm install ejs
````

### 配置模板引擎

在 `app.js` 中配置使用 EJS：

```js
const express = require('express');
const app = express();

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 设置视图文件存放的文件夹
app.set('views', path.join(__dirname, 'views'));

app.listen(3000, () => {
  console.log('服务器启动在 http://localhost:3000');
});
```

### 渲染模板

使用 `res.render()` 渲染视图模板并传递数据：

```js
app.get('/', (req, res) => {
  res.render('index', { title: 'Express Template Engine' });
});
```

在 `views/index.ejs` 模板中：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
</head>
<body>
  <h1>欢迎来到 <%= title %> 网站!</h1>
</body>
</html>
```

### 渲染结果

当用户访问根路径时，服务器将使用 `index.ejs` 模板和传递的 `title` 数据，生成如下 HTML 响应：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express Template Engine</title>
</head>
<body>
  <h1>欢迎来到 Express Template Engine 网站!</h1>
</body>
</html>
```

## 支持的模板引擎

除了 EJS，Express 还支持其他常用模板引擎：

* **Pug (原 Jade)**：简洁且功能强大的模板引擎。
* **Handlebars**：流行的逻辑模板引擎，支持模板继承和部分视图。

## 总结

模板引擎在 Express 中是生成动态内容的利器，可以让你根据用户的请求动态渲染 HTML 页面，提升应用的交互性和可定制性。