HEXO 进阶-SWIG高级语法

发表于   |   分类于   |   阅读次数   |   字数统计: 3,633(字)   |   阅读时长: 21(分)

摘要

网上关于SWIG语法的介绍甚少，本人也在学习SWIG语法以更好的优化自己的博客，本文介绍SWIG的高级语法
语法主要模板语法，通过了解本章，你可以了解基本主题模板的SWIG文件的高级语法，让你随心所欲的完善您自己网
站。本文的关键字:extends 、Block、include、for、if、set等.
相关推荐:
HEXO-建站系列
HEXO-优化系列
HEXO-进阶系列

前言

swig是JS模板引擎，特点如下：
+根据路劲渲染页面
+面向对象的模板继承，页面复用
+动态页面
+快速上手
+功能强大

语法使用

swig的变量

1
2
3
{{ foo.bar }}
{{ foo['bar'] }}
//如果变量未定义，输出空字符。

swig的标签

extends

使当前模板继承父模板，必须在文件最前 参数： file
父模板相对模板 root 的相对路径,后面例子介绍如何实现模板继承。

block

定义一个块，使之可以被继承的模板重写，或者重写父模板的同名块 参数： name
块的名字，必须以字母数字下划线开头

parent

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

include

包含一个模板到当前位置，这个模板将使用当前上下文 参数： file
包含模板相对模板 root 的相对路径

1
2
3
4

{% include "a.html" %}
{% include "template.js" %} 
//将引入的文件内容放到被引用的地方

raw

停止解析标记中任何内容，所有内容都将输出 参数： file
父模板相对模板 root 的相对路径

for

遍历对象和数组 参数：x 当前循环迭代名
in: 语法标记 y: 可迭代对象。

1
2
3
4

{% for x in y %}
<p> {{ x }}</p>
{% endfor %}

if

条件语句,参数：
接受任何有效的 JavaScript条件语句

1
2
3
4
5
6
7
8

{% if foo %}
    <p> foo is true </p>
{% else if "foo" in bar %}
    <p> foo in bar</p>
{% else %}
    <p> fail </p>
{% endif %}

autoescape

改变当前变量的自动转义行为 参数： on
当前内容是否转义 type: 转义类型，js 或者 html，默认 html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input  = '<p>Hello "you" & \'them\'</p>';

{% autoescape false %}
    {{ input }}
{% endautoescape %}

// <p>Hello "you" & 'them'</p>
{% autoescape true %}
    {{ input }}
{% endautoescape %}
//&lt;p&gt;Hello &quot;you&quot; &amp; &#39;them&#39; &lt;/p&gt;
{% autoescape true "js" %}
    {{ input }}
{% endautoescape %}

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

set

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

1
2
3
4
{% set foo = [0, 1, 2, 3, 4, 5,6] %}
{% for num in foo %}
    <li>{{ num }}</li>
{% endfor %}

模板继承

Swig 使用 extends 和 block 来实现模板继承
example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//layout.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}My Site{% endblock %}</title>

    {% block head %}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//index.html


{% extends './layout.html' %}

{% block title %}My Page{% endblock %}

{% block head %}
{% parent %}

{% endblock %}

{% block content %}
    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <script>

        //require('pages/index/main');
    </script>
{% endblock %}

swig模板经过编译后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Page</title>
<body>

    <p>This is just an awesome page.</p>
    <h1>hello,lego.</h1>
    <p>test</p>
    <script>
        //require('pages/index/main');
    </script>
</body>
</html>

总结

通过简单的了解，我们发现swig非常用上手，同时功能强大，掌握以上的标签和变量，多多测试和联系，我相信您
很快会掌握其中的技巧。通过简单的标签按你所需要更改你的页面.更多的swig信息了解，请移步”SWIG网站”SWIG网站。
以上部分仅仅是对swig的语法介绍.如果您并不了解哪些swig文件对应的是哪些页面，请继续 关注”HEXO进阶-SWIG引擎渲染结构”.
本文简单的介绍了关于如何找到你页面对应的SWIG文件。和简单的SWIG引擎模板结构介绍。

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客

看一看，共同关注，共同分享与讨论！