每日壁纸.jpg
文 / 秦未
模板继承应该说每个模板引擎都有，主要目的是增加HTML代码复用性，减少代码冗余。
1.简单模板继承
我们将about.html复制一份取名base.html，现在我们看到的base.html内容是这样的：
{#/app/templates/blog/about.html#}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于页面</title>
</head>
<body>
{{ text|safe }}
{{ body|md|safe }}
{#{{ read_md('md.md')|md|safe }}#}
</body>
</html>
模板继承的语法：
在私有的地方，如body标签内的内容写上：
{% block name %}
{% endblock name %}
这代表占位，所以我们修改一下base.html：
{#/app/templates/blog/base.html#}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于页面</title>
</head>
<body>
{% block name %}
{% endblock %}
</body>
</html>
然后修改about.html：
{#/app/templates/blog/about.html#}
{#继承模板 路径#}
{% extends 'blog/base.html' %}
{% block name %}
{#私有内容#}
{{ text|safe }}
{{ body|md|safe }}
{#{{ read_md('md.md')|md|safe }}#}
{% endblock %}
ps：模板继承支持嵌套使用。
运行看看：
运行状态.png
查看源代码，发现与之前并无差别，但尽量少用模板中的注释，因为会产生空白，影响美观。
继承模板中外部变量的引用：
由于 black 代表一个封闭区域，所以直接在里面引用变量会报错，我们只需要在{% block name %} 里面加一个参数 -- scoped，记住在继承模板（base.html）内加。
2.include（包含）组件
有时候我们需要导入一个小的组件在一个页面中，比如首页和关于页内引用的css文件不同，我们不可能把black写那么多，这个时候我们就需要include来帮忙了。
由于我示例的项目并不包含一个真实的HTML模板，所以，这里我只把 “<title>关于页面</title>”作为演示，原理一样的。
首先我们把base.html内的<title>关于页面</title>剪切出来，新建立一个 _about.html 文件，复制到这个文件中。
再将原来base.html缺少的部分填上：{% include 'blog/_about.html' %}：
{#/app/templates/blog/base.html#}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% include 'blog/_about.html' %}
</head>
<body>
{% block name scoped%}
{% endblock name %}
</body>
</html>
运行后，查看并无差别，更多组合使用，请自行尝试。
3.模板文件中的宏
我们先修改index.html内容：
<!--/app/templates/blog/index.html-->
{% extends 'blog/base.html' %}
{% block name %}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"
/>
{% endmacro %}
<h1>{{ text }}</h1>
<a href="{{ url_for('.about') }}">about</a>
<a href="{{ url_for('.login') }}">login</a>
{% endblock %}
其中 macro 就是定义了一个宏（和Python函数一样的）
用法其实也很简单：
在模板中写：{{ input('username') }}，这样就导入了一个 input 标签了。
但如果同时引用很多个宏，岂不是很乱？！
对于这个问题 jinja2也替我们考虑到了，我们只要把宏抽取出来放在一个html文件里，然后在用的模板中导入就好了。
{#/app/templates/blog/_macro.html#}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"
/>
{% endmacro %}
然后修改一下原模板内容：
<!--/app/templates/blog/index.html-->
{% extends 'blog/base.html' %}
{% import 'blog/_macro.html' as macro %}
{% block name %}
<h1>{{ text }}</h1>
<a href="{{ url_for('.about') }}">about</a>
<a href="{{ url_for('.login') }}">login</a>
{{ macro.input('username') }}
{% endblock %}
{% import 'blog/_macro.html' as macro %} 中 as 为取别名，作为对象引用。
使用时函数名前缀加别名：{{ macro.input('username') }}。
今天就说这么多。
---end---
网友评论