npm 包 koa-swig 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 koa-swig？

koa-swig 是一个以 swig 为模版引擎的 Koa 中间件。它支持模版继承，缓存，过滤器等特性，使得服务器 HTML 渲染变得简单。

安装 koa-swig

使用 npm 进行安装：

$ npm install koa-swig --save

koa-swig 的基本使用

我们需要以下步骤来使用 koa-swig：

引入 koa 及 koa-swig 库：

const Koa = require('koa');
const render = require('koa-swig');

创建 koa 实例
```
const app = new Koa();
```
配置 koa-swig
```
app.context.render = render({
  root: path.join(__dirname, 'views'),
  ext: 'html',
  cache: 'memory', // 'memory' or false
  writeBody: false,
  varControls: ['[[', ']]'],
});
```
说明：
- root：指定模版文件所在的绝对路径。
- ext：指定模版文件的扩展名。
- cache：是否缓存页面，设置为 'memory' 可以开启缓存。
- writeBody：是否将渲染好的 HTML 代码输出到 response body 中。
- varControls：自定义模板引擎的变量分隔符。
编写路由
```
app.use(async function(ctx, next) {
  await ctx.render('home', { title: 'Home page' });
});
```
说明：
- await ctx.render('模板文件名', { 传递给模板的变量 })：渲染模板。
启动应用程序
```
app.listen(3000, () => {
  console.log('server is running at http://localhost:3000');
});
```
说明：
- app.listen：启动应用程序，这里启动的是一个本地服务器。

koa-swig 的高级使用

1. 自定义 filter

koa-swig 提供了自定义 filter 的接口，可以根据自己的需求添加自己的 filter。

配置 filter：

-- -------------------- ---- -------
------------------ - --------
  ----- -------------------- ---------
  ---- -------
  ------ ---------
  ---------- ------
  -------- -
    ------------ ------ -
      ------ ---------------------------
    --
  --
---

在模板中使用：

{{ 99.9 | decimal(2) }}

2. 模板继承

koa-swig 支持模板继承，使得页面之间可以共享相同的布局，降低了代码的重复。

定义基础模板(templates/layout.html)：

-- -------------------- ---- -------
--------- -----
------
  ------
    --------- ----- ----- ---- -------- ----------
  -------
  ------
    -- ----- ------- ---- -------- --
  -------
-------

编写子模版(templates/home.html)：

{% extends 'layout.html' %}

{% block title %}Home Page{% endblock %}

{% block content %}
  <h1>Welcome to Home Page!</h1>
{% endblock %}

3. 模板数据自动注入

koa-swig 支持将一些公用数据自动注入到模板中，例如用户信息，站点信息等。

定义自动注入的数据：

-- -------------------- ---- -------
------------------ - --------
  ----- -------------------- ---------
  ---- -------
  ------ ---------
  ---------- ------
  ------------ ------ ------
  ------- -
    --------- ------------
  --
---

在模板中使用：

<h1>Welcome to [[siteName]]</h1>

这样可以使得项目中的公用数据更加方便的传递到模板中。

完整代码示例

-- -------------------- ---- -------
----- --- - ---------------
----- ------ - --------------------
----- ---- - ----------------

----- --- - --- ------

------------------ - --------
  ----- -------------------- ---------
  ---- -------
  ------ --------- -- -------- -- -----
  ---------- ------
  ------------ ------ ------
  ------- -
    --------- ------------
  --
---

------------- ----- ----- -- -
  ----- ------------------ - ------ ----- ----- ---
---

---------------- -- -- -
  ------------------- -- ------- -- ------------------------
---

在浏览器中输入 'http://localhost:3000' 即可访问应用程序。

总结

koa-swig 是一个以 swig 为模版引擎的 Koa 中间件，它支持了模板继承，缓存，过滤器等特性，使得服务器 HTML 渲染变得简单。在项目中使用 koa-swig 可以大大提高开发效率，减少代码冗余。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/68539