Урок 2: Шаблоны, Jinja2 и разделение кода

Обзор урока: Проблема "Грязного кода"

На прошлом уроке мы научились возвращать HTML прямо из Python-функции. Это выглядело так: return "<h1>Привет</h1>".

Для одной строчки это нормально. Но что, если нам нужно вернуть целую веб-страницу с картинками, меню и списком друзей? Наш код на Python превратится в кашу из кавычек и тегов.

Часть 1: Что такое Шаблоны (Templates)?

Принцип: Мухи — отдельно, котлеты — отдельно. В профессиональной разработке мы используем концепцию Separation of Concerns (Разделение ответственности).

Часть 2: Функция render_template

Чтобы "подружить" Python и HTML-файл, нам нужна функция-посредник. Она называется render_template.

Как это выглядит в коде:

from flask import Flask, render_template # 1. Импорт
 
app = Flask(__name__)
 
@app.route("/")
def index():
    # Мы больше не пишем HTML здесь!
    # Мы говорим Flask: "Возьми файл index.html из папки templates и отдай пользователю"
    return render_template("index.html")

Теперь мы можем писать красивый HTML в отдельном файле с подсветкой синтаксиса, и наш Python-код останется чистым.

Часть 3: Jinja2 — Заполняем бланки

Просто отдать HTML-файл скучно. Он будет одинаковым для всех. Мы хотим, чтобы сайт здоровался по имени: "Привет, Саша!" или "Привет, Маша!".

Для этого используется Шаблонизатор Jinja2.

Представьте, что HTML-файл — это Бланк паспорта. Там есть пустые места для ФИО и даты рождения. Jinja2 — это работник, который вписывает ваши данные в этот бланк.

Передача данных:

• В Python: return render_template("index.html", name="Саша")
• В HTML (Jinja2): <h1>Привет, {{ name }}!</h1>

Часть 4: Синтаксис Jinja2 (Скобки)

Новички часто путают скобки. Давайте запомним мнемоническое правило.

Часть 5: Циклы в HTML

Это суперсила шаблонов. Представьте, что у вас список из 100 друзей. В HTML вам пришлось бы писать тег <li> 100 раз вручную. С Jinja2 мы пишем цикл один раз, а он повторяется столько, сколько нужно.

Python (список): friends = ["Барт", "Лиза", "Гомер"]

HTML (Шаблон):

<ul>
  {% for hero in friends %}
      <li>Это мой друг: {{ hero }}</li>
  {% endfor %}
</ul>

Результат: Браузер покажет 3 пункта списка. Если друзей станет 1000, код шаблона не изменится!

Часть 6: Условия (If / Else)

Мы можем показывать разные куски сайта разным людям.

{% if user_is_admin %}
    <button>Удалить сайт</button>
    <p>Привет, Босс!</p>
{% else %}
    <p>Привет, обычный пользователь.</p>
{% endif %}

Логика if/else работает прямо внутри HTML. Это позволяет делать страницы интерактивными и персонализированными.

Итоги урока и Домашнее задание

Мы узнали:

1. render_template — связывает Python и HTML-файлы.
2. Jinja2 — позволяет вставлять Python-переменные в HTML.
3. {{ }} — вывести текст.
4. {% %} — выполнить команду (цикл или условие).

Проверь себя!