Try   HackMD

【第三篇】Flask 擴展樣板

tags: Flask教學

上一篇 Flask templates 網頁樣板 教大家如何使用 Jinja2 搭出網頁,在這篇是要教大家如何建立一個基底網頁,在往後使用的時候可以直接引用,省去重複輸入的時間。

快速上手

一樣在 templates 資料夾底下建立 base.html 檔案:

<!DOCTYPE html> <html lang="en"> <head> {% block head %} <title> {% block title %}{% endblock %} </title> {% endblock %} </head> <body> <div id="content"> {% block content %}{% endblock %} </div> <div id="footer"> {% block footer %} &copy; Copyright {% endblock %} </div> </body> </html>

在此範例中,可以發現開頭為 {% block %} 的標籤,它代表的是可以被填入的區塊,只要在後面命名不同的名字,就可以對應到同樣的區塊。

所以下一步就是建立子樣板,繼承剛剛的 base.html,只要在開頭加入 extands 即可:

page2.html:

{% extends "base.html" %} {% block title %}Index{% endblock %} {% block head %} {{ super() }} <style type="text/css"> .important { color: #336699; } </style> {% endblock %} {% block content %} <h1>Index</h1> <p class="important"> Welcome to my awesome homepage. </p> {% endblock %}

要特別注意的是,被引用的區塊會把原內容覆蓋掉,如果你是想要保留,就必須要加入繼承語法 {{ super() }}(如上第 6 行)。

不要在同一個檔案命名多個一樣的區塊,會發生問題。但如果你要在子樣板使用同個區塊多次,則可以使用 self variable 來呼叫。

<title>{% block title %}{% endblock %}</title> <h1>{{ self.title() }}</h1> {% block body %}{% endblock %}

上一篇:【第二篇】Flask templates 網頁樣板
下一篇:【第四篇】Flask Bootstrap 基礎