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 "5B8B4F53", Arial, Helvetica, sans-serif
        }

        /* 5B8B4F53 代表 宋体，更多中文字体转 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: "5FAE8F6F96C59ED1";
            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 "5B8B4F53", Arial, Helvetica, sans-serif
        }

        /* 5B8B4F53 代表 宋体，更多中文字体转 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: "5FAE8F6F96C59ED1";
            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>

相关阅读:
easyui dialog 中 panel-body 高度太小出现滚动条的原因
 VS2017 未找到编译器可执行文件 csc.exe
苹果个人开发者账号开发证书申请
 react-native android 报错 error calling Appregistry.runApplication
react-native android 权限问题
 安卓证书生成
 node.js定时任务 node-schedule
node.js 发送邮件
 在移动端点击事件触发时，闪烁并且有灰色背景
 antd-mobile使用报错
原文地址：https://www.cnblogs.com/liuruitao/p/7787587.html