Шаг 2 – Использование шаблонов Jinja и форм в FastAPI

Циклы

Мы также можем перебирать переменные в Jinja. Это может быть список или общая функция, например, следующая:

{% for user in users %}
    <li>{{ user.username }}</li>
{% endfor %}

Вы можете получить доступ к специальным переменным внутри цикла for, таким как loop.index, который дает индекс текущей итерации. Полный список переменных цикла вы можете посмотреть в документации.

Использование операторов if

Использование операторов if в Jinja аналогично их использованию в Python. if операторы используются в блоках управления {% %}. Давайте посмотрим на пример:

{% if users %}
<ul>
{% for user in users %}
    <li>{{ user.username }}</li>
{% endfor %}
</ul>
{% endif %}

Макросы

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

{% macro input(name, value='', type='text', size=20 %}
    <div class="form">
        <input type="{{ type }}" name="{{ name }}"
         value="{{ value|escape }}" size="{{ size }}">
    </div>
{% endmacro %}

Теперь, чтобы быстро создать ввод в вашей форме, вызывается макрос:

{{ input('item') }}

Это вернет следующее:

<div class="form">
<input type="text" name="item" value="" size="20">
</div>

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

Самая мощная функция Jinja — наследование шаблонов. Эта функция продвигает принцип «не повторяйся» (DRY) и удобна в больших веб-приложениях. Наследование шаблона — это ситуация, когда базовый шаблон определен, а дочерние шаблоны могут взаимодействовать, наследовать и заменять определенные разделы базового шаблона.

Этот шаблон, который мы будем называть base.html, определяет простой HTML-скелет, который вы можете использовать для простой страницы с двумя колонками. Это работа "дочерних" шаблонов, чтобы заполнить пустые блоки контентом:

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2024.
        {% endblock %}
    </div>
</body>
</html>

В этом примере теги {% block %} определяют четыре блока, которые могут заполнять дочерние шаблоны. Все, что делает тег блока, это говорит движку шаблона, что дочерний шаблон может переопределить эти заполнители в шаблоне. Можно также отобразить содержимое родительского блока, вызвав super(). Это возвращает результаты родительского блока.

{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
      Welcome to my awesome homepage.
    </p>
{% endblock %}

Более подробнее с наследованием шаблонов вы можете ознакомиться в документации.

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