Упражнение. Создание шаблонов

6 мин

Давайте создадим два шаблона для отображения списка приютов и страницы сведений для каждого из них. Мы также создадим базовый шаблон, чтобы обеспечить единообразие в нашем приложении.

Создание базового шаблона

Базовый шаблон является общим для всех проектов Django. Начнем с его создания.

В Visual Studio Code создайте новую папку в dog_shelters с именем templates.
Создайте новый файл в папке templates с именем base.html.

Добавьте следующий HTML-код в файл base.htm:

<!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 указывает, где мы хотим разместить информацию. Мы указываем значение title для Shelter list, а элементы content будут представлять собой список всех приютов.

Мы также используем новый тег url. Тег url позволяет создавать URL-адрес динамически. Наши URL-адреса зарегистрированы в URLconf, поэтому они могут меняться. С помощью тега url в Django можно задать получение соответствующего URL-адреса из URLconf, а не прописывать его в пути.

Тег 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.

Продолжить

Создание базового шаблона

Создание шаблона списка приютов

Создание шаблона сведений о приюте

Протестируйте сайт

Обратная связь