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

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

入门实例

一、demo目录结构

注解：

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

二、各文件代码

2.1、master.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Master</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         .page-header{
12             height: 48px;
13             background-color: aqua;
14         }
15         .page-content{
16             height: 300px;
17             background-color: bisque;
18         }
19         .page-footer{
20             height: 30px;
21             background-color: aqua;
22         }
23     </style>
24 
25 </head>
26 <body>
27     <div class="page-header"></div>
28     <div class="page-content">
29 <!--        自定义的内容，命名并占位-->
30         {% block tm_content %}
31         {% end %}
32     </div>
33     <div class="page-footer"></div>
34 <!--    自定义的js文件位置，命名并点位-->
35     {% block tm_js %}
36     {% end %}
37 
38 <!--    自定义css，命名并占位-->
39     {% block tm_css %}
40     {% end %}
41 </body>
42 </html>

2.2、form.html

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

2.3、account.html

 1 {% extends "../template/master.html" %}
 2 
 3 <!--自定义css具体内容-->
 4 {% block tm_css %}
 5     <script type="text/css">
 6         .page-content{
 7             background-color: aliceblue;
 8             font-size: 20px;
 9         }
10     </script>
11 {% end %}
12 
13 <!--自定义page-content中的内容-->
14 {% block tm_content %}
15     <p>这是我的account</p>
16 {% end %}
17 
18 <!--自定义js文件-->
19 {% block tm_js %}
20     <script type="text/javascript">
21         console.log("这是我的account")
22     </script>
23 {% 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

 1 #!/usr/bin/env python
 2 # -*- coding: utf-8 -*-
 3 # @Time    : 2019/12/5 23:41
 4 # @Author  : yusheng_liang
 5 # @Site    : 
 6 # @File    : start.py
 7 import tornado.web
 8 import tornado.ioloop
 9 
10 class IndexHandle(tornado.web.RequestHandler):
11     def get(self, *args, **kwargs):
12         self.render("extend/index.html")
13 
14 class AccountHandle(tornado.web.RequestHandler):
15     def get(self, *args, **kwargs):
16         self.render("extend/account.html")
17 
18 if __name__ == "__main__":
19     CONTENTS_LIST = []
20     settings = {
21         'template_path': 'views',
22     }
23 
24     application = tornado.web.Application([
25         (r"/index", IndexHandle),
26         (r"/account", AccountHandle),
27     ], **settings)
28 
29     application.listen(80)
30     tornado.ioloop.IOLoop.instance().start()

三、demo效果示例

3.1、http://127.0.0.1/index

3.2、http://127.0.0.1/account

详解分析

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

来源：https://www.cnblogs.com/june-L/p/11992903.html

标签

tornado

css框架

框架网页

css

css样式