
Flask + Jinja2: шаблонизация
Читайте также:
Jinja2 — это мощный шаблонизатор, который используется во Flask для генерации HTML-страниц на основе данных из Python. Благодаря Jinja2 вы можете динамически формировать содержимое страниц, отделяя логику приложения от представления. Это делает код чище, облегчает поддержку и позволяет дизайнерам работать с шаблонами независимо от программистов.
В этой статье мы подробно разберём, как использовать Jinja2 во Flask: от простого вывода переменных до наследования шаблонов и макросов. Каждый пример сопровождается подробными пояснениями, чтобы даже новичок мог быстро разобраться.
1. Что такое Jinja2 и зачем он нужен во Flask
Jinja2 позволяет отделить логику приложения от HTML-разметки. Это значит, что вы пишете бизнес-логику на Python, а внешний вид и структуру страниц описываете в шаблонах. Такой подход облегчает командную работу и ускоряет разработку.
Преимущества Jinja2:
- Чистый и понятный синтаксис, похожий на Python
- Поддержка наследования шаблонов (DRY — не повторяйся)
- Макросы для переиспользования кода
- Фильтры и пользовательские функции для форматирования данных
2. Базовый пример: вывод переменных
Рассмотрим минимальное приложение Flask, которое передаёт данные в шаблон и отображает их на странице.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
user = {"name": "Иван", "age": 30}
return render_template("index.html", user=user)
if __name__ == "__main__":
app.run(debug=True)
Здесь мы создаём экземпляр Flask-приложения и определяем маршрут /
. В функции index
формируется словарь user
с данными пользователя, который передаётся в шаблон index.html
через функцию render_template
. Это позволяет динамически подставлять значения в HTML.
templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
</head>
<body>
<h1>Привет, {{ user.name }}!</h1>
<p>Возраст: {{ user.age }}</p>
</body>
</html>
В шаблоне мы используем двойные фигурные скобки {{ ... }}
для вывода значений переменных, переданных из Python. Например, {{ user.name }}
подставит имя пользователя, а {{ user.age }}
— его возраст. Такой подход позволяет легко создавать персонализированные страницы.
3. Управляющие конструкции: условия и циклы
Jinja2 поддерживает не только вывод переменных, но и управляющие конструкции, такие как условия и циклы. Это особенно полезно, когда нужно отобразить список элементов или показать/скрыть часть страницы в зависимости от данных.
<ul>
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% if user.age >= 18 %}
<p>Вам больше 18 лет.</p>
{% else %}
<p>Вам меньше 18 лет.</p>
{% endif %}
Пояснения:
- Блок
{% for item in items %} ... {% endfor %}
перебирает списокitems
и для каждого элемента создаёт отдельный<li>
. Это удобно для вывода меню, списков товаров, комментариев и т.д. - Блок
{% if ... %} ... {% else %} ... {% endif %}
позволяет реализовать простую логику прямо в шаблоне. Например, можно показать разный текст для совершеннолетних и несовершеннолетних пользователей.
4. Наследование шаблонов (layout)
В реальных проектах многие страницы имеют общие элементы: шапку, подвал, меню. Чтобы не дублировать код, используют наследование шаблонов. Сначала создаётся базовый шаблон с общей структурой, а дочерние шаблоны наследуют его и подставляют свой контент.
templates/base.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Мой сайт{% endblock %}</title>
</head>
<body>
<header>Меню сайта</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>© 2025</footer>
</body>
</html>
В этом шаблоне определены два блока: title
и content
. Они будут переопределяться в дочерних шаблонах.
templates/index.html
{% extends "base.html" %}
{% block title %}Главная{% endblock %}
{% block content %}
<h1>Добро пожаловать!</h1>
{% endblock %}
Здесь мы указываем, что шаблон наследует base.html
({% extends "base.html" %}
), и переопределяем блоки title
и content
. Это позволяет создавать множество страниц с единой структурой, меняя только содержимое.
Зачем это нужно?
- Упрощает поддержку: если нужно изменить меню или подвал, достаточно поправить один файл.
- Ускоряет разработку: новые страницы создаются на основе готового каркаса.
- Дизайнеры и верстальщики могут работать с шаблонами независимо от программистов.
5. Макросы и фильтры
Макросы — это как функции в Python, только для шаблонов. Они позволяют создавать переиспользуемые куски HTML-кода, например, для форм, кнопок, повторяющихся блоков.
{% macro input(name, value='', type='text') %}
<input type="{{ type }}" name="{{ name }}" value="{{ value }}">
{% endmacro %}
<form>
{{ input('username') }}
{{ input('password', type='password') }}
</form>
В этом примере макрос input
создаёт HTML-элемент <input>
. Мы можем вызывать его с разными параметрами, чтобы не дублировать разметку для каждого поля формы.
Фильтры — это специальные функции для обработки и форматирования данных прямо в шаблоне. Они записываются через вертикальную черту |
.
<p>{{ username|capitalize }}</p>
<p>{{ price|round(2) }}</p>
capitalize
— делает первую букву заглавной.round(2)
— округляет число до двух знаков после запятой.
Фильтры позволяют быстро и удобно форматировать данные для вывода пользователю.
6. Лучшие практики
- Храните шаблоны в папке
templates/
, чтобы Flask автоматически их находил. - Используйте наследование для повторяющихся элементов (шапка, подвал, меню).
- Разделяйте логику (Python) и представление (HTML): не пишите сложные вычисления в шаблоне, делайте их в Python.
- Для сложных или часто используемых блоков используйте макросы — это уменьшит дублирование кода.
- Пользуйтесь фильтрами для форматирования дат, чисел, строк.
- Старайтесь делать шаблоны максимально простыми и читаемыми, чтобы их могли поддерживать не только программисты, но и верстальщики.
7. Полезные ссылки
Заключение
Jinja2 — мощный инструмент для создания гибких и красивых HTML-шаблонов во Flask. Используйте шаблонизацию для отделения логики от представления, чтобы ускорить разработку и упростить поддержку вашего приложения. Даже если вы только начинаете работать с Flask, освоив Jinja2, вы сможете создавать профессиональные и масштабируемые веб-приложения.