web框架--tornado框架之模板引擎继承

KarlDoenitz

2019-12-06

关注关注

使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量

入门实例

一、demo目录结构

web框架--tornado框架之模板引擎继承

注解：

master.html为模板内容，被index.html，account.html引用

二、各文件代码

2.1、master.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Master</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page-header{
            height: 48px;
            background-color: aqua;
        }
        .page-content{
            height: 300px;
            background-color: bisque;
        }
        .page-footer{
            height: 30px;
            background-color: aqua;
        }
    </style>

</head>
<body>
    <div class="page-header"></div>
    <div class="page-content">
<!--        自定义的内容，命名并占位-->
        {% block tm_content %}
        {% end %}
    </div>
    <div class="page-footer"></div>
<!--    自定义的js文件位置，命名并点位-->
    {% block tm_js %}
    {% end %}

<!--    自定义css，命名并占位-->
    {% block tm_css %}
    {% end %}
</body>
</html>

2.2、form.html

<form>
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

2.3、account.html

{% extends "../template/master.html" %}

<!--自定义css具体内容-->
{% block tm_css %}
    <script type="text/css">
        .page-content{
            background-color: aliceblue;
            font-size: 20px;
        }
    </script>
{% end %}

<!--自定义page-content中的内容-->
{% block tm_content %}
    <p>这是我的account</p>
{% end %}

<!--自定义js文件-->
{% block tm_js %}
    <script type="text/javascript">
        console.log("这是我的account")
    </script>
{% end %}

2.4、index.html

{% extends "../template/master.html"%}

<!--对应的自定义css具体内容-->
{% block tm_css %}
    <style type="text/css">
        .page-content{
            background-color: cornflowerblue;
        }
    </style>
{% end %}

<!--自定义page-content的内容-->
{% block tm_content %}
    <p>这是系统的首页</p>
    {%include "../include/form.html" %}
    {%include "../include/form.html" %}
{% end %}

<!--自定义js的内容-->
{% block tm_js %}
    <script type="text/javascript">
        console.log("这是系统的首页")
    </script>
{% end %}

2.5、start.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2019/12/5 23:41
# @Author  : yusheng_liang
# @Site    : 
# @File    : start.py
import tornado.web
import tornado.ioloop

class IndexHandle(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render("extend/index.html")

class AccountHandle(tornado.web.RequestHandler):
    def get(self, *args, **kwargs):
        self.render("extend/account.html")

if __name__ == "__main__":
    CONTENTS_LIST = []
    settings = {
        ‘template_path‘: ‘views‘,
    }

    application = tornado.web.Application([
        (r"/index", IndexHandle),
        (r"/account", AccountHandle),
    ], **settings)

    application.listen(80)
    tornado.ioloop.IOLoop.instance().start()

三、demo效果示例

3.1、http://127.0.0.1/index

web框架--tornado框架之模板引擎继承

3.2、http://127.0.0.1/account

web框架--tornado框架之模板引擎继承

详解分析

从运行结果来看, 两个网页的主体结构相同, 只是里边包含的css具体样式, 具体内容以及js文件不同
要继承模板文件来使用我们要在当前文件首行写上{%extends "../template/master.html"%} , 这里表示当前文件以master.html来进行渲染
在master.html文件中{%block tm_css%}{%end%}相当与为后面具体要写入的内容做一个占位符, 并且起名为tm_css

tornado 框架