Python Flask 学习笔记(8)--模板继承

客官°小女子只卖身不卖艺 2022-09-12 13:59 176阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 创建项目
 *  3. 创建基模板
 *  4. 继承模板
 *  5. 开发app.py
 *  6. 小结

# 1. 前言 #

静态网页的内容是静态的，所以如果有像导航栏这种每个页面都需要的固定内容，也还是不得不在每个页面编写一遍。

这除了会导致代码非常臃肿，还会让修改变得很繁琐，如果想修改导航中的一个链接，也不得不修改所有包含导航的页面。

使用动态网页技术中的模板，可以轻松的解决这个问题，FLask的模板继承在解决这个问题上更是非常的简洁。

# 2. 创建项目 #

首先创建flask-temp文件夹，用于演示模板继承功能。

在flask-temp下建立templates文件，用于存放网页，flask会自动识别该目录下的网页及网页模板。

# 3. 创建基模板 #

基模板页面用于提取网页中的公共部分，并设定好预留的自定义内容的位置。我们在templates目录下新建base.html代码如下：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        
        <title>
            {% block title %}
            {% endblock %}
        </title>
    </head>
    
    <body>
        
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">新闻中心</a>
                <a href="#">产品中心</a>
                <a href="#">联系我们</a>
            </li>
        </ul>
        
        {% block content %}
        {% endblock %}
    </body>
    
    </html>

解释下，除了`{%%}`包裹的部分，都是固定的内容；而`{%%}`包裹的部分，是预留的插入位置，也就是说其他页面继承了基模板页面后，会继承固定内容，只需要完善预留的插入位置即可。

# 4. 继承模板 #

接下来，我们可以开发一个新闻中心页面news.html，通过继承base.html来自动生成固定部分，我们仅仅需要在news.html中完善预留插入位置的内容。

{% extends 'base.html' %}
    
    {% block title %}
    新闻中心
    {% endblock %}
    
    {% block content %}
    <h1>新闻中心</h1>
    <p>
        这里是新闻中心页面
    </p>
    {% endblock %}

# 5. 开发app.py #

在flask-demo文件夹下新建app.py，并编写代码如下：

from flask import Flask, render_template
    app = Flask(__name__)
    
    
    @app.route('/news')
    def news():
        return render_template('news.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

所以当项目启动后，访问`/news`路径，即可访问到news.html网页，而该网页继承了base.html，所以python即可根据模板继承的规则渲染news.html然后返回给浏览器。

浏览\`http://127.0.0.1:5000/news’，效果如下，可见固定部分已经继承成功！  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 6. 小结 #

在JSP、ASP.NET中，均有相关的模板继承复用的机制，但是Flask的实现可以说足够简单了。

上手简单，易用，强烈推荐！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/73f82074e5334a5fb208d9073fdcb59e.png