介绍
koa2-swig 是一款基于 Koa2 的模板引擎，使用者可以使用类似于 Django，Jinja2 的语法进行开发。它可以完美的集成了 ES6 的 async/await，支持多种开发环境，是一款非常优秀的前端开发工具。
安装
使用 npm 进行安装
npm install koa2-swig --save
基础使用
- 引入依赖
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - ---------------------
----- -- - --------------
----- --- - --- ------
-- ---------
------------------ - ----------------
----- ----------------------- ---------
----------- -----
------ ------
---- -------
---------- ------
----
- 编写视图文件
我们可以将视图文件放在 views 文件夹下，使用 HTML 语法编写
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
-------- -----------------
-------
-------
- 编写路由
将编写的视图文件渲染到对应的路由下，我们可以使用 async/await 的语法，具体如下：
app.use(async (ctx, next) => {
ctx.body = await ctx.render('index', {
title: 'Koa2 Swig',
username: 'John Doe'
});
});
index 是我们创建的视图文件，title 和 username 是 Object，每个属性代表的具体意思分别是页面标题和用户名。
高级使用
koa2-swig 还支持多种复杂的操作，比如：
- 自定义过滤器
过滤器用于将某些不符合标准的值进行转换，koa2-swig 提供了很多常用的 Filter，如果需要自定义 Filter 也可以很方便
-- -------------------- ---- -------
----- --- - --- ------
------------------ - --------
----- -------------------- -------- -----------
----------- ----- ------
------ --------- --------------
---- ------- ---------
------------ ------ ------ -----------------------
---------- -----
---
--- ----- - -
----- ---------
---- --
--
------------- ----- ----- -- -
------ ------------------- -
----- - ------
---
---
--------
------------------ - ----------------
----- ----------------------- ---------
----------- -----
------ ---------
---- -------
---------- ------
-------- -
------------------------------------------------
--------- - --------------
------ ------------------
-
-
----
其中，我们使用了一个自定义的 lowerCase 过滤器，该过滤器将输入的字符串全部转为小写。在模板文件中，我们可以使用该过滤器对文本进行操作：
{{ users.name|lowerCase }} - 传递上下文变量
当我们想要在多个路由之间共享一个值时，可以通过 app.context 来实现。举例来说，下面的代码中，我们将 ctx.user 存储在上下文中，并在渲染页面时将其传递给模板。
app.context.user = 'koa';
app.use(async (ctx, next) => {
return ctx.render('user', { user: ctx.user });
});然后我们可以在模板文件中直接使用该变量
<h1>{{ user }}</h1>示例代码
-- -------------------- ---- -------
----- ---- - ---------------------
----- --- - ---------------
----- ------ - ----------------------
----- ---- - ----------------
----- --- - --- ------
----- ------ - --- ---------
------------------ - ------
----- -------------------- ---------
----------- -----
------ ------
---- -------
------------ ------ ------
---------- -----
---
------------------------------------------------------
--------------- ----- ----- ----- -- -
----- ------------------- -
------ ----- ------
----- ------
--
---
------------------ ----- -- -
-- ----- -
-------------------
-------
-
---总结
ko2-swig 是一款非常强大的模板引擎，本文通过引入依赖，编写视图文件，编写路由，自定义过滤器，传递上下文变量的方式进行讲解。期望本文能够对读者理解 koa2-swig 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581c81e8991b448d546a