(八)Jinja2——模板继承

书读的越多而不加思考,你就会觉得你知道得很多;而当你读书而思考得越多的时候,你就会越清楚地看到,你知道得很少。

导读:本篇文章讲解 (八)Jinja2——模板继承,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

一、模板继承

通过 extends 参数来实现

{% extends “父模板.html” %}

二、{% block title  %}{% endblock %}

 1.创建:07模板继承.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/child1')
def test1():
    return render_template('child1.html')

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

2.创建父模板:base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title  %}{% endblock %}</title>
</head>
<body>
我是父模板的文字
{% block body %}
{% endblock %}
</body>
</html>

3.创建子模板:child1.html

{% extends "base.html" %}
{% block title %}
我是子模板的标题
{% endblock %}
{% block body %}
我是子模板的body
{% endblock %}

4.运行入口程序:07模板继承.py,然后地址栏输入:http://127.0.0.1:5000/child1

(八)Jinja2——模板继承

后一句话是子模板中的内容,如果继承父模板后希望网页显示其他信息,通过 block 参数来实现。

子模板{% block title  %}内容{% endblock %}中的内容将替换父模板{% block title  %}内容{% endblock %}之中的内容。

三、项目演示

1、入口程序

07模板继承.py

from flask import Flask,render_template

app = Flask(__name__)

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

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

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

 2、父模板

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title  %}{% endblock %}</title>
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
</ul>
{% block body %}
{% endblock %}
<footer>这是底部的标签</footer>
</body>
</html>

3、子模板

child1.html

{#通过extends参数实现#}
{% extends "base.html" %}

{% block title %}
我是child1的标题
{% endblock %}

{% block body %}
我是child1的body
{% endblock %}

child2.html

{% extends "base.html" %}

{% block title %}
我是child2的标题
{% endblock %}

{% block body %}
我是child2的body
{% endblock %}

4、启动入口程序,地址栏输入地址

(八)Jinja2——模板继承

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/122918.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!