Flask学习日志（八） - 模板继承、包含与宏

每日壁纸.jpg

文 / 秦未

模板继承应该说每个模板引擎都有，主要目的是增加HTML代码复用性，减少代码冗余。

1.简单模板继承

我们将about.html复制一份取名base.html，现在我们看到的base.html内容是这样的：

{#/app/templates/blog/about.html#}



    
    



{{ text|safe }}
{{ body|md|safe }}
{#{{ read_md('md.md')|md|safe }}#}

模板继承的语法：

在私有的地方，如body标签内的内容写上：

{% block name %}
{% endblock name %}

这代表占位，所以我们修改一下base.html：

{#/app/templates/blog/base.html#}



    
    



{% block name %}
{% endblock %}

然后修改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模板，所以，这里我只把 “”作为演示，原理一样的。

首先我们把base.html内的剪切出来，新建立一个 _about.html 文件，复制到这个文件中。

再将原来base.html缺少的部分填上：{% include 'blog/_about.html' %}：

{#/app/templates/blog/base.html#}



    
    {% include 'blog/_about.html' %}



{% block name scoped%}
{% endblock name %}

运行后，查看并无差别，更多组合使用，请自行尝试。

3.模板文件中的宏

我们先修改index.html内容：

{% extends 'blog/base.html' %}

{% block name %}
    {% macro input(name,value='',type='text',size=20) %}
        
    {% endmacro %}

    
{{ text }}
    about
    login
{% endblock %}

其中 macro 就是定义了一个宏（和Python函数一样的）

用法其实也很简单：

在模板中写：{{ input('username') }}，这样就导入了一个 input 标签了。

但如果同时引用很多个宏，岂不是很乱？！

对于这个问题 jinja2也替我们考虑到了，我们只要把宏抽取出来放在一个html文件里，然后在用的模板中导入就好了。

{#/app/templates/blog/_macro.html#}
{% macro input(name,value='',type='text',size=20) %}
    
{% endmacro %}

然后修改一下原模板内容：

{% extends 'blog/base.html' %}

{% import 'blog/_macro.html' as macro %}

{% block name %}

    
{{ text }}
    about
    login

    {{ macro.input('username') }}
{% endblock %}

{% import 'blog/_macro.html' as macro %} 中 as 为取别名，作为对象引用。

使用时函数名前缀加别名：{{ macro.input('username') }}。

今天就说这么多。

---end---