杂记node视图模板引擎的选用

node开发，使用前端模板引擎的历史中，尝试过ejs, 陆陆续续用了一年的jade，后来都在用swig。

用jade的过程中还是没能适应它太灵活的缩进语法，没能适应它跟html标签语法比较大的偏差。我写jade标签的缩进嵌套时，经常出错，然后就要一层层排查，代码缩进本来只是为了直观的，在jade中却是一种语法，用它来写视图，个人觉得很不爽。

后来我就开始找其他的模板，希望它能像写asp.net MVC的cshtml视图文件一样，大体保留html标签的样子，只在注入数据的时候，加上程序控制，与HTML混写。

后来就考虑ejs和swig, 总体上，ejs比swig强大，排名也靠前很多(ejs是TJ搞的, 自带粉丝群)，但我后来就一直用的swig，随便选的，只要它能满足我的简单需求就行了：

• 保留基本的html标签语法，直观

• 支持母版页 layout，划分代码区域

• 支持简单的条件判断、循环

• 轻量

关于swig, 没在大型项目里面实践过，就自己写过几个小项目，没有遇到过什么坑。

下面简单记录几条swig常用的功能点。

使用母版页

母版页一般是把页面的整体区域规划好的的，比如顶边栏，侧边栏等。

新建layout.html，简单搭建母版页的架子，通过 {% block [set a name there] %}{% endblock %} 指定子页面的填充区域
示例：

    
    


主体内容可以设置在下面
{% block content %}{% endblock %}

下面是另一个可添加内容的区域
{% block footer %}{% endblock %}

{% block scripts %}{% endblock %}

然后新建另一个字页面child.html，应用母版页，并填充对应区域，示例如下：

{% extends './layout.html' %}
{% block title %} 我是title，我会填充到母版页的title block {% endblock %}
{% block content %}
    
我会填充到母版页的 content block
{% endblock %}
{% block footer %}
    
我会填充到母版页的 footer block
{% endblock %}
{% block scripts %}
    
{% endblock %}

用swig来渲染child.html，结果如下展示，根据结果来分析母版页的使用方法，应该很直观就能明白了。

使用注入的数据

假设渲染页面前注入的数据是

{
     name: ’ni.ke’,
     age: 18
}

在页面中通过{{ name }}语法即可渲染传入数据对象的name属性。

判断和循环

{% if value %}
     
value真值时我会加载
{%endif%}

{%for item in list%}
     
{{ item.value }}
{%endfor%}

备注

如果是使用express前端框架，直接使用swig官方的package即可。 如果使用Koa,可以借用tj写的 co-views 模块来辅助，不仅支持swig，也支持jade,ejs等模板引擎。