iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
Modern Web

Django 初心者之旅系列 第 23

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

  • 分享至 

  • xImage
  •  

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

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

Extends

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.pymembers/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')
]

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

啟動 Server 檢視成果

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

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

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

    Scripts\activate.bat
    

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

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

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

    py manage.py runserver
    

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

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

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


上一篇
【Day 22】Django Template Tags 補充篇(3) – Cycle & Comment
下一篇
【Day 24】 Django Template Tags 補充篇(5) - Include
系列文
Django 初心者之旅31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言