Хлебные крошки(breadcrumbs) для Django сайта

27.04.2025

21.05.2025

419

Теги:

Джанго

Джанго приложение

Описание

Это Django-приложение, которое генерирует "Хлебные крошки"(breadcrumbs) той страницы, на которой оно установленно. Из-за особенности устройства Django-фреймворка, вся генерация происходит на сервере, то есть SSR-метод рендеринга.

Установка и настройка

Чтобы установить данный пакет можно скачать с этого сайта исходники или через PyPi:

pip install django-referer-breadcrumbs

После установки нужно подключить приложение и соответствующий мидлвари в settings.py:

INSTALLED_APPS = [ ... 'django_referer_breadcrumbs', ... ] MIDDLEWARE = [ ... 'django_referer_breadcrumbs.middleware.BreadcrumbsMiddleware', ... ]

И теперь, чтобы данное приложение смогло найти страницы на которые нужно будет добавить "хлебные крошки", твои представления должны будут возвращать TemplateResponse объект. Например, у меня есть стандартное представление статей, которое возвращает HttpResponse используя шорткат функцию render:

from django.shortcuts import render def article(request): ... return render(request, template_name, context)

Вместо функции render, нужно подставить TemplateResponse. Вот так:

from django.template.response import TemplateResponse def article(request): ... return TemplateResponse(request, template_name, context)

С настройкой и установкой необходимого django-приложения мы закончили. Теперь о том как и куда вставлять шаблон для хлебных крошек.

Как использовать

Для того чтобы использовать данное приложение, необходимо вставить соответствующий блок шаблона там, где бы ты хотел видеть хлебные крошки. Вот этот блок:

{% if isBreadcrumbsMiddlewareConnected %} {% include 'breadcrumbs.html' with separator='⟫' first_separator='|' last_separator=")" %} {% endif %}

Как ты можешь видеть, приложение определяет переменную isBreadcrumbsMiddlewareConnected с той целью, чтобы знать подключено ли приложение или нет. Дальше есть следующие переменный которые ты можешь отправить на рендеринг на сервер:

separator - какой символ будет отделять каждый из элементов пути
first_separator - это самый первый символ, который будет перед первым элементом
last_separator - это самый последний символ, который будет после последнего элемента
custom_urls - ещё одна переменная, это список адресов, который бы ты хотел отрендерить вместо сгенерированного

Это будет выглядеть, как-то так:

Так же для дополнительной стилизации хлебных крошек я определил несколько CSS-классов:

breadcrumbs-container - для всего контейнера
breadcrumbs-separator-first - для первого сепаратора
breadcrumbs-separator - для всех сепараторов
breadcrumbs-separator-last - для последнего сепаратора

Как это работает

Большинство django-приложений, которые имплементируют элемент хлебных крошек, делают его через передачу списка элементов в самих представлениях. Моё приложение работает по другому принципу.

Источником для элементов хлебных крошек служит пара ключ-значение HTTP_REFERER в словаре META в самом запросе:

from urllib.parse import urlparse from django.template.response import TemplateResponse class BreadcrumbsMiddleware: def __init__(self, get_response): self.get_response = get_response def __call__(self, request): response = self.get_response(request) return response def remove_items(self, list, item): # remove the item for all its occurrences c = list.count(item) for i in range(c): list.remove(item) return list def process_template_response(self, request, response: TemplateResponse): ref_url = request.META.get('HTTP_REFERER') urls = [] if ref_url: parsed_url = urlparse(ref_url) folders_url = self.remove_items(parsed_url.path.split('/'),'') if len(parsed_url.query) > 0: folders_url.append(f'?{parsed_url.query}') current_url = f"{parsed_url.scheme}://{parsed_url.netloc}/" for folder in folders_url: current_url += folder + '/' urls.append({ 'path': current_url, 'name': folder }) # Removing last '/' from the last element if len(parsed_url.query) > 0: urls[-1]['path'] = urls[-1]['path'][:-1] if response.context_data is not None: response.context_data.update({'isBreadcrumbsMiddlewareConnected': True}) response.context_data.update({'breadcrumbs_urls': urls}) return response

После того как был получен ссылающийся URL, он обрабатывается и возвращается в специальные шаблоны для отрисовки. Хочу заметить, что из-за особенностей источника адреса, то есть HTTP_REFERER, если зайти на страницу через поиск гугл или на прямую, вбив адрес в поисковую строку, никаких хлебных крошек не получится.

Вот как выглядят шаблоны для отрисовки хлебных крошек, breadcrumbs.html:

{% load static %} <div class="breadcrumbs-container"> {% if custom_urls %} {% include 'breadcrumbs-items.html' with urls=custom_urls %} {% else %} {% include 'breadcrumbs-items.html' with urls=breadcrumbs_urls %} {% endif %} </div>

А это непосредственно, breadcrumbs-items.html:

{% load static %} {% for url in urls %} {% if forloop.counter == 1 %} {% if first_separator %} {{first_separator}} {% else %} {{separator}} {% endif %} {% endif %} {% if forloop.counter < urls|length and forloop.counter > 1 or forloop.counter == urls|length and forloop.counter != 1 %} {{separator}} {% endif %} <a href="{{url.path}}">{{url.name}}</a> {% if forloop.counter == urls|length %} {% if last_separator %} {{last_separator}} {% else %} {{separator}} {% endif %} {% endif %} {% endfor %}