如何在 Koa 中使用 Pug (Jade) 模板引擎？

推荐答案

在 Koa 中使用 Pug 模板引擎，首先需要安装 koa-views 和 pug 这两个依赖包。然后通过 koa-views 中间件来配置 Pug 模板引擎。

npm install koa-views pug

接下来，在 Koa 应用中配置并使用 Pug 模板引擎：

// 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: 'pug'
}));

// 路由中使用模板引擎
app.use(async (ctx) => {
  await ctx.render('index', {
    title: 'Hello Koa',
    message: 'Welcome to Koa with Pug!'
  });
});

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

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

doctype html
html
  head
    title= title
  body
    h1= message

本题详细解读

1. 安装依赖

首先，你需要安装 koa-views 和 pug 这两个依赖包。koa-views 是一个 Koa 中间件，用于渲染视图模板，而 pug 是 Pug 模板引擎本身。

npm install koa-views pug

2. 配置模板引擎

在 Koa 应用中，使用 koa-views 中间件来配置 Pug 模板引擎。koa-views 的第一个参数是模板文件所在的目录，第二个参数是配置选项，其中 extension 指定了模板文件的扩展名。

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

3. 渲染模板

在路由处理函数中，使用 ctx.render 方法来渲染模板。ctx.render 的第一个参数是模板文件名（不需要扩展名），第二个参数是传递给模板的数据对象。

app.use(async (ctx) => {
  await ctx.render('index', {
    title: 'Hello Koa',
    message: 'Welcome to Koa with Pug!'
  });
});

4. 创建模板文件

在 views 目录下创建一个 index.pug 文件。Pug 模板引擎使用简洁的语法来生成 HTML。在模板中，你可以使用 = 来输出变量的值。

doctype html
html
  head
    title= title
  body
    h1= message

5. 运行应用

最后，启动 Koa 应用并访问 http://localhost:3000，你将看到渲染后的 HTML 页面。

node app.js

通过以上步骤，你就可以在 Koa 中成功使用 Pug 模板引擎来渲染视图了。