當我們網站模板太多, 而且每一個模板之間共同的部分又很多的時候. 為了一個Don’t repeat yourself的精神. 就可以利用模板繼承的方式把“相似度”高的頁面共同使用同一個模板,方便我們之後的開發.
一個繼承的模板區塊以{% block BLOCKNAME %}
為開頭, 以{% endblock %}
為結尾. 可以填入內容也可以空白. 接著使用{% extends%}
來繼承模板.
原則
- 基礎模板中的block越多越好, 並不是要每個區塊都要求繼承. 但是預留更多可變的位置, 會使得模板設計上更靈活
- 如果有大量重複的代碼存在各個模板中, 可以考慮抽取出來做成基礎模板.
模板繼承的步驟
- 定義基礎模板, 利用
{% block BLOCKNAME %}
和{% endblock %}
. - 利用
{% extends%}
來繼承模板 - 利用模板區塊來覆寫”基礎模板“的內容, 未被覆寫的將用原本模板就設定好的內容.
Example:
#base.html
<!doctype html>
<html>
<head>
<title> {% block title %} {% endblock %} </title>
</head>
<body>
<nav>
{% if request.user.is_authenticated %}
<li><a href="#">Hi! {{ request.user }}</a></li>
<li><a href="/restaurants_list/">餐廳列表</a></li>
<li><a href="/accounts/logout/">登出</a></li>
{% else %}
<li><a href="/accounts/login/">登入</a></li>
<li><a href="/accounts/register/">註冊</a></li>
{% endif %}
</nav>
<h2>{% block h2 %}{% endblock %}</h2>
{% block content %}{% endblock %}
</body>
</html>
#index.html
{% extends "base.html" %}
{% block title %} 首頁 {% endblock %}
{% block content %}
<h2>歡迎來到Dinbendon</h2>
{% endblock %}
沒有留言:
張貼留言