Flask 学习系列---Jinjia2 模板继承

Posted 2020-10-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flask 学习系列---Jinjia2 模板继承相关的知识，希望对你有一定的参考价值。

1.基模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基模板</title>
    <style type="text/css">
        /* DIVCSS5-CSS初始化模板-www.divcss5.com */
        body, div, ul, li {
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px "\\5B8B\\4F53", Arial, Helvetica, sans-serif
        }

        /* \\5B8B\\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
        ol, ul, li {
            list-style: none
        }

        img {
            border: 0;
            vertical-align: middle
        }

        body {
            color: #000000;
            background: #FFF;
            text-align: center
        }

        .clear {
            clear: both;
            height: 1px;
            width: 100%;
            overflow: hidden;
            margin-top: -1px
        }

        a {
            color: #000000;
            text-decoration: none
        }

        a:hover {
            color: #BA2636
        }

        .red, .red a {
            color: #F00
        }

        .lan, .lan a {
            color: #1E51A2
        }

        .pd5 {
            padding-top: 5px
        }

        .dis {
            display: block
        }

        .undis {
            display: none
        }

        ul#nav {
            width: 100%;
            height: 60px;
            background: #00A2CA;
            margin: 0 auto
        }

        ul#nav li {
            display: inline;
            height: 60px
        }

        ul#nav li a {
            display: inline-block;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            color: #FFF;
            font-family: "\\5FAE\\8F6F\\96C5\\9ED1";
            font-size: 16px
        }

        ul#nav li a:hover {
            background: #0095BB
        }


    </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div>
    {% block conent %}{% endblock %}

</div>
</body>
</html>

block 是子模板关键字，content在子模板块名称。

不能砸同一个模板中定义多个同名的block标签。

子模板

{% extends "base.html" %}
{% block conent %}
    <p class="import">
        我是在子模板中
    </p>
{% endblock %}

extends 继承父模板的关键字，该标签必须是子模板中的第一个标签。

渲染子模板的python代码：

@app.route("/sub")
def subhtml():
   return render_template("sub.html",site_name="繼承測試")

运行截图：

渲染后子页面的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基模板</title>
    <style type="text/css">
        /* DIVCSS5-CSS初始化模板-www.divcss5.com */
        body, div, ul, li {
            margin: 0;
            padding: 0;
            font-style: normal;
            font: 12px/22px "\\5B8B\\4F53", Arial, Helvetica, sans-serif
        }

        /* \\5B8B\\4F53 代表 宋体，更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */
        ol, ul, li {
            list-style: none
        }

        img {
            border: 0;
            vertical-align: middle
        }

        body {
            color: #000000;
            background: #FFF;
            text-align: center
        }

        .clear {
            clear: both;
            height: 1px;
            width: 100%;
            overflow: hidden;
            margin-top: -1px
        }

        a {
            color: #000000;
            text-decoration: none
        }

        a:hover {
            color: #BA2636
        }

        .red, .red a {
            color: #F00
        }

        .lan, .lan a {
            color: #1E51A2
        }

        .pd5 {
            padding-top: 5px
        }

        .dis {
            display: block
        }

        .undis {
            display: none
        }

        ul#nav {
            width: 100%;
            height: 60px;
            background: #00A2CA;
            margin: 0 auto
        }

        ul#nav li {
            display: inline;
            height: 60px
        }

        ul#nav li a {
            display: inline-block;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            color: #FFF;
            font-family: "\\5FAE\\8F6F\\96C5\\9ED1";
            font-size: 16px
        }

        ul#nav li a:hover {
            background: #0095BB
        }


    </style>
</head>
<body>
<ul id="nav">
<li><a href="http://www.divcss5.com/">首页</a></li>
<li><a href="http://www.divcss5.com/html/">HTML教程</a></li>
<li><a href="http://www.divcss5.com/rumen/">CSS基础</a></li>
<li><a href="http://www.divcss5.com/css-tool/">CSS开发工具</a></li>
<li><a href="http://www.divcss5.com/css-texiao/">CSS特效</a></li>
<li><a href="http://www.divcss5.com/wenji/">CSS问题</a></li>
</ul>
<div>
    
    <p class="import">
        我是在子模板中
    </p>


</div>
</body>
</html>

以上是关于Flask 学习系列---Jinjia2 模板继承的主要内容，如果未能解决你的问题，请参考以下文章

Flask 学习系列---Jinjia2使用过滤器

jinjia2

flask中jinjia2模板使用详解2

flask中jinjia2模板引擎使用详解2

flask中jinjia2模板引擎详解4

flask中jinjia2模板引擎详解1