# 【第三篇】Flask 擴展樣板 ###### tags: `Flask教學` 上一篇 [Flask templates 網頁樣板](https://hackmd.io/@Scott/ryApmEofH) 教大家如何使用 Jinja2 搭出網頁，在這篇是要教大家如何建立一個基底網頁，在往後使用的時候可以直接引用，省去重複輸入的時間。 ### 快速上手 一樣在 templates 資料夾底下建立 base.html 檔案： ```htmlmixed= <!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: ```htmlmixed= {% 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 來呼叫。 ```htmlmixed= <title>{% block title %}{% endblock %}</title> <h1>{{ self.title() }}</h1> {% block body %}{% endblock %} ``` --- 上一篇：[【第二篇】Flask templates 網頁樣板](https://hackmd.io/@Scott/ryApmEofH) 下一篇：[【第四篇】Flask Bootstrap 基礎](https://hackmd.io/@Scott/ryl-8OhGB)