練習 - 建立範本

6 分鐘

讓我們建立兩個範本，以顯示收容中心的清單，以及每個收容中心的詳細資料頁面。我們也會建立基底範本，以確保應用程式之間的一致性。

建立基底範本

基底範本通用於所有 Django 專案。讓我們從建立一個基底範本開始。

在 Visual Studio Code 中，在 [dog_shelters] 內建立名為[templates]的新資料夾。
在 [templates] 內建立名為 [base.html] 的新檔案。

將下列 HTML 新增至 [base.html]：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Dog shelter site{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <article class="container">
        <section class="jumbotron">
            <h3>Dog shelter application</h3>
        </section>
        {% block content %}
        {% endblock %}    
    </article>
</body>
</html>

注意

我們會針對我們的網站使用 Bootstrap 4.6 版 \(英文\)。不過，我們在此不需要關於 Bootstrap 的知識。我們只會使用一個類別：jumbotron \(英文\)。否則，我們會使用核心 HTML。

請注意兩個 {% block %} 陳述式，一個用於標題，另一個則用於子頁面所提供的內容。我們會提供 title 的預設值，以確保如果子頁面未設定，我們也一律會有標題。

建立收容中心清單範本

現在，我們將建立另一個範本來列出所有收容中心。我們會在收容中心清單中執行迴圈，並建立所有收容中心的詳細資料連結。

在 [dog_shelters/templates] 中，建立名為 [shelter_list.html] 的新檔案。

新增下列程式碼，以建立收容中心清單的範本：

{% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>Shelter list</h2>
<div>Here is the list of registered shelters</div>
    {% for shelter in shelters %}
        <div>
            <a href="{% url 'shelter_detail' shelter.id %}">
                {{shelter.name}}
            </a>
        </div>
    {% endfor %}
</div>
{% endblock %}

我們會使用 block 標籤來指出我們要放置資訊的位置。我們會指定 Shelter list 的 title 值，而 content 項目會是所有收容中心的清單。

我們也會使用新的標籤：url。 url 標籤會動態產生 URL。我們的 URL 已在 URLconf 中註冊，因此可能會變更。我們可以使用 url 標籤來告知 Django 從 URLconf 擷取適當的 URL，而不是在路徑中進行硬式編碼。

url 標籤會尋找路徑的名稱，在我們的案例中為 shelter_detail，然後會尋找任何預期參數的清單。 shelter_detail 具有一個參數：pk。這是收容中心的主索引鍵或識別碼。我們會使用 shelter.id 來指定識別碼。

建立收容中心詳細資料範本

建立清單範本之後，我們現在可以建立詳細資料範本。

在 [dog_shelters/templates] 中，建立名為 [shelter_detail.html] 的新檔案。

新增下列程式碼以建立範本：

{% extends 'base.html' %}

{% block title %}
Shelter list
{% endblock %}

{% block content %}
<h2>{{ shelter.name }}</h2>
<div>Located in {{ shelter.location }}</div>
{% if shelter.dog_set.all %}
    <div>Here is the list of available dogs</div>
    {% for dog in shelter.dog_set.all %}
        <div>
            <a href="">
                {{dog.name}}
            </a>
        </div>
    {% endfor %}
    </div>
{% else %}
    <div>This shelter has no dogs available for adoption</div>
{% endif %}
{% endblock %}

請注意，在本文中，我們會使用 if shelter.dog_set.all 來查看收容中心內是否有任何犬隻。如果有犬隻，我們會使用 for 來執行所有犬隻的迴圈以顯示清單。否則，我們會顯示一則訊息，指出沒有任何可用的犬隻。我們將在稍後的單元中更新連結。

注意

您可能會注意到，我們正在對 shelter.dog_set.all 進行兩次呼叫。如果您已熟悉資料庫和 ORM，可能會擔心我們對資料庫進行了兩次呼叫。兩次呼叫通常會造成效能影響。 Django 具有內建的快取，可確保只會對資料庫進行一次呼叫。

測試網站

建立範本之後，我們就可以看到網站實際運作狀況了！

儲存所有檔案。
開啟瀏覽器，並前往 http://localhost:8000。
現在應該會顯示收容中心的清單。
選取 [Contoso]。
現在會顯示 Contoso 收容中心的犬隻清單。

練習 - 建立範本

建立基底範本

建立收容中心清單範本

建立收容中心詳細資料範本

測試網站

意見反應