Tutorial on writing a front-end template for a Python web framework

Although we ran through one of the simplest MVC, the page effect was certainly not satisfying.

For complex HTML front-end pages, we need a basic set of CSS frameworks to complete the layout and basic styling of the page. In addition, jquery is an essential JavaScript library for manipulating the DOM.

Writing a CSS from scratch is not as straightforward as starting with a fully functional CSS framework. There are many CSS frameworks to choose from. This time we chose to uikit this powerful CSS framework. It has a well-designed responsive layout, a beautiful UI, and a rich set of HTML components, so we can easily design beautiful and concise pages.

You can download the packaged resource file from the Uikit home page.

All static resource files are placed in the Www/static directory and categorized by Category:

The code is as follows:

static/
+-css/
| +-addons/
| | +-Uikit.addons.min.css
| | +-Uikit.almost-flat.addons.min.css
| | +-Uikit.gradient.addons.min.css
| +-Awesome.css
| +-Uikit.almost-flat.addons.min.css
| +-Uikit.gradient.addons.min.css
| +-Uikit.min.css
+-fonts/
| +-Fontawesome-webfont.eot
| +-Fontawesome-webfont.ttf
| +-Fontawesome-webfont.woff
| +-FONTAWESOME.OTF
+-js/
+-Awesome.js
+-Html5.js
+-Jquery.min.js
+-Uikit.min.js

Because the front-end page must be more than the first page, each page has the same header and footer. If each page is a separate HTML template, then when we modify the header and footer, we need to change each template, which is obviously inefficient.

The common template engine has taken into account the reuse of duplicated HTML parts on the page. Some templates use the include to split a page into three parts:

  <% include file= "inc_header.html"%>  <% include file= "index_body.html"%>  <% include file= "inc_ Footer.html "%>

In this way, the same parts of inc_header.html and inc_footer.html can be shared.

But the include method is not conducive to the maintenance of the overall structure of the page. The jinjia2 template also has another "inheritance" approach, which allows for easier reuse of templates.

The "Inherit" template is done by writing a "parent template" that defines a number of replaceable blocks in the parent template. Then, you write multiple "sub-templates", each of which can replace only blocks defined by the parent template. For example, define one of the simplest parent templates:

 
        {% Block title%} defines a block {% endblock%} named title        {% block content%} This defines a block {% endblock%} named content  

For child template a.html, simply replace the parent template's title and content:

{% extends ' base.html '%} {% block title%} A {% endblock%}{% block content%}
Chapter A
Blablabla ...
{% Endblock%}

For child template b.html, do the following:

{% extends ' base.html '%} {% block title%} B {% endblock%}{% block content%}
Chapter B
 
  
  
  
  
   
   
List 1
  
  
   
   
List 2
 
  
  
{% Endblock%}

This way, once you have defined the overall layout and CSS style of the parent template, it is very easy to write a child template.

Let's write the parent template __base__.html by Uikit this CSS framework:

  
 
  
 {% block meta%}
 {% Endblock%}<title>{% block title%}? {% Endblock%}-Awesome Python Webapp</title>  
 
  
   
 
  
   
 
  
 {% block Beforehead%}
 {% Endblock%}  
 
  
   Awesome
   
 
        
  
    
  
Log
        
  
    
  
Tutorial
        
  
    
  
Source
      
 
   
 
              
 
   
 

  
    {% if user%}
    
  
 {{User.Name}} 
   
 
    
Log out
 
   
 
{% Else%}
    
  
Landing
          
  
    
  
Registered
{% endif%}
   
 
             

  
             
 {% block content%} {% Endblock%}
                           
                                                
        
Powered by Awesome Python Webapp. copyright©2014. [Manage]
        
Www.liaoxuefeng.com. All rights reserved.
                    

Several block functions defined by __base__.html are as follows:

Use for sub-pages to define some meta-feeds such as RSS feeds:

{% block meta%} ... {% Endblock%}

Overwrite the title of the page:

{% block title%} ... {% Endblock%}

A child page can insert JavaScript code before the label is closed:

{% block Beforehead%} ... {% Endblock%}

Content layout and contents of child pages:

{% block content%} ... {% Endblock%}

We transform the homepage, inherit a blogs.html from __base__.html:

{% extends ' __base__.html '%} {% block title%} log {% Endblock%}{% block content%}    {% for blog in blogs%}          
{{Blog.name}}
      
Posted in {{Blog.created_at}}
      
{{Blog.summary}}
      
        
 
    {% ENDFOR%}              
Friendship Link
      
 
  
  
        
  
   
   
Programming
        
  
   
   
Reading
        
  
   
   
Python Tutorials
        
  
   
   
Git tutorials
      
 
  
  
      {% Endblock%}

Accordingly, the processing function of the homepage URL is updated as follows:

@view (' blogs.html ') @get ('/') def index ():  blogs = Blog.find_all ()  # Find logged in User: User  = User.find_first (' Where Email= ', ' admin@example.com ')  return Dict (Blogs=blogs, User=user)

To manually insert some data into MySQL's blogs table, we can see a real home page. But the creation date of the blog shows a floating-point number because it is rendered by this template:

Posted in {{Blog.created_at}}

The workaround is to convert a floating-point number into a date string by using the JINJA2 filter (filter). Let's write a datetime filter that uses the following in the template:

Posted in {{Blog.created_at|datetime}}

The filter needs to be set when initializing the JINJA2. Modify the wsgiapp.py related code as follows:

# wsgiapp.py:...# definition Datetime_filter, input is T, output is Unicode string: def datetime_filter (t):  delta = Int (time.time ()-T)  If Delta <:    return u ' 1 minutes ago '  if Delta < 3600:    return u '%s minutes ago '% (Delta//)  if Delta < 86400:< C6/>return u '%s hours ago '% (Delta/3600)  if Delta < 604800:    return u '%s days ago '% (Delta//86400)  dt = datetime.fr Omtimestamp (t)  return U '%s year%s month%s day '% (Dt.year, Dt.month, dt.day) Template_engine = Jinja2templateengine ( Os.path.join (Os.path.dirname (Os.path.abspath (__file__)), ' Templates ') # Add filter to the Jinjia2,filter name called DateTime, The filter itself is a function object: Template_engine.add_filter (' datetime ', datetime_filter) Wsgi.template_engine = Template_engine

Now, the perfect homepage is displayed as follows:

