文 / 秦未
模板繼承應(yīng)該說每個模板引擎都有棺蛛，主要目的是增加HTML代碼復(fù)用性怔蚌，減少代碼冗余。
1.簡單模板繼承
我們將about.html復(fù)制一份取名base.html旁赊，現(xiàn)在我們看到的base.html內(nèi)容是這樣的：
{#/app/templates/blog/about.html#}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>關(guān)于頁面</title>
</head>
<body>
{{ text|safe }}
{{ body|md|safe }}
{#{{ read_md('md.md')|md|safe }}#}
</body>
</html>
模板繼承的語法：
在私有的地方桦踊，如body標(biāo)簽內(nèi)的內(nèi)容寫上：
{% block name %}
{% endblock name %}
這代表占位，所以我們修改一下base.html：
{#/app/templates/blog/base.html#}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>關(guān)于頁面</title>
</head>
<body>
{% block name %}
{% endblock %}
</body>
</html>
然后修改about.html：
{#/app/templates/blog/about.html#}
{#繼承模板 路徑#}
{% extends 'blog/base.html' %}
{% block name %}
{#私有內(nèi)容#}
{{ text|safe }}
{{ body|md|safe }}
{#{{ read_md('md.md')|md|safe }}#}
{% endblock %}
ps：模板繼承支持嵌套使用终畅。
運(yùn)行看看：
查看源代碼籍胯，發(fā)現(xiàn)與之前并無差別，但盡量少用模板中的注釋离福，因?yàn)闀a(chǎn)生空白杖狼，影響美觀。
繼承模板中外部變量的引用：
由于 black 代表一個封閉區(qū)域妖爷，所以直接在里面引用變量會報錯本刽，我們只需要在{% block name %} 里面加一個參數(shù) -- scoped，記住在繼承模板（base.html）內(nèi)加赠涮。
2.include（包含）組件
有時候我們需要導(dǎo)入一個小的組件在一個頁面中子寓，比如首頁和關(guān)于頁內(nèi)引用的css文件不同，我們不可能把black寫那么多笋除，這個時候我們就需要include來幫忙了斜友。
由于我示例的項(xiàng)目并不包含一個真實(shí)的HTML模板，所以垃它，這里我只把 “<title>關(guān)于頁面</title>”作為演示鲜屏，原理一樣的。
首先我們把base.html內(nèi)的<title>關(guān)于頁面</title>剪切出來国拇，新建立一個 _about.html 文件洛史，復(fù)制到這個文件中。
再將原來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>
運(yùn)行后酱吝，查看并無差別也殖，更多組合使用，請自行嘗試务热。
3.模板文件中的宏
我們先修改index.html內(nèi)容：
<!--/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函數(shù)一樣的）
用法其實(shí)也很簡單：
在模板中寫：{{ input('username') }}忆嗜，這樣就導(dǎo)入了一個 input 標(biāo)簽了。
但如果同時引用很多個宏崎岂，豈不是很亂捆毫？！
對于這個問題 jinja2也替我們考慮到了冲甘，我們只要把宏抽取出來放在一個html文件里绩卤，然后在用的模板中導(dǎo)入就好了途样。
{#/app/templates/blog/_macro.html#}
{% macro input(name,value='',type='text',size=20) %}
<input type="{{ type }}"
name="{{ name }}"
value="{{ value }}"
size="{{ size }}"
/>
{% endmacro %}
然后修改一下原模板內(nèi)容：
<!--/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 為取別名，作為對象引用濒憋。
使用時函數(shù)名前綴加別名：{{ macro.input('username') }}娘纷。
今天就說這么多。
---end---
