Теперь, когда вы начали представлять процесс построения страниц, можно переходить к построению проекта Learning Log. Мы создадим две страницы для вывода данных: на одной будет выводиться список всех тем, а на другой — все записи по конкретной теме. Для каждой страницы мы создадим схему URL, напишем функцию представления и создадим шаблон. Но, прежде чем переходить к работе, стоит создать базовый шаблон, от которого будут наследовать все шаблоны этого проекта.
Наследование шаблонов
При построении сайта некоторые элементы почти всегда повторяются на каждой странице. Вместо того чтобы встраивать эти элементы непосредственно в страницы, вы можете написать базовый шаблон с повторяющимися элементами; все страницы будут наследовать от этого шаблона. Такое решение позволит сосредоточиться на разработке уникальных аспектов каждой страницы и существенно упростит изменение общего оформления проекта в целом.
Родительский шаблон
Начнем с создания шаблона base.html в одном каталоге с файлом index.html. Этот файл будет содержать элементы, общие для всех страниц; все остальные шаблоны наследуют от base.html. Пока единственным элементом, который должен повторяться на каждой странице, остается заголовок в верхней части страницы. Так как шаблон будет включаться в каждую страницу, преобразуем заголовок в ссылку на домашнюю страницу:
base.html
(1) Learning Log
(2){% block content %}{% endblock content %}
Первая часть файла создает абзац с именем проекта, который также работает как ссылка на домашнюю страницу. Для построения ссылки использовался шаблонный тег, обозначенный фигурными скобками и знаками % {% %}. Шаблонный тег представляет собой блок кода, который генерирует информацию для вывода на странице. В данном примере шаблонный тег {% url 'learning_logs:index' %} генерирует URL-адрес, соответствующий схеме URL, определенной в файле learning_logs/urls.py с именем 'index' (1) . В данном примере learning_logs — пространство имен, а index — схема URL с уникальным именем в этом пространстве имен.
В этой простой странице HTML ссылка заключается в якорный тег:
Генерирование URL-адреса шаблонным тегом существенно упрощает актуализацию ссылок. Чтобы изменить URL-адрес в проекте, достаточно изменить схему URL в urls.py, а Django автоматически вставит обновленный URL-адрес при следующем запросе страницы. Каждая страница в проекте будет наследовать от base.html, так что в дальнейшем на каждой странице будет содержаться ссылка на домашнюю страницу.
В точке (2) вставляется пара тегов block. Блок с именем content резервирует место; информация, попадающая в блок content, будет определяться дочерним шаблоном.
Дочерний шаблон не обязан определять каждый блок в своем родителе, так что в родительских шаблонах можно зарезервировать место для любого количества блоков, а дочерний шаблон будет использовать столько из них, сколько потребуется.
Примечание
В коде Python почти всегда используются отступы в четыре пробела. Файлы шаблонов обычно имеют больший уровень вложенности, чем файлы Python, поэтому каждый уровень отступа обычно обозначается двумя пробелами.
Дочерний шаблон
Теперь нужно переписать файл index.html так, чтобы он наследовал от base.html. Обновленный файл index.html выглядит так:
index.htm
(1) {% extends "learning_logs/base.html" %}
(2){% block content %}
Learning Log helps you keep track of your learning, for any topic you're
learning about.
(3){% endblock content %}
Сравнивая этот файл с исходной версией index.html, мы видим, что заголовок Learning Log заменен кодом наследования от родительского шаблона (1) . В первой строке дочернего шаблона должен находиться тег {% extends %}, который сообщает Django, от какого родительского шаблона он наследует. Файл base.html является частью learning_logs, поэтому learning_logs включается в путь к родительскому шаблону. Эта строка извлекает все содержимое из шаблона base.html и позволяет index.html определить, что должно попасть в пространство, зарезервированное блоком content.
Блок content определяется в точке (2) вставкой тега {% block %} с именем content. Все, что не наследуется от родительского шаблона, попадает в блок content. В данном случае это абзац с описанием проекта Learning Log. В точке (3) мы сообщаем о том, что определение content завершено, при помощи тега {% endblock content %}.
Вероятно, вы уже начинаете понимать преимущества наследования шаблонов: в дочерний шаблон достаточно включить информацию, уникальную для этой страницы. Такой подход упрощает не только каждый шаблон, но и изменение сайта. Чтобы изменить элемент, общий для многих страниц, достаточно изменить элемент в родительском шаблоне. Внесенные изменения будут автоматически перенесены на каждую страницу, наследующую от этого шаблона. В проекте из десятков и сотен страниц такая структура значительно упрощает и ускоряет доработку сайта.
Примечание
В больших проектах часто создается один родительский шаблон base.html для всего сайта и родительские шаблоны для каждого крупного раздела сайта. Все шаблоны разделов наследуют от base.html, и каждая страница сайта наследует от шаблона раздела. При такой структуре вы сможете легко изменять оформление и поведение сайта в целом, любого его раздела или отдельной страницы. Данная конфигурация сильно повышает эффективность работы и стимулирует разработчика к дальнейшему совершенствованию сайта.
Страница со списком тем
Разобравшись с тем, как эффективно организовать построение страниц, мы можем сосредоточиться на следующих двух страницах: списке всех тем и списке записей по одной теме. На странице тем выводится перечень всех тем, созданных пользователями, и это первая страница, на которой нам придется работать с данными.
Схема URL для тем
Сначала нужно определить URL для страницы тем. Обычно в таких случаях выбирается простой фрагмент URL, который отражает суть информации, представленной на странице. Мы воспользуемся словом topics, так что для получения страницы будет использоваться URL http://localhost:8000/topics/. А вот какие изменения следует внести в learning_logs/urls.py:
urls.py
"""Определяет схемы URL для learning_logs."""
...
urlpatterns = [
# Домашняя страница
url(r'^$', views.index, name='index'),
. .# Вывод всех тем.
(1) . .url(r'^topics/$', views.topics, name='topics'),
]
Мы просто добавили topics/ в аргумент регулярного выражения, используемый с URL-адресом домашней страницы (1) . Когда Django проверяет запрашиваемый URL-адрес, эта схема совпадет с любым URL-адресом, который состоит из базового URL-адреса и слова topics. Косую черту в конце можно включить, можно не включать, но после слова topics ничего быть не должно, иначе схема не совпадет. Любой запрос с URL-адресом, соответствующим этой схеме, будет передан функции topics() в views.py.
Представление topics
Функция topics() должна получать данные из базы данных и отправлять их шаблону. Обновленная версия views.py выглядит так:
views.py
from django.shortcuts import render
(1) from .models import Topic
def index(request):
...
(2)def topics(request):
. ."""Выводит список тем."""
(3) . .topics = Topic.objects.order_by('date_added')
(4) . .context = {'topics': topics}
(5) . .return render(request, 'learning_logs/topics.html', context)
Сначала импортируется модель, связанная с нужными данными (1) . Функции topics() необходим один параметр: объект запроса, полученный Django от сервера (2). В точке (3) выдается запрос к базе данных на получение объектов Topic, отсортированных по атрибуту date_added. Полученный итоговый набор сохраняется в topics.
В точке (4) определяется контекст, который будет передаваться шаблону. Контекст представляет собой словарь, в котором ключами являются имена, используемые в шаблоне для обращения к данным, а значениями — данные, которые должны передаваться шаблону. В данном случае существует всего одна пара «ключ—значение», которая содержит набор тем, отображаемых на странице. При построении страницы, использующей данные, функции render() передается переменная context, а также объект request и путь к шаблону (5).
Шаблон topics
Шаблон страницы со списком тем получает словарь context, чтобы шаблон мог использовать данные, предоставленные topics(). Создайте файл с именем topics.html в одном каталоге с index.html. Вывод списка тем в шаблоне осуществляется следующим образом:
topics.html
{% extends "learning_logs/base.html" %}
{% block content %}
Topics
(1)
- {{ topic }}
- No topics have been added yet.
(2) . .{% for topic in topics %}
(3) . .
(4) . .{% empty %}
. .
(5) . .{% endfor %}
?
{% endblock content %}
Сначала тег {% extends %} объявляет о наследовании от base.html, как и в случае с шаблоном index, после чего открывается блок content. Тело страницы содержит маркированный (bulleted) список введенных тем. В стандартном языке HTML маркированный список называется неупорядоченным списком и обозначается тегами
В точке (2) находится другой шаблонный тег, эквивалентный циклу for для перебора списка тем из словаря context. Код, используемый в шаблоне, отличается от Python в нескольких важных отношениях. Python использует отступы для обозначения строк, входящих в тело цикла. В шаблоне каждый цикл for должен снабжаться явным тегом {% endfor %}, обозначающим конец цикла. Таким образом, в шаблонах часто встречаются циклы следующего вида:
{% for элемент in список %}
. .действия для каждого элемента
{% endfor %}
В цикле каждая тема должна быть преобразована в элемент маркированного списка. Чтобы вывести значение переменной в шаблоне, заключите ее имя в двойные фигурные скобки. Код {{ topic }} в точке (3) будет заменен значением topic при каждом проходе цикла. Фигурные скобки на странице не появятся; они всего лишь сообщают Django об использовании шаблонной переменной. Тег HTML
обозначает элемент списка. Все, что находится между тегами, в паре теговВ точке (4) находится шаблонный тег {% empty %}, который сообщает Django, что делать при отсутствии элементов в списке. В нашем примере выводится сообщение о том, что темы еще не созданы. Последние две строки завершают цикл for (5) и маркированный список ?.
Затем необходимо изменить базовый шаблон и включить ссылку на страницу с темами:
base.html
(1) Learning Log -
(2) Topics
{% block content %}{% endblock content %}
После ссылки на домашнюю страницу (1) добавляется дефис, после которого вставляется ссылка на страницу тем, которая также представлена шаблонным тегом (2). Эта строка приказывает Django сгенерировать ссылку, соответствующую схеме URL с именем 'topics', в learning_logs/urls.py.
Обновив домашнюю страницу в браузере, вы увидите ссылку Topics. Щелчок на этой ссылке открывает страницу, похожую на рис. 18.4.
Рис. 18.4. Страница со списком тем
Страницы отдельных тем
Следующим шагом станет создание страницы для вывода информации по одной теме, с названием темы и всеми записями по этой теме. Мы снова определим новую схему URL, напишем представление и создадим шаблон. Кроме того, на странице со списком тем каждый элемент маркированного списка будет преобразован в ссылку на соответствующую страницу отдельной темы.
Схема URL для отдельных тем
Схема URL для страницы отдельной темы немного отличается от других схем URL, которые встречались нам ранее, потому что в ней используется атрибут id темы для обозначения запрашиваемой темы. Например, если пользователь хочет просмотреть страницу с подробной информацией по теме Chess (id=1), эта страница будет иметь URL-адрес http://localhost:8000/topics/1/. Вот как выглядит схема для этого URL-адреса из learning_logs/urls.py:
urls.py
...
urlpatterns = [
...
. .# Страница с подробной информацией по отдельной теме
. .url(r'^topics/(?P
]
Рассмотрим регулярное выражение в схеме URL, r'^topics/(?P
Когда Django находит URL-адрес, соответствующий этой схеме, вызывается функция представления topic(), в аргументе которой передается значение, хранящееся в topic_id. Значение topic_id используется для получения нужной темы внутри функции.
Представление отдельной темы
Функция topic() должна получить тему и все связанные с ней записи из базы данных:
views.py
--snip--
(1) def topic(request, topic_id):
. ."""Выводит одну тему и все ее записи."""
(2) . .topic = Topic.objects.get(id=topic_id)
(3) . .entries = topic.entry_set.order_by('-date_added')
(4) . .context = {'topic': topic, 'entries': entries}
(5) . .return render(request, 'learning_logs/topic.html', context)
Это первая функция представления, которой требуется параметр, отличный от объекта запроса. Функция получает значение, совпавшее с выражением (?P
Примечание
Выражения в строках (2) и (3), обращающиеся к базе данных за конкретной информацией, называются «запросами». Когда вы пишете подобные запросы для своих проектов, сначала опробуйте их в оболочке Django. Вы сможете проверить результат намного быстрее, чем если напишете представление и шаблон, а затем проверите результаты в браузере.
Шаблон отдельной темы
В шаблоне должно отображаться название темы и текст записей. Также необходимо сообщить пользователю, если по теме еще не было сделано ни одной записи:
topic.html
{% extends 'learning_logs/base.html' %}
{% block content %}
(1)
Topic: {{ topic }}
Entries:
(2)
(4) . .
{{ entry.date_added|date:'M d, Y H:i' }}
(5) . .
{{ entry.text|linebreaks }}
. .
. . There are no entries for this topic yet.
. .
(3) {% for entry in entries %}
. .
? {% empty %}
. .
{% endfor %}
{% endblock content %}
Шаблон расширяет base.html, как и для всех страниц проекта. Затем выводится текущая тема (1) из шаблонной переменной {{ topic }}. Переменная topic доступна, потому что она включена в словарь context. Затем создается маркированный список со всеми записями по теме (2); перебор записей осуществляется так же, как это делалось ранее для тем (3).
С каждым элементом списка связываются два значения: временна?я метка и полный текст каждой записи. Для временнуй метки (4) выводится значение атрибута date_added. В шаблонах Django вертикальная черта (|) представляет фильтр — функцию, изменяющую значение шаблонной переменной. Фильтр date:'M d, Y H:i' выводит временны?е метки в формате January 1, 2015 23:00. Следующая строка выводит полное значение text (вместо первых 50 символов каждой записи). Фильтр linebreaks (5) следит за тем, чтобы длинный текст содержал разрывы строк в формате, поддерживаемом браузером (вместо блока непрерывного текста). В точке ? шаблонный тег {% empty %} используется для вывода сообщения об отсутствии записей.
Ссылки на странице
Прежде чем просматривать страницу отдельной темы в браузере, необходимо изменить шаблон списка тем, чтобы каждая тема вела на соответствующую страницу. Внесите следующие изменения в topics.html:
topics.html
...
{% for topic in topics %}
. .
. . . .{{ topic }}
. .
{% empty %}
...
Шаблонный тег URL используется для генерирования ссылки на основании схемы URL из learning_logs с именем 'topic'. Этой схеме URL необходим аргумент topic_id, поэтому в шаблонный тег URL добавляется атрибут topic.id. Теперь каждая тема в списке представляет собой ссылку на страницу темы, например http://localhost:8000/topics/1/.
Если теперь обновить страницу тем и щелкнуть на теме, открывается страница, изображенная на рис. 18.5.
Рис. 18.5. Страница со списком всех записей по отдельной теме
Упражнения
18-7. Документация шаблона: просмотрите документацию по шаблонам Django по адресу https://docs.djangoproject.com/en/1.8/ref/templates/. Используйте ее в работе над собственными проектами.
18-8. Страницы Pizzeria: добавьте страницу в проект Pizzeria из упражнения 18-6 (с. 398) с названиями видов пиццы. Свяжите каждое название пиццы со страницей, на которой выводится список дополнений к этой пицце. Обязательно примените наследование шаблонов, чтобы повысить эффективность построения страниц.