Python Flask 编程 | 连载 09 - Jinja2 模板特性

一、模板的宏

宏，相当于函数，可以把常用功能抽取出来实现重用。HTML 中也会出现重复的代码，将重复的 HTML 代码抽取出来就成为模板的宏，模板的宏是可以写在单独的 HTML 文件中。

模板中的宏的定义需要使用到 macro 关键字。

html
复制代码
{% marco 宏的名字%}
<!--HTML代码-->
{% endmarco %}

在 templates 文件夹下创建 marco.html 页面，定义并使用宏。

html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<form action="">
    <!--定义一个宏-->
    {% macro input(name, type='text', value='')%}
        <div>
            <input class="input-control class2" type="{{ type }}" name="{{ name }}" value="{{ value }}">
        </div>
    {% endmacro %}
    
    {#  使用宏  #}
    <p>用户名：{{ input('username', value='admin') }}</p>
    {#  密码 password  #}
    <p>密 码：{{ input('password', type='password') }}</p>

</form>
</body>
</html>

这里通过宏定义了一个 input 输入框，并定义了一些参数以及设置了默认值。

在 app.py 中定义一个视图函数，该视图函数返回 marco.html 页面

python
复制代码
@app.route('/marco')
def marco():
    return render_template('macro.html')

重新启动项目，浏览器访问 /marco。

页面中显示了两个输入框，并且第一个输入框显示了设置的默认值，并且 input 框的文本类型也是通过 type 参数传递的类型。

在项目中并不会把宏的定义的代码和调用代码放在一个文件中，将宏的定义保存在 marco.html 页面中中，新建一个 form.html 并且通过 from ... import ... 来导入定义好的宏。

html
复制代码
<form action="">

    <h2>导入并使用宏创建登录表单</h2>
    {% from 'macro.html' import input %}
   
    Username: {{ input('username', value='stark') }}
    Password: {{ input('password', type='password') }}
</form>

新建一个视图函数 forms，该函数返回 forms.html。

python
复制代码
@app.route('/forms')
def forms():
    return render_template('forms.html')

保存代码，浏览器访问 /forms。

二、模板抽象，继承与包含

模板继承

在项目中每个页面都使用了公共的导航栏和底部栏，引用了公共的 js 和 css 等静态文件，这种情况下就可以使用模板的继承，既可以通过 extends 关键字继承一个基本的页面，这个页面中包含了公共的导航栏、静态文件等，在基本页面中使用 block 关键字来定义需要重写的内容。

继承的实现大概分为三个步骤：

1. 首先在被继承的基本页面中通过 block 关键字定义需要重写的内容
2. 接着在新的页面中使用 extends 关键字来继承基本页面
3. 最后就可以在新的页面中通过 block 重写新的内容
4. 如果有的页面无须重写 block 块的内容，也可以使用 super() 关键字来复用被继承页面中的内容。

在 templates 模板下新建基本页面 base.html，将公共的 html 代码放入 base.html 中，这里通过 block 定义了 title 和 content 两个需要重写的块。

html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    {% block title %}
    <title>Title</title>
    {% endblock %}
</head>
<body>
    <div class="contain">
        <header>
            页面头部
        </header>
        <article>
            {% block content %}
                主体内容
            {% endblock %}
        </article>
        <footer>
            页面底部
        </footer>
    </div>
</body>
</html>

新增 extends.html 并继承 base.html，只需要通过 block 关键字填充中间内容即可

html
复制代码
{% extends 'base.html' %}

{% block title %}
<title>第一个继承实现的页面</title>
{% endblock %}

{% block content %}
    <h2>这是重写了 base.html 中的 content 部分的内容</h2>
{% endblock %}

新增视图函数 extends。

python
复制代码
@app.route('/extends')
def extends():
    return render_template('extends.html')

保存代码，并在浏览器中请求 /extends。

此时如果需要修改样式或者引用的文件，只需要修改 base.html 即可，比如修改 base.html 的 header，在 heade 标签中增加 css 样式。

html
复制代码
<!--其余代码保持不变-->
<style type="text/css">
    div header {
        background-color: rebeccapurple;
    }
</style>

保存代码后，再次访问 /extends。

可以看出 extends.html 页面的头部也随之更改。

当然如果不想重写 base.html 页面中定义的 block 块，也可以使用 super() 关键字来复用 base.html 页面中的内容。

修改 extends.html 页面，复用 base.html 中 content block 块的内容，并增加新的内容。

html
复制代码
<!--其余代码保持不变-->

{% block content %}
    <h2>复用 base.html 中的 content 部分的内容</h2>
    {{ super() }}
    <P> 主体内容 2</P>
    <P> 主体内容 3</P>
{% endblock %}

保存代码后，再次访问 /extends。

base.html 中 content block 块的内容被保留。

模板包含

include 标签

当公共的模块不是所有的页面都会使用，比如导航条，可能只有一半的页面会使用同一个导航条，这是后就可以将这个导航条单独拆出来到一个页面，相当于定义一个接口，当有页面需要使用这个导航条时，可以使用 include 关键字引入。

使用模板包含大概分为几个步骤：

1. 首先将只有部分页面才使用的导航栏单独拆到一个页面中
2. 接着在有需要使用导航栏的页面通过 include 关键字引入

新建一个 side.html 页面，保持只有部分页面使用的导航栏。

html
复制代码
<p>这是一个只有部分页面才使用的导航</p>

在 extends.html 页面中引入这个导航栏，如果页面不需要就可以不引入。

html
复制代码
{% block content %}
    <h2>引入导航栏</h2>
    {% include 'side.html' %}
    <h2>复用 base.html 中的 content 部分的内容</h2>
    {{ super() }}
    <P> 主体内容 2</P>
    <P> 主体内容 3</P>

{% endblock %}

bash
复制代码
保存代码后，再次访问 */extends*。

通过模板的包含引入了在独立页面中定义的导航栏。

继承与包含的区别

继承使用关键字 extends 并使用 block 关键字定义和使用代码块，被继承的页面中包含了所有公共的内容，类似于 Java 中的类或者抽象类，而包含则是使用 include 关键字来引入代码块，相当于接口的定义，并不适用于所有页面，如果有需要可以引入。

这里给大家分享一份Python全套学习资料，包括学习路线、软件、源码、视频、面试题等等，都是我自己学习时整理的，希望可以对正在学习或者想要学习Python的朋友有帮助！

优快云大礼包：全网最全《全套Python学习资料》免费分享🎁

😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓

👉优快云大礼包🎁：全网最全《Python学习资料》免费分享（安全链接，放心点击）👈

​

1️⃣零基础入门

① 学习路线

对于从来没有接触过Python的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

② 路线对应学习视频

还有很多适合0基础入门的学习视频，有了这些视频，轻轻松松上手Python~

③练习题

每节视频课后，都有对应的练习题哦，可以检验学习成果哈哈！

因篇幅有限，仅展示部分资料

2️⃣国内外Python书籍、文档

① 文档和书籍资料

3️⃣Python工具包+项目源码合集

①Python工具包

学习Python常用的开发软件都在这里了！每个都有详细的安装教程，保证你可以安装成功哦！

②Python实战案例

光学理论是没用的，要学会跟着一起敲代码，动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。100+实战案例源码等你来拿！

③Python小游戏源码

如果觉得上面的实战案例有点枯燥，可以试试自己用Python编写小游戏，让你的学习过程中增添一点趣味！

4️⃣Python面试题

我们学会了Python之后，有了技能就可以出去找工作啦！下面这些面试题是都来自阿里、腾讯、字节等一线互联网大厂，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

5️⃣Python兼职渠道

而且学会Python以后，还可以在各大兼职平台接单赚钱，各种兼职渠道+兼职注意事项+如何和客户沟通，我都整理成文档了。


上述所有资料 ⚡️ ，朋友们如果有需要 📦《全套Python学习资料》的，可以扫描下方二维码免费领取 🆓
😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓

👉优快云大礼包🎁：全网最全《Python学习资料》免费分享（安全链接，放心点击）👈

​