nodejs前端模板引擎swig入门详解

2020-06-17 06:43:26易采站长站整理

<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

这个模板里面我们定义了三个block块,子模板可以对这三个block继承

然后我们写一个index.html继承这个模板


{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
<div>
<h1>hello swig</h1>
<div>
{% endblock %}

注意我这里并没有复写{% block head %}{% endblock %}这个块

也就是说我们可以在layout.html模板页面里面定义很多block,而子页面可以有选择性的实现。

4.include模板

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% include "./includes/head.html" %}
{% block head %}{% endblock %}
</head>
<body>
{% include "./includes/header.html" %}
{% block content %}{% endblock %}
</body>
</html>

5.if判断


{ % if name === '郭靖' % }
hello 靖哥哥
{ % endif % }

6.if-else判断


{ % if name === '郭靖' % }
hello 靖哥哥
{ % elseif name === '黄蓉' % }
hello 蓉妹妹
{ % else % }
hello 欧阳峰
{ % endif % }

7.for循环

先上栗子:


// arr = [1, 2, 3]{ % for key, val in arr % }
<p>{ { key } } -- { { val } }</p>
{ % 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:一个帮助函数,以指定的参数作为周期

使用方法:


// arr = [1, 2, 3]{ % for key, val in arr % }
<p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }

8.强大的内置过滤器

add(value):使变量与value相加,可以转换为数值字符串会自动转换为数值。
addslashes:用 转义字符串