htmx ilə Django: qismən şablonlar, hx-get/post/swap, formalar, CSRF, sonsuz scroll

Niyə htmx

Çox vaxt səhifənin yalnız kiçik hissəsini canlandırmaq lazım olur: axtarış, "daha çox" düyməsi, daxili forma. htmx bunu HTML atributları ilə edir: element sorğu göndərir, server HTML fraqment qaytarır, htmx onu səhifəyə yerləşdirir. Django görünüşləri və şablonları qalır, build mərhələsi və JSON qatı lazım deyil.

💡 Əvvəl tam səhifəli adi versiyanı yazın. htmx onu yalnız yaxşılaşdırır və JavaScript olmadan da sayt işləyir.

Quraşdırma

pip install django-htmx yazın. Paket request.htmx və köməkçilər əlavə edir, htmx kitabxanasının özü isə <script> teqi ilə qoşulur.

# 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>

<body>-dəki hx-headers CSRF tokenini hər sorğuya əlavə edir. {% django_htmx_script %} DEBUG zamanı xətalı cavabları brauzerdə göstərir.

⚠️ django-htmx htmx kitabxanasını daxil etmir. Skripti CDN-dən və ya statik fayllardan qoşun.

Qismən şablonlar və axtarış

Şablonu tam səhifəyə və fraqmentə bölün. request.htmx həqiqi olanda görünüş fraqment qaytarır.

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

from .models import Post