用 Flask 來寫個輕博客 (12) — M(V)C_編寫和繼承 Jinja 模板

時間 2019-11-20

原文原文鏈接

前文列表

擴展閱讀

Bootstrap 中文網css

使用 Bootstrap

Bootstrap: 是一個基於 HTML/CSS/JavaScript 的前端框架, 兼容大部分的 jQuery 插件, 它簡潔靈活, 提供了大量內置的樣式接口，使得 Web 開發更加簡單快捷.html

下載 Bootstrap前端
- 點這裏進入 Bootstrap 官方網站
- 點擊 Download Bootstrap
- 再點擊 Download Bootstrap
使用 Bootstrap: 將下載的 ZIP 文件解壓到項目文件夾下, 並重命名爲 static.
NOTE 1: 該 static 目錄須要跟 main.py 在同一目錄下, 這樣 main.py 纔可以找到這些文件.
NOTE 2: 該 static 目錄也會成爲該項目中存放全部 CSS 文件/字體文件/圖片文件/Javascript文件 的目錄.java

(env)fanguiju@fanguiju:/opt/JmilkFan-s-Blog$ ll static/
total 20
drwxrwxr-x 5 fanguiju fanguiju 4096 Nov 23 14:35 ./
drwxr-xr-x 7 fanguiju fanguiju 4096 Nov 23 14:35 ../
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 css/
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 fonts/
drwxr-xr-x 2 fanguiju fanguiju 4096 Nov 23 14:35 js/

編寫 Jinja 模板文件

在對每一個路由頁面進行渲染時, 都會使用到一個 Jinja 模板, 而每個 Jinja 模板文件中都含有相似的 HTML 代碼(樣式表/網頁 meta 信息/共用的JS庫文件). 咱們固然不但願每次編寫一個 Jinja 模板時, 都重複的編寫這些 HTML 代碼. 因此這裏會應用到 Jinja 最強大的功能之一: 模板繼承.jquery

先建立一個 templates 目錄, 用於存放全部的 Jinja 模板文件sql
建立一個 base.html 基礎模板, 用於實現一個高重用的 HTML 文件基礎代碼.數據庫

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,, initial-scale=1"> <!-- Will be replace the page title --> <title>{% block title %}Home{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}"> <!-- Macro: `render paginate` --> {% macro render_pagination(pagination, endpoint) %} <nav> <ul class="pagination"> <li> {% if pagination.has_prev %} <a href="{{ url_for('home', page=pagination.prev().page) }}" aria-label="Previous"> {% else %} <a href="{{ url_for('home', page=1) }}" aria-label="Previous"> {% endif %} <span aria-label="true">&laquo;</span> </a> </li> {% for page in pagination.iter_pages() %} {% if page %} {% if page != pagination.page %} <li> <a href="{{ url_for(endpoint, page=page) }}"> {{ page }} </a> </li> {% else %} <li><a href="">{{ page }}</a></li> {% endif %} {% else %} <li><a>...</a></li> {% endif %} {% endfor %} <li> <a href="{{ url_for('home', page=pagination.next().page ) }}" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> <li> </ul> </nav> {% endmacro %} </head> <body> <div class="container"> <div class="jumbotron"> <!-- Replace the route function to URL: `/` --> <h1><a href="{{ url_for('home')}} ">JmilkFan's Blog</a></h1> <p>Welcome to the blog!</p> </div> {% block body %} body_content {% endblock %} </div> <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> </body> </html>

能夠經過繼承某個基礎模板來獲得一個子模板, 在子模板中只須要替換掉基礎模板中的一些標記段落, 就可以獲得一個新的模板, 這與 Python 中繼承的概念相似.express

NOTE 1: 上述代碼段中 {% block XXX %}old{% endblock %} 控制代碼塊的意義是標識出了該 Jinja 模板中能夠被替換的部分. 在子模板繼承時, 能夠在子模版中實現 {% block XXX %}new{% endblock %} 語句，把父模板中的 block 控制代碼塊替換掉.
NOTE 2: 上述的代碼中定義了一個宏 render_pagination(pagination, endpoint), 用於生成 Bootstrap 風格的分頁連接列表. 宏定義要位於 HTML 代碼的頭部 <head>.
- pagination: SQLAlchemy 的分頁對象 flask_sqlalchemy.Pagination object
- endpoint: 視圖函數名(EG. post())

繼承一個模板

要繼承一個父模板, 須要在子模板中使用 extends 控制代碼塊.
如今在 home.html 中繼承 base.html 模板.django

{% extends "base.html"%} {% block title %}JmilkFan's Blog{% endblock %}

NOTE: 如今的 home.heml 模板僅替換了 base.html 代碼塊中的 {% block title %}

最後：
咱們啓動 Flask Server 服務並使用瀏覽器訪問 http://127.0.0.1:5000 來查看一下 home.html 的頁面。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。