Использование статических файлов и шаблонов Django: учебник по Django, часть 2

Продолжаем наш учебник по статическим файлам и шаблонам Django

Django состоит из нескольких основных компонентов, которых мы касались в последнем учебнике по Django: Django Models составляют структуру и поведение данных в проекте Django, Django Views обрабатывают входящие запросы и предоставляют ответы, а Django Templates заполняются данными и затем выводятся в браузер из ответа представления.

В этом уроке мы рассмотрим, как использовать шаблоны Django и приложение Django Staticfiles для придания логической структуры любому Django-проекту, над которым вы работаете.

(View What is Django? A Quick Django Tutorial Part 1 here)

На чем мы остановились в прошлый раз, и что дальше

В прошлом уроке по Django мы создали базовый Django-проект, который при обращении к нему из браузера возвращает случайную сцену для друзей-импровизаторов. Сцены возвращаются из файла констант через представление Template. Наш проект выглядит так, будто он прямо из 1983 года, но он работает!

Теперь, когда мы познакомились с возможностями Django, давайте копнем глубже и используем еще некоторые из встроенных в Django возможностей. В этой части учебника мы рассмотрим:

Подробнее о том, что могут делать шаблоны
Настройте параметры staticfiles так, чтобы все HTML и CSS файлы, которые мы добавляем в продукт, обрабатывались Django соответствующим образом
Добавляем Twitter Bootstrap в наш проект

Напомним, что история пользователя, с которой мы работаем, выглядит следующим образом:

"Как участники Improv-вечеринок, мы хотим получить произвольные сцены, чтобы разыграть их"

Вот как выглядел наш проект после завершения последнего урока:

Django staticfiles app

Настроить приложение staticfiles в файле настроек проекта

Прежде чем приступить к разработке фронтенда проекта, необходимо изменить стандартные настройки Django таким образом, чтобы в `django.contrib.staticfiles` были указаны правильные пути, по которым должны располагаться и обслуживаться статические файлы. Статические файлы - это то, как в Django называются любые CSS, JavaScript и файлы шаблонов.

Настройка приложения staticfiles в Django дает нам несколько преимуществ: Django сможет собирать статические файлы, где бы они ни находились в вашем проекте, в том числе в устанавливаемых вами приложениях, в одно место, чтобы затем Django мог обслуживать эти файлы в браузере по мере их запроса. Кроме того, Django умеет оценивать ссылки на эти пути в ваших шаблонах, поэтому в ваших шаблонах вы можете написать {% static '/some/path' %}, и это будет работать как в разработке, так и в продакшене. Это происходит потому, что Django отслеживает, на что указывает 'static' в системе даже после того, как статические файлы собраны.

Для настройки приложения Django staticfiles нам необходимо добавить STATICFILES_DIRS в наш файл настроек. STATICFILES_DIRS - это `список` всех мест, в которых у вас находятся статические файлы. У нас есть только одно место, поэтому мы просто поместим это место в список. Каталоги в STATICFILES_DIRS должны существовать до запуска collectstatic, так как Django не будет создавать их за вас. Затем необходимо STATIC_ROOT, который указывает Django, куда поместить файлы после сбора. Этот каталог создается Django на основе имени, которое вы задаете здесь, поэтому вам не нужно создавать его заранее.

Запуск Collectstatic в первый раз

Выполнение команды collectstatic показывает, что было собрано 140 файлов - но у нас нет ни одного статического файла в каталоге static! Хорошей новостью является то, что в Django есть шаблоны и CSS, встроенные в Django Admin, который у нас по умолчанию установлен в INSTALLED_APPS.

Эти файлы также должны быть собраны для того, чтобы их обслуживал веб-сервер. Это не относится к приложениям Django в нашем INSTALLED_APPS, поскольку любые приложения, установленные в вашем проекте Django, будут иметь свои статические файлы, собранные collectstatic.

Теперь, когда staticfiles настроен, мы можем добавить в наш проект немного CSS и JavaScript, чтобы сделать его красивым и динамичным.

Bootstrap

Мой любимый способ быстро придать сайту приемлемый - или даже отличный - вид - это использование Bootstrap.

Bootstrap - это, пожалуй, самый популярный в Интернете фреймворк. Он обеспечивает внешний вид сайта, разбитый на компоненты интерфейса. Каждый компонент имеет стили и дополнительный JavaScript, которые заставляют компоненты вести себя в браузере определенным образом. Вы можете ознакомиться с Bootstrap здесь, чтобы узнать больше. Однако в данном руководстве мы просто установим его как есть и не будем настраивать.

Вы можете скачать Bootstrap здесь, который включает в себя все необходимые CSS и JavaScript.

Единственное, что отсутствует в загружаемом Bootstrap, - это немного шаблонного HTML. У них есть несколько примеров, которые можно скопировать и вставить, но я предпочитаю брать index.html, поставляемый с Initializr, и загружать свои файлы Bootstrap оттуда же. В файле index.html, поставляемом с Initializr, вся структура HTML уже прописана, а библиотеки и CSS уже подключены, что значительно экономит время при начале работы.

Только не забудьте запустить collectstatic еще раз, когда будете добавлять новые статические файлы в проект!

Шаблоны Django

