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

Source: Internet
Author: User
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:

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.