2022 iThome 鐵人賽

【Day 23】 Django Template Tags 補充篇(4) - Extends

接下來的幾天都會是對Template Tags的補充內容，有些東西可能前面有使用過，這邊可以當作再一次的複習。為避免看起來內容水分有點重，比較簡單的內容都會被塞到同一篇，沒直接跳過這些看起來簡單的內容是為了呼應系列文的初心兩個字，我希望能將Django的入門起點拉得越低越好。

今天的測試環境作法比較不一樣，所以我決定從理解Extends這個Template Tags的過程中，去實際體驗它的效果或功能。

Extends

Extends這個Django Template Tags是拿來規範Templates彼此間繼承關係的東西。
透過Extends的幫忙，我們可以不用一直寫相同的HTML原始碼，只要先寫好一個.html模板，再讓其他的.html去繼承它，最後修改需要的地方就好。

現在先在members/templates建立template.html作為網頁模板 :

接著把template.html修改成像下面這樣 :

1
2
3
4
5
6
7
8
9
10
<html>
<body>

<h1>Welcome, Qi Xiang</h1>

{% block mymessage %}
{% endblock %}

</body>
</html>

那{% block mymessage %}{% endblock %}`這個沒看過的東西又是什麼呢? 前面有提到`Extends`可以讓繼承模板的`.html`修改它需要更改的地方，而`{% block mymessage %}{% endblock %}就是定義出需要更改的地方(block)，mymessage是這個.html需要的修改地方的別名。

看到這邊應該還是有點茫然，在members/templates建立testing.html用來繼承template.html :

接著把testing.html修改成像下面這樣 :

1
2
3
4
5
{% extends 'template.html' %}

{% block mymessage %}
  <p>This page has a master page</p>
{% endblock %}
  • {% extends 'template.html' %}表示testing.html繼承自template.html。
  • {% block mymessage %}{% endblock %}是在template.html被劃分出來可以修改的區塊，我們在裡面加上<p>This page has a master page</p>。

現在的testing.html相當於下面這樣 :

1
2
3
4
5
6
7
8
9
<html>
<body>

<h1>Welcome, Qi Xiang</h1>

<p>This page has a master page</p>

</body>
</html>

在進入檢視結果的環節前，我們還要先修改members/views.py和members/urls.py這兩個地方才能看到結果。

將原本的members/views.py加入testing這個方法 :

1
2
3
4
#上面之前做的東西都不要動
def testing(request):
  template = loader.get_template('testing.html')
  return HttpResponse(template.render())

再將原本的members/urls.py加入testing這個路徑，同時指定請求處理方法(view)和路徑別名 :

1
2
3
4
5
6
7
8
9
10
11
from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('add/', views.add, name='add'),
  path('add/addrecord/', views.addrecord, name='addrecord'),
  path('delete/<int:id>', views.delete, name='delete'),
  path('update/<int:id>', views.update, name='update'),
  path('testing/', views.testing, name='testing')
]

做到這邊就可以進入檢視成果環節囉!

啟動 Server 檢視成果

  1. 打開CMD並切換到虛擬環境(python venv)的資料夾路徑下

    (實際venv路徑不一定會跟我一樣喔!)

  2. 輸入以下指令啟動虛擬環境

    1
    Scripts\activate.bat

    啟動虛擬環境後結果如下:

  3. 接著切換路徑到Django Project所在的資料夾下

  4. 接著輸入以下指令Start Server

    1
    py manage.py runserver

  5. 在瀏覽器輸入對應的網址(127.0.0.1:8000/members/testing)就可以囉~

    可以清楚看到testing.html與template.html的繼承關係，而Welcome, Qi Xiang很明顯就是從template.html繼承而來的東西。

明天會是Extends的好朋友Include的Django Template Tags補充。

分享到