Хотя шаблоны Django задуманы как легкие и не позволяют использовать в них python напрямую, это не значит, что они не полезны. На самом деле они представляют собой нечто большее, чем просто HTML-документ.

Когда Django Framework рендерит шаблон, он ищет в нем специальные символы, называемые тегами шаблона. Эти теги указывают Django, что при рендеринге шаблона в html все, что находится внутри тегов шаблона, должно быть интерпретировано и выполнено.

Теги {% for foo in bar %} указывают на некую логику, а теги variable указывают на то, что Django должен оценить переменную.

Система шаблонов Django может быть заменена на все, что вы можете себе представить. Хотя при поиске информации вы, конечно, услышите о других вариантах, я рекомендую остановиться на Django.

Документация просто фантастическая, а работа на базовом языке шаблонов Django гарантирует, что любая информация, которую вы найдете в документации или на StackOverflow, скорее всего, будет применима к любым последующим проблемам, с которыми вы столкнетесь.

Система шаблонов Django - одна из самых интересных частей Django, когда речь идет о фронт-энде. Вы можете сделать удивительно много интересных вещей с вашими данными, просто используя встроенные теги и фильтры языка шаблонов. Однако если вам нужно что-то, чего еще не существует, вы можете написать свои собственные шаблонные фильтры.

Помните, что вы хотите, чтобы бэкэнд Django выполнял тяжелую работу, а не шаблоны или фильтры шаблонов.

Если вы пишете фильтр, который выполняет что-то сложное, подумайте, где именно должна происходить эта работа, и поместите эту логику в вспомогательный метод, который ваше представление вызывает для данных до того, как они попадут в шаблон. Представление будет иметь те же данные, что и ваш шаблон в целом.

Наследование шаблонов Django

Шаблоны Django наследуются через тег шаблона, {% extends %}. Используя {% extends template_name_here.html %}, вы можете создать базовый шаблон, от которого будут наследоваться все остальные шаблоны в вашем проекте, и таким образом весь проект будет иметь единый внешний вид. Кроме того, если необходимо внести изменения, затрагивающие каждую страницу, то это нужно сделать только в одном месте, а не в каждом отдельном файле шаблона. Это значительно упрощает обслуживание шаблонов по мере роста проекта.

Общее приложение

Я хочу поместить свой базовый шаблон в новое приложение под названием common. Поэтому давайте распакуем шаблон Initializr и компоненты Bootstrap и поместим их в наш проект.

Общий базовый шаблон

Я снабжаю базовые шаблоны двойными знаками подчеркивания (или Dunder), чтобы указать, что они должны только наследоваться, а не использоваться самостоятельно. Это личная конвенция, смоделированная после конвенции Python в PEP8, описывающей использование описательных имен, которая помогает мне знать, какие шаблоны куда идут и как они используются, основываясь на имени. Я никогда не буду заставлять представление обслуживать шаблон с префиксом __ в имени, поскольку знаю, что, исходя из имени, конкретный шаблон не будет вести себя при обслуживании непосредственно из представления. Он должен быть унаследован от функции to, как и было задумано.

После того, как наш шаблон создан, нам необходимо реально использовать некоторые возможности, предоставляемые приложением staticfiles. Сначала нам нужно загрузить соответствующие теги шаблона из приложения staticfiles, поместив {% load static %} в верхнюю часть нашего шаблона, а затем изменить любой путь в шаблоне с помощью {% static %} template tag, чтобы Django поместил соответствующее местоположение в отрисованные HTML-файлы.

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

Чтобы сделать наши шаблоны наследуемыми, мы должны установить {% block %} tags в базовом (или родительском) шаблоне, чтобы дочерние шаблоны, которые наследуют, знали, какие части переопределять.

В дочернем шаблоне вы сообщаете ему, какой шаблон является родительским - или, какой шаблон нужно расширить - и заполняете блоки содержимым для переопределения базового шаблона.

Django делает все остальное. Как видите, на странице теперь отображается содержимое нашего дочернего шаблона - случайная сцена, но она красиво отображается с использованием стилей Bootstrap и структуры, установленной в базовом шаблоне.

Использование HTML и CSS для стилизации содержимого шаблонов

Помните, что шаблоны - это в основном просто HTML-страницы, со специальными тегами, которые позволяют Django выполнять обработку во время выполнения. Вы будете смешивать теги шаблонов и переменные внутри HTML, и когда шаблоны пройдут через Django и будут переданы браузеру, браузер не будет знать, что на этих страницах было что-то кроме HTML.

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

Теперь мы закончили, верно? Вы и ваши друзья можете с удовольствием играть в Whose Line is it Anyway, используя ваше новое приложение!

Правда, наличие всего трех сцен на выбор быстро надоедает. Тот факт, что эти сцены находятся в константе, означает, что ни вы, ни ваши друзья не сможете добавить к уже имеющимся в игре сценам, не изменив код.

Успех! Ваш проект больше не уродлив!

Благодаря использованию шаблонов Django Templates и наследования, которое они обеспечивают, а также лучших практик работы с приложением staticfiles, наш проект не только стал легче для глаз, но и будет легко поддерживаться в дальнейшем.

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

В следующей части учебника мы будем работать с Django Models, чтобы вывести этот проект на новый уровень удобства использования.

Вернуться на верх