flask模版继承和block

Posted 2020-10-24 FRESHMANS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flask模版继承和block相关的知识，希望对你有一定的参考价值。

模版继承和block的目的就是为了减少前端代码量

flask_ones.py

#encoding:utf-8
from flask import Flask,url_for,redirect,render_template

app = Flask(__name__)

@app.route(\'/\')
def index():
    return render_template(\'index.html\')

@app.route(\'/login/\')
def login():
    return render_template(\'login.html\')


if __name__ == \'__main__\':
    app.run(debug=True)

html文件

#################### index.html ##################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            background:rebeccapurple;
            height:65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;

            padding:0 10px;
            line-height: 65px;
        }

        ul li a{
            color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发布问答</a></li>
        </ul>
    </div>
    <h1>这是index页面</h1>
</body>
</html>

#####################login.html###################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <style>
        .nav{
            background:rebeccapurple;
            height:65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;

            padding:0 10px;
            line-height: 65px;
        }

        ul li a{
            color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发布问答</a></li>
        </ul>
    </div>
　　 <h1>这是login页面</h1>

</body>
</html>

对比index.html和login.html的代码发现，除了红色的代码部分，其余代码均一样，而如果有其他更多类似的页面，会加大代码的量，因此引出以下的模版继承和block

语法：

{% extends "base.html" %}

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

所以以上代码简化为：

同级目录新建一个common.html，将相同的代码部分通过继承带进去，如下：

common.html(公共代码部分)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            background:rebeccapurple;
            height:65px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            list-style: none;

            padding:0 10px;
            line-height: 65px;
        }

        ul li a{
            color: white;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发布问答</a></li>
        </ul>
    </div>
    {% block main %}

    {% endblock %}

</body>
</html>

此时index.html和login.html代码为:

#index.html

{% extends "base.html" %}　　　　　　#代表继承base.html

{% block main %}　　　　　　　　　　　　　　　　#这里的main要与base.html里blcok的设定的名字相同　　
    <h1>这是index页面</h1>　　　　　　　　　　　#将这里的内容传到base.html的block下，并在本文件里应用
{% endblock %}


#login.html
{% extends "base.html" %}

{% block main %}
    <h1>这是登陆页面</h1>
{% endblock %}

以上是关于flask模版继承和block的主要内容，如果未能解决你的问题，请参考以下文章

12. 爬虫训练场项目，jinja2 模板继承，项目继续迭代

在Flask中使用模版

Django-模板的继承，extends和block一看就懂

Django框架模版继承与组件使用

jinja2-模版继承

Flask之模板之宏继承包含