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

推荐答案

在 Fastify 中使用 Pug 模板引擎，可以通过 point-of-view 插件来实现。以下是一个简单的示例：

// www.javascriptcn.com code example
const fastify = require('fastify')({ logger: true });
const path = require('path');

// 注册 point-of-view 插件
fastify.register(require('point-of-view'), {
  engine: {
    pug: require('pug')
  },
  root: path.join(__dirname, 'views')
});

// 定义路由
fastify.get('/', (req, reply) => {
  reply.view('index.pug', { title: 'Fastify with Pug', message: 'Hello, World!' });
});

// 启动服务器
fastify.listen(3000, (err) => {
  if (err) {
    fastify.log.error(err);
    process.exit(1);
  }
  fastify.log.info('Server is running on http://localhost:3000');
});

在这个示例中，我们首先注册了 point-of-view 插件，并指定了 Pug 作为模板引擎。然后，我们定义了一个路由，使用 reply.view 方法来渲染 index.pug 模板，并传递了一些数据。

本题详细解读

1. 安装依赖

首先，你需要安装 fastify 和 point-of-view 插件，以及 pug 模板引擎：

npm install fastify point-of-view pug

2. 配置 point-of-view 插件

point-of-view 插件允许你在 Fastify 中使用多种模板引擎，包括 Pug。在注册插件时，你需要指定使用的模板引擎和模板文件的根目录。

fastify.register(require('point-of-view'), {
  engine: {
    pug: require('pug')
  },
  root: path.join(__dirname, 'views')
});

• engine：指定使用的模板引擎，这里我们使用 pug。
• root：指定模板文件的根目录，通常是一个名为 views 的文件夹。

3. 创建 Pug 模板

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

doctype html
html
  head
    title= title
  body
    h1= message

这个模板文件使用了 Pug 的语法，title 和 message 是从路由中传递过来的变量。

4. 定义路由并渲染模板

在路由处理函数中，使用 reply.view 方法来渲染模板并传递数据：

fastify.get('/', (req, reply) => {
  reply.view('index.pug', { title: 'Fastify with Pug', message: 'Hello, World!' });
});

• reply.view：第一个参数是模板文件的路径，第二个参数是传递给模板的数据。

5. 启动服务器

最后，启动 Fastify 服务器：

fastify.listen(3000, (err) => {
  if (err) {
    fastify.log.error(err);
    process.exit(1);
  }
  fastify.log.info('Server is running on http://localhost:3000');
});

现在，当你访问 http://localhost:3000 时，Fastify 会使用 Pug 模板引擎渲染 index.pug 文件，并将 title 和 message 传递给模板。