Использование HTMX, hx-push-url

просто ищу подробные указания о том, как hx-push-url поскольку я столкнулся с некоторыми проблемами и ищу какое-то направление. Я относительный новичок в Django и только начал использовать HTMX.

Цель. Я создаю простую галерею изображений и имею сетку миниатюр, я использую HTMX для загрузки списка изображений в этой галерее, когда пользователь нажимает на миниатюру.

Это работает хорошо, я использую Django-HTMX и условие if в View для обработки запроса HTMX, который передает частичный HTML на страницу миниатюр.

Проблема заключалась в том, что мой URL не менялся. Моя миниатюра http://127.0.0.1:8000/gallery/ и когда я нажимаю на галерею для просмотра изображений внутри, URL остается тем же, поэтому я использовал htmx-push-url, чтобы URL отображался как http://127.0.0.1:8000/gallery/news. Это работает, и URL изменяется.

Далее, дальше.

У меня есть кнопка на странице списка изображений, которая возвращает вас на страницу миниатюр, но при ее использовании я получаю ошибку 404, а также когда я обновляю страницу списка изображений, я получаю 404. Очевидно, что для http://127.0.0.1:8000/gallery/news не существует URL и вида. У меня просто нет идей, как это решить.

Когда я смотрю в консоли, я получаю HTMX-target error при нажатии на кнопку назад, и ничего не происходит. И, как я уже сказал, при обновлении получаю 404.

Приведенный ниже код должен лучше объяснить ситуацию.

Модели

    name = models.CharField(max_length=200, null=True)
    description = models.CharField(max_length=200, null=True, blank=True,
                                   help_text="Gallery description on gallery page")
    slug = AutoSlugField(populate_from='name')
    created = models.DateTimeField()
    visable = models.BooleanField(default=False)
    type = models.ForeignKey(Category, on_delete=models.CASCADE, null=True, blank=True)
    image = models.ForeignKey('Media', on_delete=models.CASCADE)
    album_images = models.ManyToManyField('Media', related_name="album_pictures")

    class Media(models.Model):

    timestamp = models.DateTimeField()
    image = models.ImageField(upload_to="media")
    order = models.IntegerField(default=0)
    visable = models.BooleanField(default=True)
    categories = models.ForeignKey(Category, on_delete=models.CASCADE, null=True, blank=True)

URLS (релевантные)

path("gallery/", views.GalleryView, name="gallery"),

Виды

def GalleryView(request):

    if request.htmx:
        slug = request.GET.get('slug')
        pics = get_object_or_404(Albums, slug=slug)
        context = {'pictures': Media.objects.filter(album_pictures=pics),
                   'description': Albums.objects.filter(slug=slug)}
        return render(request, 'main/gallery-detail.html', context=context)

    context = {'objects_list': Albums.objects.all()}
    return render(request, 'main/gallery.html', context=context)

Галерея HTML {релевантный код)

<div class="gallery-body">
{% for img in objects_list %}
    <div class="item col-xs-6 col-sm-6 col-md-4">
        <figure class="overlay"> <a hx-post="{{ request.path }}?slug={{ img.slug }}"
                                    hx-target=".gallery-body"
                                    hx-swap="outerHTML"
                                    hx-push-url="/gallery/{{ img.slug }}"
                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
          {% endfor %}

Частица, которая вызывается для показа изображений в галереях.

 <button class="btn btn-primary"
                  hx-get="{% url 'main:gallery' %}"
                  hx-target=".gallery-body"
                  hx-push-url="/gallery"
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
                  <h6>Back to Gallery page</h6></button></div>

Вернуться на верх