swig官网上的自我介绍是基于Node.js和浏览器的JavaScript模板引擎。下面介绍的是一些常用的基本语法,不过我还是极力推荐仔细阅读siwg官网教程。
swig的安装
通过NPM:
npm install swig --save
swig常用的基本语法
1.变量
传递给模板的变量可以使用双括号输出。
{{ name }}
访问对象的属性可以使用点符号或中括号来完成。以下示例等同:
{{ foo.bar }}
{{ foo['bar'] }}
中括号符号遵循与JavaScript相同的规则。如果某个键包含非字母数字字符,则必须使用中括号表示法进行访问,而不是使用点表示法。
{{ foo['chicken-tacos'] }}
如果一个变量没有定义,将被输出空字符串。
2.模板继承
Swig使用extends和block来实现模板继承。
首先我们定义一个模板layout.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
这个模板里面我们定义了三个block块,子模板可以对这三个block继承,然后我们写一个index.html继承这个模板。
{% extends './layout.html' %}
{% block title %}网站首页{% endblock %}
{% block content %}
<h1>hello swig</h1>
{% endblock %}
注意我这里并没有复写{% block head %}{% endblock %}这个块,
也就是说我们可以在layout.html模板页面里面定义很多block块,而子页面可以有选择性的实现块继承。
3.parent
将父模板中同名块内容注入当前块中。
{% extends "./foo.html" %}
{% block content %}
My content.
{% parent %}
{% endblock %}
4.include模板
相对于模板根目录的路径,将一个模板渲染到当前上下文中。
{% include "./includes/header.html" %}
5.注释
解析器简单地忽略注释标记。在您的模板呈现之前,它们将被删除,以便除非他们有权访问您的源代码,否则任何人都无法看到它们。
{#
这是一个评论。
在解析过程中将被完全剥离和忽略。即生成后模版内不可见。
#}
6.if判断
在标签内使用,如果if语句返回false ,则直到这个标签之后的代码块才会被呈现。
{% if false %}
statement1
{% else %}
statement2
{% endif %}
// => statement2
7.if-else判断
{% if false %}
Tacos
{% elseif true %}
Burritos
{% else %}
Churros
{% endif %}
// => Burritos
8.for循环
// 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:一个帮助函数,以指定的参数作为周期
使用方法:
// obj = { one: 'hi', two: 'bye' };
{% for x in obj %}
{% if loop.first %}<ul>{% endif %}
<li>{{ loop.index }} - {{ loop.key }}: {{ x }}</li>
{% if loop.last %}</ul>{% endif %}
{% endfor %}
// => <ul>
// <li>1 - one: hi</li>
// <li>2 - two: bye</li>
// </ul>
9.set命令
用来设置一个变量,在当前上下文中复用
{% set foo = [0, 1, 2, 3, 4, 5] %}
{% for num in foo %}
<li>{{ num }}</li>
{% endfor %}
10.强大的内置过滤器
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
例如大写首字母:
{{ name|title }}
swig常用的API
1.Swig选项对象
Swig选项对象。该对象可以传递给许多API级别的Swig方法来控制引擎的各个方面。所有密钥都是可选的。
属性
autoescape:(boolean)控制是否会自动转义变量输出以获取安全的HTML输出。默认为true。在变量语句中执行的函数不会被自动转义。你的应用程序/功能应该照顾他们自己的自动转义。
varControls:(array)打开和关闭变量的控制。默认为['{{', '}}']。
tagControls:(array)打开和关闭标签控件。默认为['{%', '%}']。
cmtControls:(array)打开和关闭评论控件。默认为['{#', '#}']。
locals:(object)要传递给所有模板的默认变量上下文。
cache:(CacheOptions)模板的缓存控制。默认保存在'memory'。发送false到禁用。发送一个对象get和set函数来定制。
loader:(TemplateLoader)Swig将用于加载模板的方法。默认为文件系统加载器swig.loaders.fs。
2.swig.setDefaults
为SWIG环境设置默认值。
swig.setDefaults({
cache: false,//禁用模板缓存。默认将所有模板保存到内存中
loader: swig.loaders.fs(),//默认文件系统加载器
locals: {//为所有模板设置全局可访问的方法上下文,
now:function(){//允许您打印当前日期
return new Date();
}
}
});
loader:配置Swig以使用swig.loaders.fs(默认文件系统加载器)或swig.loaders.memory模板加载器
// 允许基本路径的文件系统加载器
// 这样,您就不会在模板引用中使用相对URL。
swig.setDefaults({ loader: swig.loaders.fs(__dirname + '/templates') });
locals:要传递给所有模板的默认变量上下文,变量也可以是 JavaScript函数。
var swig = require('swig');
var locals = {
user:{
name : 'robert',
age : 24
},
mystuff: function(){
return 'Things!';
}
};
swig.render('我叫{{user.name}},年龄是{{user.age}}。这是{{ mystuff() }}', { locals: locals });
3.swig.render(string,Swig选项对象)
编译并呈现最终输出的模板字符串。在呈现源字符串时,应在选项对象中指定文件路径,以便扩展、包含和导入正常工作。通过在选项参数中添加{ filename: '/absolute/path/to/mytpl.html' }来实现这一点。
swig.render('{{ tacos }}', { locals: { tacos: 'Tacos!!!!' }});
4.swig.renderFile( pathName , locals , cb )
编译并渲染最终输出的模板文件。这对于像Exp.js这样的库是非常有用的。
cd:异步回调函数。如果没有提供,编译器将同步运行。
swig.renderFile('./template.html', {}, function (err, output) {
if (err) {
throw err;
}
console.log(output);
});