Swig学习

swig学习

个人博客有待完善，想写一个相册，和作品集的模板页，可是next主题下模板页的格式是Swig，什么鬼，好吧我不会只能去学习了。╮(╯▽╰)╭

参考文档:

理解

好吧，看完上面三个文档，Swig的基本用法貌似理解了。简单归纳下：

1.变量声明

1	{{ name }}

ps：变量前后要有空格

2.属性

1	{{ student.name }}

当变量属性名中有” - “时，则必须使用[]来访问

1	{{ student['name'] }}

3.模板继承

当然模板继承先有一个父模板，在next主题下应该就是_layout.swig。

我们先定义个模板:

<!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 title”是block标记，之后的子模板中可以复写标记处。“block head”和“block content”(ps：初次报错区，后改成现在这样)同理。

然后写一个index.swig模板:

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

index.swig就继承了layout.swig中的结构，“block content”(ps：初次报错区，后改成现在这样)里的内容就被复写了。

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>

引用了head.html文件的头文件和header.html的导航栏（菜单栏）结构

5.注释

{# 
Comments注释在渲染时将会被忽略，他们在渲染之前就会移除，
所以没人能看到你的注释，除非他们查看你的源代码。
#}

6.import

官方文档的解释：
import：允许引入另一个模板的宏进入当前上下文
个人理解：导入一个模板把它赋值给一个变量，之后在本文档中就可以用该变量代替引入的模板进行操作。

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

7.macro

用户可自定义(包括参数)的代码段如：

{% macro input type name id label value error %}
 <label for="{{ name }}">{{ label }}</label>
 <input type="{{ type }}" name="{{ name }}" id="{{ id }}" value="{{ value }}"{% if error %} class="error"{% endif %}>
{% endmacro %}

然后像下面一样使用：

<div>
    {{ input("text", "fname", "fname", "First Name", fname.value, fname.errors) }}
</div>
<div>
    {{ input("text", "lname", "lname", "Last Name", lname.value, lname.errors) }}
</div>

输出结果：

<div>
    <label for="fname">First Name</label>
    <input type="text" name="fname" id="fname" value="Paul">
</div>
<div>
    <label for="lname">Last Name</label>
    <input type="text" name="lname" id="lname" value="" class="error">
</div>

总结

感觉理解上面常用的七点就基本能看懂swig的模板页面了，至于其他的if else判断for循环等语法与其他语法基本一致，不存在啥看不懂，就此略过。对于函数，过滤器，这种死东西，我信奉的是不会的时候查，比死记硬背效果好。明天可以开始尝试折腾作品集与相册模板页了。

PS

写这篇博文的时候还因为在非代码区用

1	{% block content %}{% endblock %}

类似的代码导致警告报错，“block content”多次定义，使浏览器中页面异常。

另外

1	{% endblock %} //两个空格

因为后面空了两个空格出现找不到“endblock”的错误

再另外
MarkdownPad下代码块一定要用三个 ` 号包围起来，要不然浏览器中会出现莫名其妙的显示问题，比如说相邻的代码块被和并成一个代码块，弄半天。哭啊！┭┮﹏┭┮

至于代码块不能自动换行，只需要在工具——选项——Markdown下Markdown处理器设置为GitHub风格Markdown（离线）即可

1
2
3

MarkdownPad2激活码
邮箱：Soar360@live.com
秘钥：GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

不定时更新