Понимание механизма шаблонов Jinja в Flask

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

На изображении выше видно, что веб-сайт состоит из различных страниц. я. e.Home, Explore, Notifications, Profile и т. д. Контент, содержащийся на этих страницах, отображается с помощью шаблонов. Шаблон относится к макету и дизайну страницы.
В этом руководстве вы создадите приложение Flask, которое отображает самые популярные смартфоны в 2021 году с помощью механизма шаблонов Jinja.

Согласно документации:

Jinja — это быстрый, выразительный, расширяемый механизм шаблонов. Специальные заполнители в шаблоне позволяют писать код, аналогичный синтаксису Python. Затем в шаблон передаются данные для рендеринга конечного документа.

К концу урока вы узнаете:

  • Как отобразить шаблон в приложении Flask
  • Как передать переменные или данные в шаблоны.
  • Как получить доступ к данным в шаблоне
  • Переменные фильтры
  • Условные операторы в шаблонах .ie. Для циклов и операторов if
  • Наследование шаблонов

Начиная

Создайте папку flaskr, которая будет содержать все файлы и папки приложения. В папке flaskr создайте файл app.py:

mkdir flaskr
touch app.py

В app.py import Flask создайте экземпляр приложения Flask:

from flask import Flask
app = Flask(__name__)

Создайте индекс маршрута, который возвращает простую веб-страницу:

Запустите сервер с помощью команды flask run, и ваше приложение должно работать по адресу 127.0.0.1:5000/:

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

@app.route('/')
    def index():
    title = 'Most Popular Smartphones in 2021'
    return render_template('index.html', title =title)

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

Flask автоматически ищет шаблоны в каталоге шаблонов. Создайте папку с именем templates и создайте в ней файл index.html. Каталог должен выглядеть так:

/flaskr
  /templates
    /index.html

Добавьте следующий код в файл index.html:

Переменные шаблона

Как только вы окажетесь внутри шаблона, вы можете отобразить значение title переменной, которую мы определили в маршруте индекса, используя специальный разделитель {{ }} следующим образом: Замените все между тегом h1 на {{title}}:

Переменные фильтры

Вы также можете использовать фильтры для изменения переменных. Чтобы добавить фильтр к переменной, вы используете вертикальную черту (|) symbol для разделения переменной и фильтра. Например, фильтр replace() заменит части строки на новую:

<h1>{{title | replace("Most Popular", 'Best')}}</h1>

Здесь мы заменяем строки Most popular на Best в заголовке. Обновите индексную страницу, и заголовок изменится. replace() принимает два аргумента; первый аргумент — это подстрока, которая будет заменена, а второй аргумент — строка замены.

Теперь страница должна выглядеть так:

Другие часто используемые фильтры включают в себя:

  • truncate() — используется для усечения переменной
  • wordcount() — используется для подсчета количества слов в строке
  • round() — используется для округления чисел
  • reverse() — изменить порядок переменной
  • title() — первая буква в каждом слове будет заглавной.
  • float() — преобразует значение в число с плавающей запятой
  • first() — возвращает первый элемент значения
  • dictsort()- сортирует пары ключ, значение словаря в определенном порядке.

Условные операторы в шаблонах: циклы for

Использование условий в шаблонах может дать вам контроль над обработкой данных. Создайте маршрут ‘/products’ в app.py и добавьте функцию, определяющую список словарей, содержащих сведения о смартфонах, как показано ниже:

Если нам нужно отобразить каждый продукт отдельно, мы должны передать список продуктов, используя render_template, а затем использовать цикл for внутри шаблона, чтобы перебрать каждый продукт.

Создайте шаблон products.html и добавьте следующий код:

Здесь мы используем цикл Jinja for {% for product in product %} для перебора списка продуктов, а затем используем нотацию python dot для отображения артикула продукта, названия, цены и количества с использованием тегов абзаца. Чтобы закрыть цикл, мы используем {%endfor%}

Как вы, возможно, заметили, разделителем цикла for является {% %}.

Теперь страница выглядит так:

Условные операторы в шаблонах: операторы if

Условные операторы if используют ту же логику, что и циклы for. Простая условная логика следует этому шаблону:

{% if condition %}
  <p>Result if condition is true</p> 
{% endif %}

Предположим, вы хотите отображать SOLD OUT только для продуктов, количество которых равно 0. Напишите оператор if под абзацем цены продукта:

Здесь мы добавляем оператор if{% if product.quantity ==0 %}.

Оператор if проверяет, равно ли количество продукта 0, тогда вместо отображения количества оставшихся единиц мы отображаем SOLD OUT красным цветом.

Обновите страницу продуктов, и вы должны увидеть что-то вроде этого:

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

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

Чтобы избежать монотонности дублирования элементов на всех страницах, jinja обеспечивает наследование шаблонов.

Например, при наличии базового шаблона, содержащего общие элементы, другие шаблоны могут наследовать содержимое базового шаблона. Добавьте файл base.html в папку шаблонов со следующим кодом:

{% block title %} {% endblock %} будет использоваться для заголовка: это упрощает создание собственного заголовка для каждой страницы. {% block content %} {% endblock %} будет использоваться для содержимого страницы.

Чтобы унаследовать содержимое базового шаблона, обновите products.html следующим образом.

Здесь мы используем extends для наследования содержимого базового шаблона. Код, который должен быть в теле, будет между блоками content. На изображении ниже показано, как страница продуктов унаследована от базового шаблона.

URL-ссылки

Ссылки выше пока не работают. Это потому, что мы не предоставили URL-адреса. Сделаем это с помощью функции url_for().

<div class="nav">
   <a href="{{url_for('index')}}"">Home</a>
   <a href="{{url_for('products')}}"">Products</a>
</div>

URL-адреса названы в честь функций маршрутов. то есть index и products.

Заключение

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



Подробное руководство по регистрации, входу и выходу пользователей во Flask
Как настроить учетные записи пользователей во Flaskbetterprogramming.pub