Compile a front-end template tutorial for the Python web framework

This article describes how to compile a front-end template for the Python web framework. the sample code is based on Python2.x. For more information, see, however, the page effect is certainly not satisfactory.

For complex HTML front-end pages, we need a basic CSS framework to complete the page layout and basic style. In addition, jQuery is also essential to operate the DOM JavaScript library.

From scratch, it is better to write CSS directly from an existing functional CSS framework. There are many CSS frameworks to choose from. We chose the powerful CSS framework of uikit this time. It has a complete responsive layout, a beautiful UI, and a rich array of HTML components, allowing us to easily design beautiful and concise pages.

You can download the package resource files from the uikit homepage.

All static resource files are stored in the www/static directory and classified 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 there must be more than one page on the front-end page, each page has the same header and footer. If each page is an independent HTML template, we need to modify each template when modifying the header and footer, which is obviously inefficient.

The common template engine has taken into account the reuse of repeated HTML parts on the page. Some templates split the page into three parts by using include:

  <% include file="inc_header.html" %>  <% include file="index_body.html" %>  <% include file="inc_footer.html" %>

In this example, the same metadata inc_header.html and inc_footer.html can be shared.

However, the include method is not conducive to the maintenance of the overall structure of the page. The jinjia2 template has another "inheritance" method, which makes it easier to reuse the template.

The "inherit" template is implemented by compiling a "parent template" to define some replaceable blocks in the parent template ). Then, write multiple "sub-templates". each sub-template can only replace the block defined by the parent template. For example, define a simple parent template:

       {% Block title %} a block named title is defined here {% endblock %}    {% Block content %} a block named content is defined here {% endblock %}

For the sub-template a.html, you only need to replace the title and content of the parent template:

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

The sub-template B .html is processed as follows:

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

In this way, once the overall layout and CSS style of the parent template are defined, it is very easy to compile the subtemplate.

In this way, we can use the uikitcssframework to write the parent template javasbasecompute.html:

  
 {% Block meta %}
 {% Endblock %}{% Block title % }? {% Endblock %}-Awesome Python Webapp