Ćwiczenie — tworzenie szablonów
Utwórzmy dwa szablony, aby wyświetlić listę schronisk i stronę szczegółów dla każdego schronienia. Utworzymy również szablon podstawowy, aby zapewnić spójność w naszej aplikacji.
Tworzenie szablonu podstawowego
Szablon podstawowy jest typowy dla wszystkich projektów Django. Zaczniemy od utworzenia.
W programie Visual Studio Code utwórz nowy folder wewnątrz dog_shelters nazwanych szablonów.
Utwórz nowy plik wewnątrz szablonów o nazwie base.html.
Dodaj następujący kod HTML do pliku 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>Uwaga
W naszej witrynie używamy programu Bootstrap w wersji 4.6 . Nie potrzebujemy tu jednak wiedzy Bootstrap. Używamy tylko jednej klasy, jumbotron. W przeciwnym razie używamy podstawowego kodu HTML.
Zwróć uwagę na dwie {% block %} instrukcje , jedną dla tytułu i następną dla zawartości, którą będą dostarczać strony podrzędne. Udostępniamy wartość domyślną dla titleelementu , co gwarantuje, że zawsze będziemy mieć tytuł, jeśli strona podrzędna nie zostanie ustawiona.
Tworzenie szablonu listy schronienia
Teraz utworzymy kolejny szablon do wyświetlania listy wszystkich schronisk. Przejdziemy przez listę schronisk i utworzymy linki do szczegółów wszystkich schronisk.
W dog_shelters/templates utwórz nowy plik o nazwie shelter_list.html.
Dodaj następujący kod, aby utworzyć szablon dla naszej listy schronisk:
{% 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 %}
Użyjemy tagów block , aby wskazać, gdzie chcemy umieścić nasze informacje. Określamy title wartość Shelter list, a content elementy będą listą wszystkich schronisk.
Używamy również nowego tagu url. Tag url generuje adres URL dynamicznie. Nasze adresy URL są zarejestrowane w naszym adresie URLLconf, dzięki czemu mogą one potencjalnie ulec zmianie. Używając tagu url , możemy powiedzieć Django, aby pobrać odpowiedni adres URL z adresu URLconf, a nie kodować na stałe w ścieżce.
Tag url wyszukuje nazwę ścieżki, shelter_detail w naszym przypadku, a następnie listę oczekiwanych parametrów. shelter_detail ma jeden parametr , pk. Jest to klucz podstawowy lub identyfikator schronienia. Określamy identyfikator przy użyciu polecenia shelter.id.
Tworzenie szablonu szczegółów schroniska
Po utworzeniu szablonu listy możemy teraz utworzyć szablon szczegółów.
W dog_shelters/templates utwórz nowy plik o nazwie shelter_detail.html.
Dodaj następujący kod, aby utworzyć szablon:
{% 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 %}
Zwróć uwagę, że w ciele sprawdzamy, czy jakiekolwiek psy znajdują się w schronisku przy użyciu polecenia if shelter.dog_set.all. Jeśli są psy, wyświetlamy listę za pomocą for pętli przez wszystkie psy. W przeciwnym razie zostanie wyświetlony komunikat informujący, że żadne psy nie są dostępne. Zaktualizujemy link w kolejnej lekcji.
Uwaga
Możesz zauważyć, że wykonujemy dwa wywołania do shelter.dog_set.allusługi . Jeśli masz doświadczenie z bazami danych i maszynami ORM, być może obawiasz się, że wykonujemy dwa wywołania bazy danych. Dwa wywołania byłyby zwykle trafieniem wydajności. Usługa Django ma wbudowane buforowanie, co zapewni, że wykonano tylko jedno wywołanie bazy danych.
Testuj witrynę
Po utworzeniu naszych szablonów możemy zobaczyć naszą witrynę w akcji!
Zapisz wszystkie pliki.
Otwórz przeglądarkę i przejdź do http://localhost:8000.
Powinna zostać wyświetlona lista schronisk.
Wybierz pozycję Contoso.
Zostanie wyświetlona lista psów dla schroniska firmy Contoso.
