本文作者: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文件即可。