Flask系列-模板

一、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 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-bootstrap
Bootstrap官方文档：https://v3.bootcss.com/css/#less

初始化

from flask_bootstrap import Bootstrap

bootstrap = 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 Bootstrap

app = 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-moment
Flask-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 Moment

app = 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') }}