第三章--模版

模伴是一個包含響應文本的文件,其中包含用占位變量表示的動態(tài)部分,具體值只有在請求的上下文(request)中才能獲取。
處理模板時,使用真實變量替換占位變量,再返回最終得到的響應字符串(文件),這一過程稱為渲染,F(xiàn)lask使用了Jinjia2這一強大的模板引擎進行渲染操作。

一、Jinjia2 模版引擎

1、渲染模板

# user.html
<h1>Hello , {{ name }}  </h1>

默認情況下,flask在程序根目錄下的templates文件夾中尋找模板。

from flask import Flask, render_template
# flask提供的render_template函數(shù)將Jinjia2模版引擎集成到程序中
···
@app.route('/user/<name>'
def user(name):
    return render_template('user.html', name=name)

上述代碼展示了render_template如何將動態(tài)變量傳給模板并進行渲染
render_template函數(shù)接收多個參數(shù),但第一個參數(shù)必須為模板文件名稱,后續(xù)為表示動態(tài)變量的鍵值對。

2、變量

在模板中使用"{{ name }}",雙大括號結構表示一個變量,是模板特有的占位符,用以告訴模板引擎這個位置從渲染模板時使用的數(shù)據(jù)中獲取。

Jinjia2能識別所有類型的變量,包含復雜的(列表,字典,對象)。

# 復雜類型示例
{{ dict['key'] }}
{{ list[3] }}
{{ obj.somemethod() }}

并且Jinjia2支持使用過濾器修改變量,過濾器名添加在變量名之后,用豎線隔開。

{{ name | capitalize }}

完整的過濾器列表

3、控制結構

Jinjia2提供了多種控制結構用來改變模板的渲染流程。

{% if user %}
    hello, {{ user }}
{% else %}
    hello, Stranger!
{% endif %}    #控制語句結束后必須使用 {% end+if/for...%}關閉

<ul>
    {% for comment in comments %}
        <li>{{ comment }}</li>
    {% endfor  %}
</ul>

模板繼承

{% extends "base.html" %}
{% block title %}
Index      #為父模板的title標簽添加內(nèi)容
{% endblock %}
{% block head%}
  {{ super() }}    #獲取父模版head標簽內(nèi)的內(nèi)容
{% endblock %}

二、Flask-Bootstrap

Bootstrap是Twitter開發(fā)的一個客戶端開源框架,并不會直接設計服務器內(nèi)容。
服務器需要做的是提供引用了Bootstrap CSS和JS文件的HTML響應,并在HTML、CSS和JS中實例化所需組件,這些操作最理想的執(zhí)行場所就是模板。

pip install flask-bootstrap    #安裝
from flask.ext.bootstrap import Bootstrap    #引入
#···
bootstrap = Bootstrap(app)  #初始化

使用extends指令從flask-bootstrap中導入bootstrap/base.html,從而實現(xiàn)模板繼承。
該基模版提供了一個網(wǎng)頁框架,引入Bootstrap所需的所有CSS、JS文件。
如果需要對已有內(nèi)容的模版添加新內(nèi)容,必須使用Jinjia2提供的super()函數(shù)

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

三、自定義錯誤頁面

為指定錯誤代碼自定義錯誤處理程序

@app.errorhandler(404):
def page_not_found(e):
    return render_template('404.html'), 404

需要編寫404.html模版,繼承base.html,并將head元素改為相應的錯誤信息。
為了避免過多的代碼重復以及將錯誤信息展示在合適的頁面,編寫handle.html模板,繼承自bootstrap/base.html,將導航條及其他基本框架必備信息寫入,再新建404.html繼承handle.html模板。

{% extends "handle.html" %}
{% block title %}Page Not Found {% endblock %}
{% block page_content %} <h1>Not Found</h1>{% endblock %}

四、鏈接

任何具有多個路由的程序都需要可以連接不同頁面的鏈接(例:導航條)
flask提供了url_for()輔助函數(shù),可以使程序URL映射中保存的信息生成URL。
url_for()最簡單的用法是以視圖函數(shù)名作為參數(shù),返回對應的URL。
使用url_for()生成動態(tài)地址時,將動態(tài)部分作為關鍵字參數(shù)傳入。
傳入url_for()的關鍵字參數(shù)不僅限于動態(tài)路由中的參數(shù),函數(shù)能將任何額外的參數(shù)添加到查詢字符串中,例:url_for('index', page=2) = /?page=2

五、靜態(tài)文件

靜態(tài)文件作為Web程序的重要組成部分(CSS、JavaScript、圖片等)
默認設置下,flask會在程序根目錄中名為static的子目錄中尋找靜態(tài)文件。

使用Flask-Moment本地化日期和時間

pip install flask-moment
from flask.ext.moment import Moment
moment = Moment(app)

當Web程序服務器不同地區(qū)和國家的用戶時,日期顯示是個非常關鍵的問題,一般來說要根據(jù)用戶本地的時區(qū)來提供給用戶本地化的時間。
flask-moment 是使用javascript開發(fā)的優(yōu)秀客戶端開源代碼庫,它可以在瀏覽器中渲染日期和時間。

{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

將時間變量傳給模板進行渲染

#視圖函數(shù)
from datetime import datetime
@app.route('/')
def index():
    return render_template('index.html', current_time=datetime.utcnow())
#模板
<p>That was {{ moment(current_time).format('LLL')  }}</p>
<p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>

format('LLL')根據(jù)客戶端電腦中的時區(qū)和區(qū)域設置渲染日期和時間,參數(shù)決定了渲染的方式,‘L’到‘LLL’分別對應不同的復雜度。
fromNow()渲染相對時間戳,而且會隨著時間推移自動刷新顯示的時間,最開始顯示為"a few seconds ago",逐步變成"a minute ago"。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,702評論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,615評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,606評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,044評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,826評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,227評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,307評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,447評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,992評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,807評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,001評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,550評論 5 361
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,243評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,667評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,930評論 1 287
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,709評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,996評論 2 374

推薦閱讀更多精彩內(nèi)容

  • 22年12月更新:個人網(wǎng)站關停,如果仍舊對舊教程有興趣參考 Github 的markdown內(nèi)容[https://...
    tangyefei閱讀 35,200評論 22 257
  • 第三章 模板 序 為什么要分離 易于維護的代碼,關鍵在于保持簡單的結構。而我們之前編寫的hello.py雖然簡單,...
    科幻經(jīng)典閱讀 1,544評論 0 6
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,785評論 18 139
  • 渲染模板 模板文件后綴名是 .html, 這些文件就是普通的 html 文件加上一些占位符變量, 它們都默認存放在...
    焉知非魚閱讀 700評論 0 1
  • 第三章 模板(Templates) 編寫易于維護的程序的要點在于書寫干凈、良好結構的代碼。你以前所見的代碼都過于...
    易木成華閱讀 1,147評論 0 2