当前位置：网站首页>Flask framework learning: template inheritance

Flask framework learning: template inheritance

2022-08-11 05:36:00 【weixin_42576837】

What is template inheritance?？
在我的理解就是：There are definitely many pages in the front-end that have a lot of the same,such as the navigation bar at the top of the page,footer etc. at the bottom,At this time, if every page is rewritten again,会很麻烦,而且也没必要.

Then you can make a template,parent template,Put the same part inside,Different parts use other things to take place first,and then in a different page,Inherit this parent template,Different sections filled with different content.

模板页

First make a template page,The template is like this：
在这里插入图片描述

The same thing up and down,The middle part is different,Different pages inherit this template page,Then fill in the middle with different content.

Two hyperlinks for the navigation bar：

<li><a href="/" >首页</a></li>
<li><a href="/about" >关于我们</a></li>

注意：The jump path here is to specify a route,不是某一个html页面.

The same part of the code is normalhtml代码,Only need to fill the area code written in different：

首先是标题title,Other pages need to inherit the template page,So the title of the template page cannot be written dead,But need dynamic change,So you need to use ablock占位：

写法是这样的,titleThe content in the middle of the label consists of ablock占着,这个block叫做title,名字可以随意,It will be selected by name laterblock来填充.

 <title>{% block title %}{% endblock %}</title>

then the middle area：

<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
不同的部分
<!--In the middle are different parts,用blockoccupy first-->
{% block body %}
{% endblock %}
</div>

这里也有一个block,叫做body.注意：每一个block都需要一个{% endblock %}作为block的结束位置.

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--different page titles,So I need a placeholder,里面的title是名称,可以随意-->
    <title>{% block title %}{% endblock %}</title>
</head>
<body>

<!--相同的部分,导航栏-->
<div style="background-color: beige;height: 200px;width: 300px">
    same navigation bar
<ul>
    <li><a href="/" >首页</a></li>
    <li><a href="/about" >关于我们</a></li>
</ul>
</div>

<div style="background-color:silver;height: 300px;width: 500px;margin: 10px">
<p>不同的部分</p>
<!--In the middle are different parts,用blockoccupy first-->
{% block body %}
{% endblock %}
</div>

<!--相同的部分,页脚-->
<div style="background-color: burlywood;height: 100px;width: 200px">
    <footer style="background-color: darkgray">same footer section</footer>
</div>
</body>
</html>

Pages that inherit templates：`index.html`

Now create a new page:index.html,It inherits the previous template page：

Because it is inherited from the parent template,So first you have to specify which template this template inherits from.{% extends '模板.html' %},Inheritance is called模板.html的页面.Then specify differentblockfill with different content.

<!--What a template inheritance-->
{% extends '模板.html' %}


<!--指定不同的内容,designated astitle的block中的内容-->
{% block title %}
    inherited from the template page 首页
{% endblock %}

<!--designated asbody的block中的内容-->
{% block body %}
    <p>Content in the homepage</p>
{% endblock %}

The route corresponding to this page is/,The corresponding view function is：

#根路径,渲染index.html页面
@app.route('/')
def index():
    return render_template('index.html')

Pages that inherit templates：`about.html`

首先aboutWhen the route corresponding to the page/about,对应的视图函数：

#/about路径,渲染about.html页面
teams = ['小明','小红','小刚']
@app.route('/about')
def about():
#as keyword argumentsteams传递到about.html页面中
    return render_template('about.html',teams = teams)

Here we pass a list of the past,在about.htmlloaded in the page.

about.html

{
    % extends '模板.html' %}

{
    % block title %}
inherited from template page about页面
{
    % endblock %}


{
    % block body %}
<p>about页面中的内容</p>
    <p>
        Our team members have:
        {
    % for name in teams %}	#拿到传递的参数列表,遍历
            <li>{
    {
     name }}</li>
        {
    % endfor %}
    </p>
{
    % endblock %}

对应的py文件：`Template inheritance exercise.py`

from flask import  Flask,render_template
app = Flask(__name__,template_folder='../templates')

#根路径,渲染index.html页面
@app.route('/')
def index():
    return render_template('index.html')


#/about路径,渲染about.html页面
teams = ['小明','小红','小刚']
@app.route('/about')
def about():
    return render_template('about.html',teams = teams)

if __name__ == '__main__':
    app.run()