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>

 

posted @ 2017-11-05 15:41  code_dream  阅读(1492)  评论(0)  编辑  收藏  举报