接下來的幾天都會是對Template Tags
的補充內容,有些東西可能前面有使用過,這邊可以當作再一次的複習。為避免看起來內容水分有點重,比較簡單的內容都會被塞到同一篇,沒直接跳過這些看起來簡單的內容是為了呼應系列文的初心
兩個字,我希望能將Django
的入門起點拉得越低越好。
今天的測試環境作法比較不一樣,所以我決定從理解Extends
這個Template Tags
的過程中,去實際體驗它的效果或功能。
Extends
這個Django Template Tags
是拿來規範Templates
彼此間繼承關係的東西。
透過Extends
的幫忙,我們可以不用一直寫相同的HTML
原始碼,只要先寫好一個.html
模板,再讓其他的.html
去繼承它,最後修改需要的地方就好。
現在先在members/templates
建立template.html
作為網頁模板 :
接著把template.html
修改成像下面這樣 :
<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
修改成像下面這樣 :
{% 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
相當於下面這樣 :
<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
這個方法 :
#上面之前做的東西都不要動
def testing(request):
template = loader.get_template('testing.html')
return HttpResponse(template.render())
再將原本的members/urls.py
加入testing
這個路徑,同時指定請求處理方法(view
)和路徑別名 :
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')
]
做到這邊就可以進入檢視成果環節囉!
打開CMD
並切換到虛擬環境(python venv
)的資料夾路徑下
(實際venv
路徑不一定會跟我一樣喔!)
輸入以下指令啟動虛擬環境
Scripts\activate.bat
啟動虛擬環境後結果如下:
接著切換路徑到Django Project
所在的資料夾下
接著輸入以下指令Start Server
py manage.py runserver
在瀏覽器輸入對應的網址(127.0.0.1:8000/members/testing
)就可以囉~
可以清楚看到testing.html
與template.html
的繼承關係,而Welcome, Qi Xiang
很明顯就是從template.html
繼承而來的東西。
明天會是
Extends
的好朋友Include
的Django Template Tags
補充。