首页 > 其他 > 详细

flask模版继承和block

时间:2018-02-11 23:32:37      阅读:462      评论:0      收藏:0      [点我收藏+]

 

模版继承和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

原文:https://www.cnblogs.com/FRESHMANS/p/8443335.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!