swig 转义html,swig模板引擎语法

本文档长期更新…

由于在自定义博客的时候难免会遇到.swig 文件 但又不知道其语法及其含义。故很难改动…

在这里本人亲测以及百度记录一下语法及其用法。

格式化字符串1

2__('', '')

{{ __('由 %s 强力驱动', 'Hexo') }}

在这里%s 会被替换成 Hexo，最终效果为 由 Hexo 强力驱动

注释1

2{# ...注释内容... #}

{# __('footer.powered', 'Hexo') #}

条件判断1

2

3

4

5

6

7

8

9{% if true %}显示{% endif %}

{% if false %}

不显示

{% elif 1 > 0 %}// 相当于 else if

hello

{% endif %}

{% 这里可以执行js代码 %}

标签里面还可以是 for 变量 等.

内置标签

extends

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

参数：

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

spacelessspaceless：尝试移除html标签间的空格1

2

3

4

5{% spaceless %}

{% for num in foo %}

{{ loop.index }}

{% endfor %}

{% endspaceless %}

输出

1

123

import

import：允许引入另一个模板的宏进入当前上下文

参数file：引入模板相对模板 root 的相对路径

参数as：语法标记 var: 分配给宏的可访问上下文对象,与python的类似！

1

2

3

4

5

6{% import 'formmacros.html' as form %}

{# this will run the input macro #}

{{ form.input("text", "name") }}

{# this, however, will NOT output anything because the macro is scoped to the "form" object: #}

{{ input("text", "name") }}

only

限制模板上下文中用 with x 定义的参数

如果当前上下文中 foo 和 bar 可用，下面的情况中，只有 foo 会被 inc.html 定义

1{% include "inc.html" with foo only %}

only 必须作为最后一个参数，放在其他位置会被忽略

include

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

1

2{% include template_path %}

{% include "path/to/template.js" %}

macro

macro：创建自定义可复用的代码段

定义

1

2

3

4{% macro input type name id label value error %}

{{ label }}

{% endmacro %}

使用

1

2

3

4

5

6

{{ input("text", "fname", "fname", "First Name", fname.value, fname.errors) }}

{{ input("text", "lname", "lname", "Last Name", lname.value, lname.errors) }}

结果输出

1

2

3

4

5

6

7

8

First Name

Last Name

block

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

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

parent

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

include

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

参数：

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

ignore missing: 包含模板不存在也不会报错

with x: 设置 x 至根上下文对象以传递给模板生成。必须是一个键值对

only: 限制模板上下文中用 with x 定义的参数

raw

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

参数：

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

循环for遍历对象和数组

参数：

x: 当前循环迭代名

in: 语法标记

y: 可迭代对象。可以使用过滤器修改1

2

3

4

5

6

7

8

9

10

11

12

13// arr = [1, 2, 3]

{ % for key, val in arr % }

{ { key } } -- { { val } }

{ % endfor % }

for循环内置变量：

loop.index：当前循环的索引(1开始)

loop.index0：当前循环的索引(0开始)

loop.revindex：当前循环从结尾开始的索引(1开始)

loop.revindex0：当前循环从结尾开始的索引(0开始)

loop.key：如果迭代是对象，是当前循环的键，否则同 loop.index

loop.first：如果是第一个值返回 true

loop.last：如果是最后一个值返回 true

loop.cycle：一个帮助函数，以指定的参数作为周期

在 for 标签里使用 else

1

2

3

4

5{% for person in people %}

{{ person }}

{% else %}

There are no people yet!

{% endfor %}

autoescape

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

参数：

on: 当前内容是否转义

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

假设1some_html_output = '

Hello "you" & \'them\'

';

然后

1

2

3

4

5

6

7

8

9

10

11{% autoescape false %}

{{ some_html_output }}

{% endautoescape %}

{% autoescape true %}

{{ some_html_output }}

{% endautoescape %}

{% autoescape true "js" %}

{{ some_html_output }}

{% endautoescape %}

将会输出

1

2

3

4

5

Hello "you" & 'them'

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

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

set命令

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

1

2

3

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

{% for num in foo %}

{{ num }}

{% endfor %}

filter

对整个块应用过滤器

参数：

filter_name: 过滤器名字，若干传给过滤器的参数 父模板相对模板 root 的相对路径1

2{%filteruppercase %}oh hi, {{ name }}{% endfilter %}

{%filterreplace "." "!" "g" %}Hi. My name is Paul.{% endfilter %}

输出

1

2OH HI, PAUL

Hi! My name is Paul!

内置过滤器add(value)：使变量与value相加，可以转换为数值字符串会自动转换为数值。

addslashes：用 \ 转义字符串

capitalize：大写首字母

date(format[, tzOffset])：转换日期为指定格式

format：格式

tzOffset：时区

default(value)：默认值(如果变量为undefined，null，false)

escape([type])：转义字符

默认： &, , “, ‘

js: &, , “, ‘, =, -, ;

first：返回数组第一个值

join(glue)：同[].join

json_encode([indent])：类似JSON.stringify, indent为缩进空格数

last：返回数组最后一个值

length：返回变量的length，如果是object，返回key的数量

lower：同’’.toLowerCase()

raw：指定输入不会被转义

replace(search, replace[, flags])：同’’.replace

reverse：翻转数组

striptags：去除html/xml标签

title：大写首字母

uniq：数组去重

upper：同’’.toUpperCase

url_encode：同encodeURIComponent

url_decode：同decodeURIComponemt

使用方法：

和Vue的过滤器用法一样，都是一个“ | ”，例如我们要格式化一个时间，

1

2

3

4{{ birthday|date('Y-m-d') }}

//大写首字母

{{ name|title }}

自定义过滤器

创建一个 myfilter.js 然后引入到 Swig 的初始化函数中

1swig.init({ filters: require('myfilters') });

在 myfilter.js 里，每一个 filter 方法都是一个简单的 js 方法，下例是一个翻转字符串的 filter：

1

2

3exports.myfilter = function (input) {

return input.toString().split('').reverse().join('');

};

你的 filter 一旦被引入，你就可以向下面一样使用：

1

2

3

4{{ name|myfilter }}

{%filtermyfilter %}

I shall be filtered

{% endfilter %}

你也可以像下面一样给 filter 传参数：

1

2

3

4

5

6exports.prefix = function(input, prefix) {

return prefix.toString() + input.toString();

};

{{ name|prefix('my prefix') }}

{% filter prefix 'my prefix' %I will be prefixed with "my prefix".{% endfilter %}

{% filter prefix foo %}I will be prefixed with the value stored to `foo`.{% endfilter %}