flask•Лекция•Python/Flask

Урок 3: Наследование шаблонов, статические файлы и url_for

👀 Загрузка...

Обзор урока: Принцип DRY

На прошлом уроке мы создали несколько страниц. Но если вы откроете их код, вы увидите, что мы копировали одни и те же части: <html>, <head>, меню навигации.

Главный закон программирования

В программировании есть главный закон: DRY (Don't Repeat Yourself) — Не Повторяйся. Если вы копируете код, вы создаете проблемы. Захотите изменить цвет меню — придется править 10 файлов.

Цель урока: Научиться использовать Наследование шаблонов и добавлять Картинки и CSS.

Часть 1: Наследование шаблонов (Extends)

Схема наследования шаблонов: базовый шаблон (рамка) и дочерние страницы (холсты)

Flask позволяет создать один Родительский шаблон (Base), в котором будет все общее: шапка, меню, подвал, подключение скриптов. А Дочерние шаблоны (Child) будут содержать только уникальный контент.

Аналогия (Рамка для картин):
- Base.html — Это красивая рамка на стене. Она висит всегда.
- Index.html / About.html — Это холсты, которые мы вставляем внутрь этой рамки.

Часть 2: Теги Block и Extends

Как это работает в коде Jinja2? Давайте посмотрим на взаимодействие двух файлов:

Мы размечаем "дырку", куда будет вставляться контент.

<body>
    <nav>Меню сайта</nav> {% block content %} 
    {% endblock %}
    
    <footer>Подвал сайта</footer> </body>

Часть 3: Статические файлы (Static)

Структура директорий Flask проекта с папками templates и static

Наши сайты пока выглядят скучно. Им нужны CSS (Стили) и Изображения. Такие файлы называются статическими, потому что они не меняются (в отличие от HTML, который генерируется Python'ом).

Строгое правило структуры

Flask требует специального порядка. Все картинки и стили должны лежать в папке с именем static.

Структура проекта:

app.py
templates/ (для HTML)
static/ (для CSS, JPG, PNG, JS)

Часть 4: Магия url_for для файлов

В обычном HTML вы пишете <img src="foto.jpg">. В Flask так делать нельзя. Flask динамический. Адрес страницы может быть сложным (/user/profile/edit), и обычная ссылка сломается.

Мы просим Flask самого сгенерировать правильный путь с помощью url_for.

Синтаксис: {{ url_for('название_папки', filename='имя_файла') }}

Примеры использования:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 
<img src="{{ url_for('static', filename='my_cat.png') }}">

Часть 5: Ссылки на маршруты

Функция url_for нужна не только для картинок, но и для ссылок в меню.

Лучшая практика (Best Practice)

Вместо того чтобы гадать, какой адрес у страницы (/about или /about-us), мы ссылаемся на название Python-функции. Если вы потом поменяете URL в Python с /about-me-page на /info, ссылка в меню не сломается, потому что имя функции осталось прежним!

@app.route("/about-me-page")
def about():  # Имя функции: about
    return render_template("about.html")

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

Мы узнали:

DRY: Копировать код — плохо.
{% extends "base.html" %}: Наследование шаблонов.
{% block name %}: Место для вставки контента.
Папка static: Место для картинок и CSS.
url_for: Генератор правильных ссылок.

ДЗ: Редизайн Блога

Создайте base.html с общим меню и подвалом.
Переделайте все свои страницы, чтобы они наследовали base.html.
Скачайте красивую фоновую картинку в папку static.
Подключите CSS-файл и настройте стили (цвета, шрифты), используя фоновую картинку.