本文作者：IMWeb json

未经同意，禁止转载

swig的简单介绍

swig是JS模板引擎，它有如下特点：

根据路劲渲染页面

面向对象的模板继承，页面复用

动态页面

快速上手

功能强大

swig的使用

swig的变量

{{ foo.bar }}

{{ foo['bar'] }}

//如果变量未定义，输出空字符。

swig的标签

extends

使当前模板继承父模板，必须在文件最前

参数： file

父模板相对模板 root 的相对路径,将在后面介绍如何实现模板继承。

block

定义一个块，使之可以被继承的模板重写，或者重写父模板的同名块

参数： name

块的名字，必须以字母数字下划线开头

parent

将父模板中同名块注入当前块中

include

包含一个模板到当前位置，这个模板将使用当前上下文

参数： file

包含模板相对模板 root 的相对路径

{% include "a.html" %}

{% include "template.js" %}

//将引入的文件内容放到被引用的地方

raw

停止解析标记中任何内容，所有内容都将输出

参数： file

父模板相对模板 root 的相对路径

for

遍历对象和数组

参数：x

当前循环迭代名

in: 语法标记

y:

可迭代对象。

{% for x in y %}

{{ x }}

{% endfor %}

if

条件语句,参数：

接受任何有效的 JavaScript条件语句

{% if foo %}

foo is true

{% else if "foo" in bar %}

foo in bar

{% else %}

fail

{% endif %}

autoescape

改变当前变量的自动转义行为

参数： on

当前内容是否转义

type:

转义类型，js 或者 html，默认 html

input = '

Hello "you" & \'them\'

';

{% autoescape false %}

{{ input }}

{% endautoescape %}

//

Hello "you" & 'them'

{% autoescape true %}

{{ input }}

{% endautoescape %}

//<p>Hello "you" & 'them' </p>

{% autoescape true "js" %}

{{ input }}

{% endautoescape %}

// \u003Cp\u003EHello \u0022you\u0022 & \u0027them\u0027\u003C\u005Cp\u003E

set

设置一个变量，在当前上下文中复用

{% set foo = [0, 1, 2, 3, 4, 5] %}

{% for num in foo %}

{{ num }}

{% endfor %}

模板继承

Swig 使用 extends 和 block 来实现模板继承

example:

//layout.html

{% block title %}My Site{% endblock %}

{% block head %}

{% endblock %}

{% block content %}{% endblock %}

//index.html

{% extends './layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}

{% parent %}

{% endblock %}

{% block content %}

This is just an awesome page.

hello,lego.

//require('pages/index/main');

{% endblock %}

swig模板经过编译后：

My Page

This is just an awesome page.

hello,lego.

test

swig模板在fis3中的应用

swig的模板继承可以更好的帮我们组织代码结构，更好的复用代码。类似jello扩展的velocity标签。

如上个例子，可以将公用代码写在一个文件里，作为母版页，需要的页面就继承这个页面，而且页面中的block又可以方便我们自定义需要的内容。

在fis3构建中使用时，调用swig编译插件，将swig标签解析成正常的html文件即可。