使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量
入门实例
一、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
时间： 2024-10-07 19:13:01