Jinja2 python code in template

Как и в сценариях Python, вы можете управлять потоком шаблонов Jinja с помощью if- операторов и for- циклов. В Jinja вы используете блоки для переноса контента. Когда вы используете for- блок, содержимое этого блока отображается на каждом этапе цикла.

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

Используйте Jinja с Flask

Скорее всего, вы впервые услышали о Jinja, когда использовали веб-фреймворк вроде Flask . И Jinja, и Flask поддерживаются Pallets Project , организацией, которая заботится о библиотеках Python, лежащих в основе веб-фреймворка Flask.

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

Установка Flask

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

Отлично, теперь у вас есть работающее приложение Flask! В следующем разделе вы внедрите шаблоны Jinja в свое приложение Flask.

Добавляем базовый шаблон

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

Читайте также: Python словарь для json

Создайте новый шаблон с именем base.html в вашем templates/ directory :

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

Добавление дополнительной страницы

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

Убедитесь, что results.html размещен в templates/ и выглядит так:

Теперь у вас есть домашняя страница и страница, на которой показаны результаты ваших учеников. Отличное начало!

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

Вложение шаблонов

По мере роста приложения и добавления новых шаблонов вы должны синхронизировать общий код. На данный момент два шаблона base.html и results.htm l выглядят очень похожими. Когда несколько шаблонов содержат один и тот же код, при изменении какой-либо части общего кода вам все равно необходимо настраивать каждый шаблон.

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

Настраиваем базовый шаблон

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

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

Ваша страница результатов наследует код вашего базового шаблона. Когда вы щелкаете на ссылку в меню навигации, URL-адрес в адресной строке меняется в зависимости от вашей текущей страницы.

Читайте также: Python import sys stdout

Применение фильтров

Найдите минутку и подумайте о ситуации, когда другой человек заботится о бэкенде, а вы отвечаете за фронтенд веб-сайта. Чтобы не мешать друг другу, вам не разрешено настраивать какие-либо представления app.py или изменять данные, поступающие в ваши шаблоны.

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

Отображать элементы меню навигации в верхнем регистре.
Отсортировать имена учеников в results.html в алфавитном порядке.

Вы будете использовать функциональность фильтра Jinja для реализации обеих функций, не касаясь серверной части.

Настраиваем пункты меню

Jinja предоставляет множество встроенных фильтров . Если вы посмотрите на них, то заметите, что они похожи на встроенные функции и строковые методы Python.

Прежде чем продолжить, просмотрите свой _navigation.html :

Отлично, пункты меню теперь в верхнем регистре! Вы реализовали первую функцию из списка. Время заняться следующей функцией.

Отсортируйте список результатов

На данный момент результаты ваших учеников отображаются в том же порядке, в котором вы определили их в словаре в app.py . Вы будете использовать фильтр Jinja sort для сортировки списка результатов по ученикам в алфавитном порядке.

Откройте results.html и добавьте фильтр sort в свой for- цикл:

Вы использовали фильтр Jinja sort , чтобы отсортировать результаты ваших студентов по их именам. Если у вас есть ученики с одинаковым именем, вы можете связать фильтры:

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

Помещаем текущую страницу в меню навигации

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

Добавьте еще один макрос в macros.html :

Ваш макрос nav_link() принимает пункт меню в качестве аргумента. Если menu_item совпадает с текущей конечной точкой, ваш макрос отображает стрелку в дополнение к ссылке на пункт меню.

Кроме того, вы проверяете цветовой режим. Если «dark» – это часть запроса GET, то ссылка «?mode=dark» будет добавлена в меню. Без проверки и добавления режима вы будете переключаться на светлую тему каждый раз, когда нажимаете на ссылку, потому что «?mode=dark» не будет частью ссылки.

Замените ссылку пункта меню на новый макрос _navigation.html :

Добавляя макрос nav_link() в меню навигации, вы сохраняете чистоту шаблона навигации. Вы передаете любую условную логику nav_link() .

Перейдите на http://127.0.0.1:5000 и посмотрите на все функции, которые вы реализовали:

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

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

Вывод

Jinja — это многофункциональный движок шаблонов, входящий в состав веб-фреймворка Flask. Но вы также можете использовать Jinja независимо от Flask для создания шаблонов, которые можно программно наполнять содержимым.

Материалы по теме

Источник