2022 iThome 鐵人賽

【Day 24】 Django Template Tags 補充篇(5) - Include

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

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

Include

Include這個Django Template Tags跟昨天介紹的Extends有異曲同工之妙，它可以在template裡面引用其他template的內容，讓我們不用寫重複的HTML。除此之外，我們還可以在Include的同時，帶入變數值修改被引用的template內容。

假設在很多的template下方都需要加上footer的內容，那我們就可以先把footer的東西先寫成一個.html檔，然後在其他的template(.html)把它include進來並填入變數值就好。

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

接著把footer修改成像下面這樣 :

1
2
<p>You have reach the bottom of this page, thank you for your time.</p>
<p>This is {{ name }}'s website.</p>
  • <p>This is {{ name }}'s website.'</p>，include可以指定變數值。

然後在members/templates建立testing.html等待引入footer.html的內容:

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

1
2
3
4
5
<h1>Hello</h1>

<p>This page contains a footer in a template.</p>

{% include 'footer.html' with name='Qi Xiang' %}
  • {% include 'footer.html' with name='Qi Xiang' %}表示把footer.html的內容引入testing.html並指定footer.html裡面的變數name的值。

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

1
2
3
4
5
6
<h1>Hello</h1>

<p>This page contains a footer in a template.</p>

<p>You have reach the bottom of this page, thank you for your time.</p>
<p>This is Qi Xiang's website.</p>

在進入檢視結果的環節前，我們還要先修改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)就可以囉~

    可以清楚看到footer.html的內容被引入到testing.html，而且我們還指定了footer.html裡面的變數name的值。

明天會是Django Template Tags補充的最後一篇，內容是能讓我們在template修改variable的Filter。

分享到