To separate business logic from presentation logic, Flask moved presentation logic to JinJa2 templates, which are files that contain response text. It uses placeholder variables to represent dynamic parts, which are known only from the request context.
Replacing the real value with the placeholder variable becomes the rendering. The creator of the JinJa2 template is also the creator of Flask, so there is no need to install additional packages.
1. Flask uses templates
1.1 Create a template
Create a templates directory in the same level directory of the program, and create user.html in this directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello {{ name }}!!!</h1>
</body>
</html>
{{ name }} is a variable character whose value needs to be rendered
1.2. Loading the template
from flask import Flask
from flask import render_template
app=Flask(__name__)
@app.route('/user/<name>')
def user(name):
return render_template('user.html',name=name)
if __name__ == '__main__':
app.run(debug=True)
1.3 Variables and filters
JinJia2 can recognize all types of variables, such as:
{{ MyList[1] }}
{{ MyObj.test() }}
Jinja2 also provides filters for modifying variables
Usage: {{ name|uppr }}
1.4 Control Structure
judge:
{% if user %}
Hello,{{ user }}
{% else %}
Please input your name!!!
{% endif %}
cycle:
{% for name in user %}
<li>{{ name }}</li>
{% endfor %}
1.5 Define macros
Macros are similar to functions in Python and can be reused
macro.html
{% macro render_comment(comment) %}
<li>{{ comment }}</li>
{% endmacro %}
<ul>
{% for comment in comments %}
{{ render_comment(comment) }}
{% endfor %}
</ul>
Import this macro file in the template
<body>
{% import 'macro.html' as macros %}
<ul>
{% for user in names %}
{{ macros.render_comment(user) }}
{% endfor %}
<ul>
</body>
1.6 Inheritance
base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<title>{% block title %}{% endblock %} - My APP</title>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
inherit base.html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block body %}
<h1>hello world</h1>
{% endblock %}
2. Using Flask-BootStrap
If you want to inherit bootstrap in your program, you can use the flask extension of flask-bootstrap to simplify the integration process.
2.1 Install Flask-BootStrap
pip install flask-bootstrap
2.2 Inherit bootstrap/base.html
user.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
navbar and content represent the navigation bar and main content respectively
page effect:
All blocks defined by bootstrap/base.html
3.3 Defining error pages
hello.py
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'), 404
@app.errorhandler(500)
def internal_server_error(e):
return render_template('500.html'), 500
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html', name=name)
if __name__ == "__main__":
app.run()
write base.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
Write 404.html
{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Not Found</h1>
</div>
{% endblock %}
3.4 Static files
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
url_for will find the URL corresponding to the view function.