使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量
入门实例
一、demo目录结构
注解:
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
3.2、http://127.0.0.1/account
详解分析
- 从运行结果来看, 两个网页的主体结构相同, 只是里边包含的
css
具体样式, 具体内容以及js
文件不同 - 要继承模板文件来使用我们要在当前文件首行写上
{%extends "../template/master.html"%}
, 这里表示当前文件以master.html
来进行渲染 - 在
master.html
文件中{%block tm_css%}{%end%}
相当与为后面具体要写入的内容做一个占位符, 并且起名为tm_css