htmx и Django: частичные шаблоны, hx-get/post/swap, формы, CSRF, бесконечная прокрутка

Зачем htmx

Часто нужно оживить лишь кусочек страницы: поиск, кнопку «ещё», встроенную форму. htmx делает это HTML-атрибутами: элемент шлёт запрос, сервер возвращает HTML-фрагмент, htmx подставляет его в страницу. Остаются view и шаблоны Django, без сборки и слоя JSON.

💡 Сначала сделайте обычную версию на целых страницах. htmx её лишь улучшает, и без JavaScript сайт работает.

Подключение

Установите pip install django-htmx. Пакет добавляет request.htmx и помощники, а сама библиотека htmx подключается тегом <script>.

# settings.py
INSTALLED_APPS = [
    # ...
    "django_htmx",
]

MIDDLEWARE = [
    # ...
    "django_htmx.middleware.HtmxMiddleware",
]

{% load django_htmx %}
<!doctype html>
<html lang="en">
<head>
  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
  {% django_htmx_script %}
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
  {% block content %}{% endblock %}
</body>
</html>

hx-headers на <body> кладёт CSRF-токен в каждый запрос. {% django_htmx_script %} при DEBUG показывает в браузере ответы с ошибками.

⚠️ django-htmx не включает библиотеку htmx. Подключите скрипт с CDN или из статики.

Частичные шаблоны и поиск

Разделите шаблон на целую страницу и фрагмент. View отдаёт фрагмент, когда request.htmx истинно.

# blog/views.py
from django.shortcuts import render

from .models import Post