简介
egg-view-swig 是 Egg.js 的框架插件之一，提供了新的视图渲染引擎。swig 是一个流行的模板引擎，基于 Django 的 jinja2，提供了类似 Django 和 Jinja2 的语法。本文将详细介绍该 npm 包的使用方法，以帮助前端工程师更好地开发应用。
安装
使用 npm 安装 egg-view-swig：
$ npm install egg-view-swig --save
配置
在 config/config.default.js 中添加如下配置：
config.view = { defaultViewEngine: 'swig', mapping: { '.html': 'swig', }, };
这个配置表明默认使用 swig 作为视图引擎，后缀为 .html 的文件也使用 swig 进行渲染。
在 controller 中使用
在 controller 中渲染模板非常简单，只需要指定模板名称和传递给模板的变量即可，代码如下：
-- -------------------- ---- ------- ----- -------------- ------- ---------- - ----- ------- - ----- - --- - - ----- ----- ------------------------ - ------ --------- -------- ------ ------- --- - -展开代码
在模板中可以通过变量名直接访问传递的变量，例如：
<html> <head> <title>{{ title }}</title> </head> <body> <h1>{{ message }}</h1> </body> </html>
模板继承
swig 支持模板继承，是一种非常强大的功能，它允许定义一个基础模板，并在子模板中扩展它，代码如下：
base.html：
-- -------------------- ---- ------- ------ ------ --------- ----- ----- ---- -------- ---------- ------- ------ ---- ------------------ -- ----- ------- ---- -------- -- ------ ------- -------展开代码
对应 controller 代码：
-- -------------------- ---- ------- ----- -------------- ------- ---------- - ----- ------- - ----- - --- - - ----- ----- ----------------------- - ------ ----------- -------- -------- -- ---------- --- - -展开代码
home.html:
-- -------------------- ---- ------- -- ------- ----------- -- -- ----- ----- -- -- ----- -- -- -------- -- -- ----- ------- -- ------ ------- ------- -- -------- --展开代码
这样就可以通过继承 base.html 模板快速创建新页面。
模板过滤器
swig 支持过滤器（Filter），可以对变量进行一些预处理。例如，我们可以定义一个 date 过滤器，用于格式化日期，代码如下：
// app/view/filter.js module.exports = { date: function(input, format = 'YYYY-MM-DD') { const moment = require('moment'); return moment(input).format(format); }, };
在模板中使用：
{{ article.create_at | date('YYYY年MM月DD日') }}
这样就可以将 create_at 变量的值按照指定的格式进行展示。
模板标签
swig 提供了一些内置的标签，例如 if、for 等等，这些标签跟其他模板引擎都差不多。需要注意的是，swig 不支持类似 Nunjucks 中的 if x in list 这种写法，需要改成 if list.indexOf(x) !== -1。
结语
本文主要讲解了 npm 包 egg-view-swig 的使用方法，包括安装、配置、在 controller 中使用、模板继承、模板过滤器和模板标签等方面。希望通过本文的介绍可以帮助前端工程师更好地开发应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601281e8991b448de074
