本文作者：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檔案即可。