Глава 22 · Веб-разработка с Python

Статические файлы: CSS, изображения и JavaScript

Одна страница — несколько независимых запросов: HTML собирается заново, статика отдаётся как есть.

Открывая страницу со стилями, браузер на самом деле делает несколько отдельных HTTP-запросов: один за HTML, ещё по одному — за каждый CSS-файл, изображение и JavaScript-файл, на которые страница ссылается. Такие файлы называют статическими: сервер отдаёт их без изменений, в отличие от HTML, который Jinja рендерит заново для каждого запроса.

Flask по умолчанию ожидает статические файлы в папке static/ рядом с приложением и отдаёт их по адресам вида /static/имя_файла:

todo-app/
  app.py
  templates/
    base.html
  static/
    style.css

Адрес статического файла удобнее не прописывать в шаблоне вручную, а получать через url_for('static', filename='style.css') — эта функция строит URL на основе конфигурации маршрутизации Flask, а не просто склеивает строку. Это заодно избавляет от лишней работы, если структура папок когда-нибудь изменится:

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