Flask-模版继承

Flask中的模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父模板中，并且父模板通过定义block给子模板开一个口，子模板根据需要，再实现这个block，假设现在有一个base.html这个父模板

from flask import Flask,render_template

# static_folder="" 修改static 目录位置
app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True

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

@app.route("/list/")
def list_article():
    return render_template("list.html")


if __name__ == '__main__':
    app.run(debug=True, port=7000)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>
    <title> {% block title %}
    {% endblock %}</title>
</head>
<body>
    {% block header %}
        <ul>
            <li>首页</li>
            <li>课程详情</li>
            <li>视频教程</li>
            <li>关于我们</li>
        </ul>
    {% endblock%}

    {% block content %}
        <h1>这是首页</h1>
    {% endblock%}

    {% block footer %}
    <div class="footer">
        这是网站底部
    </div>
    <!-- 可以嵌套 但是不能重名   -->
    {% block foo %}
        友情链接
    {% endblock %}
    {% endblock %}

</body>
</html>

以上父模板中，抽取了所有模板都需要用到的元素html、body等，并且对于一些所有模板都要用到的样式文件style.css也进行了抽取，同时对于一些子模板需要重写的地方，比如title、head、body都定义成了block，然后子模板可以根据自己的需要，再具体的实现。

子模版index.html

{% extends 'base.html' %}
<!-- 不能多继承 -->

{% block title %}
    这就是首页

{% endblock %}

<!--重写父模板中的block-->
{% block content %}
<img src="{{ url_for('static',filename='images/demo.jpg') }}" alt="">
    <!-- 调用父模板中的block  -->
    {{ super() }}
    这是子模板的首页
    <p>今天比昨天更优秀</p>
{% endblock%}

{% block foo %}
    foo
{% endblock %}

<!--自己写标签 -->
<!--自己定义的block 不能显示-->
{% block demo %}
    <p>这是我自己定义的P标签</p>
{% endblock%}
<p>这是我自己定义的P标签</p>

⾸先第⼀⾏就定义了⼦模板继承的⽗模板，并且可以看到⼦模板实现了title 这个block，并填充了⾃⼰的内容，再看head这个block，⾥⾯调⽤了 super()这个函数，这个函数的⽬的是执⾏⽗模板中的代码，把⽗模板中的内容添加到⼦模板中，如果没有这⼀句，则⽗模板中处在head这个block中的代码将会被⼦模板中的代码给覆盖掉。
另外，模板中不能出现重名的block，如果⼀个地⽅需要⽤到另外⼀个block 中的内容，可以使⽤self.blockname的⽅式进⾏引⽤。

以上示例中h1标签重⽤了title这个block中的内容，⼦模板实现了title 这个block，h1标签也能拥有这个值。
另外，在⼦模板中，所有的⽂本标签和代码都要添加到从⽗模板中继承的 block中。否则，这些⽂本和标签将不会被渲染。

模版list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <script src="{{ url_for('static',filename='js/index.js') }}"></script>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>课程详情</li>
        <li>视频教程</li>
        <li>关于我们</li>
    </ul>

    <h1>这是列表页面</h1>
    <img src="{{ url_for('static',filename='images/demo.jpg') }}" alt="">

    <div class="footer">
        这是网站底部
    </div>

</body>
</html>

Ellen-琳子

发布了118 篇原创文章 · 获赞 0 · 访问量 2660

私信关注

猜你喜欢