1、渲染模板
模板是一個包含響應文本的文件，其中包含用佔位變量表示的動態部分，其具體值只在請求的上下文中才能
知道。 使用真實值替換變量，再返回最終得到的響應字符串，這一過程稱爲渲染。可以使
用 render_template() 方法來渲染模板。你需要做的一切就是將模板名和你想作爲關鍵字的參數傳入模板的變
量。
值得注意的是，只要你把文件放到templates中，也可以使其下的子文件夾，Flask都能找到該文件jinja2(金甲)
Flask使用了一個名爲 Jinja2 的強大模板引擎
jinja的語句及變量規則
{% ... %} Jinja語句，例如判斷、循環語句
{{ ... }} 變量，會顯示在瀏覽器中
{# ... #} 註釋，不會輸出到瀏覽器中2、變量規則
在模板中使用的 {{ name }} 結構表示一個變量，它是一種特殊的佔位符，告訴模板引擎這個位置的值從渲
染模板時使用的數據中獲取。
3-模板
分區 Flask 的第 1 頁染模板時使用的數據中獲取。
【helloname.html】
<h1>Hello, {{ name }}!</h1>【.py】
@app.route('/hellotemplate/<name>')
def helloname(name):
return render_template('helloname.html',name = name)過濾器
用法
Hello,{{name|captalize}}
jinja2的過濾器
| 名稱 | 功能 |
|---|---|
| capitalize | 首字母變大寫，其他變小寫 |
| lower | 把值轉換成小寫形式 |
| upper | 把值轉換成大寫形式 |
| title | 每個單詞首字母大寫 |
| trim | 值的首尾空格去掉 |
| striptags | 值的所有HTML標籤刪掉 |
3、控制結構
python中的控制結構有三個
順序結構
條件判斷
循環結構
1、條件控制語句
【.html】
{% if name %}
hello, {{name}}
{% else %}
hello, world!
{% endif %}
{% if user %}
Hello, {{ user }}!
{% else %}
Hello, Stranger!
{% endif %}2、for循環
【.html】
<ol>
{% for a in range(10) %}
<li>a</li>
{% endfor %}
</ol>
@app.route('/for/')
def fortemplate():
return render_template('for.html')
render_template('for.html')3、宏(macro)函數。
{% macro myprint(A) %}
this is {{ A }}
{% endmacro %}
{{ myprint(A) }}
@app.route('/macro/<a>')
def macrotamplate(a):
return render_template('macro.html',A = a)爲了重複使用宏，我們可以將其保存在單獨的文件中，然後在需要使用的模板中導入：
【macro2.html】
{% from 'macro.html' import myprint %}
{{ myprint(A) }}
@app.route('/macro2/<a>')
def macro2template(a):
return render_template('macro2.html',A = a)4、包含（include）。需要在多處重複使用的模板代碼片段可以寫入單獨的文件，再包含在所有模板中。
【include.html】
{% include 'macro.html' %}
@app.route('/include/<a>')
def includetemplate(a):
return render_template('include.html',A = a)
【注意】包含進來的文件裏的所有變量也包含進來了，需要在視圖函數中指定4、模板繼承
模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”，
並定義子模板可以覆蓋的塊。模板繼承是重複使用代碼的一種強大方式，它類似於 Python 代碼中的類繼
承。
【base.html】基模板例子
<html>
<head>
{% block head %}
<title>
{% block title %}
{% endblock %}
- My Application
</title>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>【extend.html】衍生模板
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}#如果想擴充修改，又要繼承基類，需要使用。
<h1>super</h1>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}模板的簡單繼承
0、分爲：基類、衍生類
1、block與{%end block%}匹配以最近爲原則
2、衍生類：繼承與重寫父類的方法
3、{{super()}}如果想擴充修改，又要繼承基類，需要使用。
4、衍生類只關注block.
5、使用Flask-Bootstrap
安裝：(venv) $ pip install flask-bootstrap
【.html】
{% extends "bootstrap/base.html" %}
#關鍵的一行，繼承bootstrap例子
'''
使用Bootstrap美化界面
'''
from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app) # 傳統初始化方法
@app.route('/bootstrap/')
def bt():
return render_template('base.html')模板中的模塊
| 塊名 | 說明 |
|---|---|
| doc | 整個HTML文檔 |
| html_attribs | 標籤的屬性 |
| html | 標籤中的內容 |
| head | 標籤中的內容 |
| title | 標籤中的內容 |
| metas | 一組標籤 |
| styles | 層疊樣式表定義 |
| body_attribs | 標籤的屬性 |
| body | 標籤中的內容 |
| navbar | 用戶定義的導航條 |
| content | 用戶定義的頁面內容 |
| svripts | 文檔地步的javascript聲明 |
例如添加js
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}6、自定義錯誤頁面
，由於原生的404頁面比較難看，所以Flask 允許程序使用基於模板的自定義錯誤頁面。
@app.errorhandler(404) # 必須加上狀態碼作爲參數
def e404(e): # e即使沒有用，也不能少
return render_template('404.html')
#if server can't find the url ,it will redirect 4047、靜態文件
Flask 在程序根目錄中名爲 static 的子目錄中尋找靜態文件。如果需要，可在static 文件
夾中使用子文件夾存放文件。給靜態文件生成 URL ，使用特殊的 ‘static’ 端點名。
添加圖片示例
【westeros.html】
<img src = "{{url_for('static',filename = 'westeros.jpg')}}">
#static文件夾下
#filename後面接的是文件名。
【.py】
@app.route('/westeros/')
def westeros():
return render_template('westeros.html')
值得注意的是我們需要把樣式文件放到static裏面。
8、Flask-Moment本地化日期和時間
Flask-Moment 可以使用 pip 安裝
(venv) $ pip install flask-moment這個擴展的初始化方法和Bootstrap一樣，以程序實例app爲參數
第一步導入moment
#引入moment.js
from flask_moment import Moment
moment = Moment(app)第二步【base.html中增加了】
#引入jquery.js
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}第三步【moment.html】
#配置模板
% extends "base.html" %}
{% block page_content %}
<div class="page-header">
<h1>Hello World!</h1>
</div>
<p>The local date and time is {{moment(current_time).format('LLL')}}.</p>
#format('LLL') 根據客戶端電腦中的時區和區域設置渲染日期和時間 L到LLLL，不同的顯示格式
<p>That was {{moment(current_time).fromNow(refresh = true)}}.</p>
#fromNow() 渲染相對時間戳，會隨着時間的推移自動刷新顯示的時間這個時間戳最開始顯
示爲“a few seconds ago”，但指定 refresh 參數後，其內容會隨着時間的推移而更新。 如果一直待在這
個頁面，幾分鐘後，會看到顯示的文本變成“a minuteago”“2 minutes ago”等
{% endblock %}第四步 設置路由
from datetime import datetime
@app.route('/moment/')
def momenttemplate():
return render_template('moment.html',current_time = datetime.utcnow())
#渲染模板