一、Jinjia2
1.Jinjia2模板引擎
默认情况下，Flask在templates文件夹中寻找模板，使用render_template将该引擎集中到程序中
一个超简陋的 Jinjia2 模板：
<h1>Hello, {{name}}!<h1>变量：
{{ }}表示一个变量，值从渲染模板时使用的数据中获取
可使用过滤器修改变量：
{{name|capitalize}}safe注意：
- Jinjia2会转义所有变量，如<h1>渲染为<h1>
- 不要在不可信值上使用safe过滤器
过滤器名 说明 safe 渲染时不转义 capitalize 把值的首字母转换成大写，其他字母转换成小写 lower 把值转换成小写形式 upper 把值转换成大写形式 title 把值中每个单词的首字母都转换成大写 trim 把值的首尾空格去掉 striptags 渲染之前把值中所有的HTML标签都删掉
2.控制结构
变量：
{{}}语句：
{% %}+{% end啥子 %}在模板中使用条件控制语句
<!-- 条件控制语句 --> {% if user %} Hello, {{ user }}! {% else %} Hello, Stranger! {% endif %}<!-- for循环 -->
<ul>
{% for comment in comments %}
<li>{{ comment }}</li>
{% endfor %}
</ul>
宏
- 重复利用宏：保存在单独的文件中，在需要使用的模板中导入
- 重复利用模板代码片段：写入单独文件中，再包含在所有模板中
{% include 'commen.html' %}
<!-- 宏:{% macro 函数名() %}--> {% macro render_comment(comment) %} <li>{{ comment }}</li> {% endmacro %}{% import 'macros.html' as macros %}
模板继承
base.html 基模板：
<html> <head> {% block head %} <title>{% block title %}{% endblock %} - My Application</title> {% endblock %} </head> <body> {% block body %} {% endblock %} </body> </html>衍生模板：
- 新定义的head块，在基模板中内容不为空，使用super()获取原来的内容
{% extends "base.html" %} {% block title %}Index{% endblock %} {% block head %} {{ super() }} <style> </style> {% endblock %} {% block body %} <h1>Hello, World!</h1> <% endblock %}
二、Flask-Bootstrap
1.初始化
安装：
pip install flask-bootstrapBootstrap官方文档：https://v3.bootcss.com/css/#less
初始化
from flask_bootstrap import Bootstrapbootstrap = Bootstrap(app)
2.templates/base.html
- extends从Flask-Bootstrap中导入bootstrap/base.html
- Flask-Bootstrap中的基模板提供了一个网页框架，引入Bootstrap中所有的CSS和Javascript文件
- title：导航栏文档头 navbar：导航条 content：主体
{% 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 %}
3.base.html中定义的块
{% block 模块名称 %} + {% endblock %}- 如果需要向已有内容块添加内容，{{super()}}
| 块名 | 说明 |
|---|---|
| doc | 整个HTML文档 |
| html_attribs | <html>标签属性 |
| html | <html>标签内容 |
| head | <head>标签内容 |
| title | <title>标签内容 |
| metas | 一组<meta>标签 |
| stytles | 层叠样式表定义 |
| body_attribs | <body>标签属性 |
| body | <body>标签内容 |
| navbar | 用户定义的导航条 |
| content | 用户定义的页面内容 |
| scripts | 文档底部的Javascript声明 |
4.自定义页面
自定义初始程序：
from flask import Flask, render_template from flask_bootstrap import Bootstrapapp = Flask(name)
bootstrap = Bootstrap(app)@app.route('/')
def index():
return render_template('index.html')
使用模板继承机制自定义的index页面：
{% extends "base.html" %}{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello World!</h1>
</div>
{% endblock %}
自定义404处理程序
@app.errorhandler(404) def page_not_found(e): return render_template('404.html'), 404使用模板继承机制自定义的404页面：
{% extends "base.html" %}{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Not Found</h1>
</div>
{% endblock %}
自定义/user/<name>处理程序：
@app.route('/user/<name>') def user(name): return render_template('user.html', name=name)使用模板继承机制自定义的user页面：
{% extends "base.html" %}{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
{% endblock %}
5.链接
url_for()
以视图函数名作为参数，返回对应的URL
url_for('index, _external=True')返回绝对路径连接程序内不同路由的链接时，使用相对地址
url_for('index')就足够了生成动态地址
url_for('user',name='john',_external=True)返回http://localhost:5000/user/john参数不局限于动态路由中的参数，
url_for('index', page=2)返回结果/?page=2
6.静态文件
默认设置下，Flask在程序根目录中名为static的文件夹中寻找静态文件。可在static中使用子文件夹存放文件
{% 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 %}
7.本地化时间
安装基于moment.js的拓展程序：
pip install flask-momentFlask-Moment实现了moment.js中的format()、fromNow()、fromTime()、calendar()、valueOf()、unix()方法
base.html 引入：
{% block scripts %} {{ super() }} {{ moment.include_moment() }} {% endblock %}hello.py 引入：
from datetime import datetime from flask import Flask, render_template from flask_bootstrap import Bootstrap from flask_moment import Momentapp = Flask(name)
bootstrap = Bootstrap(app)
moment = Moment(app)@app.route('/')
def index():
return render_template('index.html',
current_time=datetime.utcnow())
index.html 渲染：
format('LLL')根据客户端电脑的时区和区域设置渲染日期和时间；L到LLL分别对应不同的复杂度fromNow()渲染相对时间戳，随时间的推移自动刷新显示的时间：2 minutes ago
<p>The local date and time is {{ moment(current_time).format('LLL') }}.</p> <p>That was {{ moment(current_time).fromNow(refresh=True) }}.</p>- 语言本地化：{{ moment.lang('es') }}