Template web --tornado framework framework inherited engine

Inherited template using the template can be reused the same structure, the code amount can be greatly reduced

Starter examples

A, demo directory structure

annotation:

master.html template content, is index.html, account.html references

Second, the file code

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<! - customized content, and placeholder name ->
 30          {tm_content% Block% }
 31 is          {% End% }
 32      </ div>
 33 is      <div class = " Page-footer " > </ div>
 34 is <! - js customized file location, name, and point ->
 35      {tm_js% Block% }
 36      {% End% }
 37 [  
38 is <! - custom css, and placeholder name ->
 39      { Block tm_css%% }
 40      {% End% }
 41 is </ body>
 42 is </ HTML>

2.2、form.html

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

2.3、account.html

. 1 {the extends% " ../template/master.html " % }
 2  
. 3 <-! Custom details css ->
 . 4 {tm_css% Block% }
 . 5      <Script type = " text / css " >
 . 6          . page- content {
 . 7              background- Color: AliceBlue;
 . 8              font- size: 20px;
 . 9          }
 10      </ Script>
 . 11 {% End% }
 12 is  
13 is <! - customize contents page-content ->
 14 { Block tm_content%% }
15      <P> This is my Account </ P>
 16 {% End% }
 . 17  
18 is <-! Js Custom File ->
 . 19 {tm_js% Block% }
 20 is      <Script type = " text / JavaScript " >
 21 is          the console.log ( " this is my Account " )
 22 is      </ Script>
 23 is {%} End%

2.4、index.html

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

<! - corresponding to the specific content custom css -> 
{ % Block tm_css% }
     <style type = " text / css " > 
        .page - Content {
            background-color: cornflowerblue;
        }
    </style>
{% end %}

<! - custom content page-content -> 
{ % Block tm_content% }
     <P> This is the home system </ P> 
    { % the include " ../include/form.html " % }
    {%include "../include/form.html" %}
{% end %}

<! - js custom content -> 
{ % Block tm_js% }
     <Script type = " text / JavaScript " > 
        the console.log ( " This is the home system " )
     </ 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()

Three, demo exemplary effect

3.1、http://127.0.0.1/index

3.2、http://127.0.0.1/account

Detailed analysis

From the results, run the same two pages of the main structure, just inside it contains cssspecific style, as well as the specific content of jsdifferent files
To inherit the template file we want to use in the first line of the current file write {%extends "../template/master.html"%}, here represents the current file master.htmlto render
In the master.htmldocument {%block tm_css%}{%end%}made quite a placeholder with a specific content to be written later, and namedtm_css

Template web --tornado framework framework inherited engine

Guess you like