swig模板 PHP,认识一下swig前端模板引擎

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。

{% block title %}{% endblock  %}

{% block head %}{% endblock  %}

{% block content %}{% endblock  %}

这个模板里面我们定义了三个block块，子模板可以对这三个block继承，然后我们写一个index.html继承这个模板。{% extends './layout.html' %}

{% block title %}网站首页{% endblock %}

{% block content %}

hello swig

{% 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 %}

• {% endif %}
• {{ loop.index }} - {{ loop.key }}: {{ x }}

{% if loop.last %}

{% endif %}

{% endfor %}

// =>

//    

1 - one: hi

//    

2 - two: bye

//    

9.set命令

用来设置一个变量，在当前上下文中复用{% set foo = [0, 1, 2, 3, 4, 5] %}

{% for num in foo %}

{{ num }}

{% 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);

});