如何在 Koa 中渲染模板？

推荐答案

在 Koa 中渲染模板通常需要使用中间件来支持模板引擎。以下是使用 koa-views 中间件和 ejs 模板引擎的示例：

// www.javascriptcn.com code example
const Koa = require('koa');
const views = require('koa-views');
const path = require('path');

const app = new Koa();

// 配置模板引擎
app.use(views(path.join(__dirname, '/views'), {
  extension: 'ejs'
}));

// 路由处理
app.use(async (ctx) => {
  await ctx.render('index', { title: 'Koa Template Rendering' });
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个示例中，koa-views 中间件用于配置模板引擎，ejs 是模板引擎的名称。ctx.render 方法用于渲染模板文件，并传递数据给模板。

本题详细解读

1. 安装依赖

首先，你需要安装 koa-views 和 ejs：

npm install koa-views ejs

2. 配置模板引擎

在 Koa 应用中，使用 koa-views 中间件来配置模板引擎。koa-views 支持多种模板引擎，如 ejs、pug、handlebars 等。你可以通过 extension 参数指定使用的模板引擎。

app.use(views(path.join(__dirname, '/views'), {
  extension: 'ejs'
}));

3. 渲染模板

在路由处理中，使用 ctx.render 方法来渲染模板。第一个参数是模板文件的路径（相对于 views 目录），第二个参数是传递给模板的数据。

app.use(async (ctx) => {
  await ctx.render('index', { title: 'Koa Template Rendering' });
});

4. 模板文件

在 views 目录下创建一个 index.ejs 文件：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
</body>
</html>

5. 运行应用

启动应用后，访问 http://localhost:3000，你将看到渲染后的页面，标题为 "Koa Template Rendering"。

6. 其他模板引擎

如果你使用其他模板引擎，如 pug，只需更改 extension 参数即可：

app.use(views(path.join(__dirname, '/views'), {
  extension: 'pug'
}));

然后在 views 目录下创建 index.pug 文件：

doctype html
html
  head
    title= title
  body
    h1= title

这样，你就可以在 Koa 中使用不同的模板引擎来渲染页面了。