Using Jinja2 with Flask
Jinja2 is a flexible HTML Template along with with Flask, another commonly used Flask template is Mako.
Install Jinja2
Install with PIP
pip install jinja2Basic Operation
1. Determine whether a variable is set or not
{# user is a variable, and none is not None #}
{% if user is not none %}in the controller class, usually the app.py, you can do:
@app.route('/')
def index():
form = DownloadDataForm(request.form)
return render_template('theme_paper_kit/index.html',
user="User Name")2. Determine an array is not empty
In your jinja template you can write:
{% if ary_users | length > 0 %}Notice: Jinja2 can make use of python's inner-built data types such as list and dictionary
3. Use a For Loop
{% for user in users %}
{{ print user }}
{% endfor %}4. Use if, else and elif
{% if current_user.user_type == 0 %}
{# your code 1 #}
{% elif current_user.user_type == 1 %}
{# your code 2 #}
{% else %}
{# your code 3 #}
{% endif %}5. Jinja 2 template inheritance
Template inheritance is a very important feature in jinja2. With such a feature, one html template can be used as a Parent Class in other programming language. Here is one simple example:
base.html
<html>
<head>
<title>My Application</title>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>index.html
Now index.html can re-use the basic structure from base.html
{% extends "base.html" %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}The above code shows index.html inherits from base.html and rewrite the body part. jinja2 template is quite similar to class that the child template can ONLY extends from ONE parent template.
6. Macro
Jinja2 macro is used as Components in the view. For example, there is always a need for Navigation Bar while building the view which would be used in more than one page. With macro, Navigation Bar can be created a component.
Navigation_bar.html
{% macro nav_render() %}
<div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-danger btn-simple">Home</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">About</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">Products</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">Contact</a>
</li>
</ul>
</div>
{% endmacro %}Such a navigation bar can be used in other template html.
index.html
{% extends "base.html" %}
{% block body %}
{% import 'Navigation_bar.html' as nav_macro %}
{{ nav_macro.nav_render() }}
<h1>Hello, World!</h1>
{% endblock %}And of course, you can pass a variable to macro:
Navigation_bar.html
{% macro nav_render(tab1, tab2, tab3, tab4) %}
<div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-danger btn-simple">{{ tab 1 }}</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">{{ tab 2 }}</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">{{ tab 3 }}</a>
</li>
<li>
<a href="#" class="btn btn-danger btn-simple">{{ tab 4 }}</a>
</li>
</ul>
</div>
{% endmacro %}In index.html,
{% extends "base.html" %}
{% block body %}
{% import 'Navigation_bar.html' as nav_macro %}
{{ nav_macro.nav_render("Home", "About", "Products", "Contact") }}
<h1>Hello, World!</h1>
{% endblock %}As discussed above, it is quite obvious, Jinja2template is using the old & traditional way of Backend server generating data and control all the routes, then render to html.
In the future posts, I will add React or VUE.js to jinja2, combine the data drive and auto-refresh to flask.
