Flask для школьниковГлава 4 из 10
SilverTests.ru · Курс веб-разработкиШаблоны и данные
Шаблоны и данные
Наследование, циклы, условия — DRY-принцип в HTML
У тебя уже работает app.py с маршрутами и render_template. Ты уже знаешь {{ }}.
Цель
Создать базовый шаблон base.html с общим меню. Научиться передавать списки из Python в HTML. Выводить их циклом {% for %} с условием {% if %}.
📝 Техзадание
Все страницы имеют одинаковое меню сверху (Главная | Привычки | О проекте).
Страница /habits показывает список привычек из Python с галочками: ✅ выполнено, ⬜ не выполнено.
1Проблема: дублирование кода
Если на каждой странице писать <nav>...</nav> — при изменении меню придётся править 5 файлов. Принцип DRY (Don't Repeat Yourself): если код повторяется — вынеси его в одно место.
2Наследование шаблонов
Базовый шаблон (каркас)
<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Трекер{% endblock %}</title>
</head>
<body>
<nav>
<a href="/">Главная</a> |
<a href="/habits">Привычки</a> |
<a href="/about">О проекте</a>
</nav>
<hr>
{% block content %}{% endblock %}
</body>
</html>
Дочерний шаблон (заполняет блоки)
<!-- templates/index.html -->
{% extends "base.html" %}
{% block title %}Главная{% endblock %}
{% block content %}
<h1>Трекер привычек</h1>
{% endblock %}
{% block %} — «дырка» в каркасе. {% extends %} — «наследуй каркас и заполни дырки». Меню прописано один раз в base.html — все страницы получают его автоматически.
3Передача данных: Python → шаблон
@app.route('/habits')
def habits():
my_habits = [
{"name": "Бег", "done": True},
{"name": "Чтение", "done": False},
{"name": "Английский", "done": True},
]
return render_template('habits.html', habits=my_habits)
4Циклы и условия в Jinja2
<!-- templates/habits.html -->
{% extends "base.html" %}
{% block content %}
<h1>Мои привычки</h1>
{% for h in habits %}
<p>
{% if h.done %}✅{% else %}⬜{% endif %}
{{ h.name }}
</p>
{% endfor %}
{% endblock %}
| Синтаксис |
Назначение |
Пример |
{{ }} |
Вывод значения |
{{ h.name }} → Бег |
{% %} |
Управление (цикл, условие) |
{% for h in habits %} |
{# #} |
Комментарий (не виден) |
{# TODO #} |
Сейчас привычки «захардкожены» в Python-коде. В следующей главе мы добавим форму, чтобы пользователь мог добавлять свои — и данные приходили из браузера на сервер.