Хлебные крошки в Django

Обзор обновления aveCRM 7.5
Как выстроить иерархию новостей в Django
Хлебные крошки в Django

Делать хлебные крошки удобнее всего на основе пользовательских тегов.

Будет удобнее создать "мета" пакет, который в последующем сможем использовать в любом приложении в проекте. Для этого в корне проекта создаем папку templatetags, в которой создаем папку breadcrumb, внутри нее папку templatetags и пустой файл __init__.py. Внутри пакета нужно создать два файла, пустой __init__.py и breadcrumb.py, в последнем размещаем следующий код:

from django import template

register = template.Library()

@register.simple_tag
def breadcrumb_schema():
    return "http://schema.org/BreadcrumbList"
 
 
@register.inclusion_tag('breadcrumb/home.tpl')
def breadcrumb_home(url='/', title=''):
    return {
        'url': url,
        'title': title
    }
 
 
@register.inclusion_tag('breadcrumb/item.tpl')
def breadcrumb_item(url, title, position):
    return {
        'url': url,
        'title': title,
        'position': position
    }
 
 
@register.inclusion_tag('breadcrumb/active.tpl')
def breadcrumb_active(url, title, position):
    return {
        'url': url,
        'title': title,
        'position': position
    }

В коде выше есть реализация для следующих компонентов хлебных крошек:

  • breadcrumb_schema - вывод схемы разметки, в нашем случае это http://schema.org/BreadcrumbList
  • breadcrumb_home - для вывода ссылки на главную страницу сайта
  • breadcrumb_item - для вывода элементов в виде ссылок
  • breadcrumb_active - для вывода последнего элемента - текущей страницы

У двух последних тегов в коде есть параметр position, который отвечает за вывод номера элементов в разметке. Ссылка на главную страницу всегда идет с индексом 0.

Наш код готов, осталось оформить вывод хлебных крошек. Студия Реймакс использует при верстке сайтов фреймворк bootstrap, поэтому используем его для оформления. В корневой папке проекта нужно добавить в папке templates папку breadcrumb, в которой будут следующие шаблоны:

active.tpl

<li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <link itemprop="item" href="{{ url }}">
    <span itemprop="name">{{ title }}</span>
    <meta itemprop="position" content="{{ position }}">
</li>

home.tpl

<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="{{ url }}">
        <span itemprop="name">{{ title }}</span>
    </a>
    <meta itemprop="position" content="1">
</li>

item.tpl

<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="{{ url }}">
        <span itemprop="name">{{ title }}</span>
    </a>
    <meta itemprop="position" content="{{ position }}">
</li>

Теперь на странице новости можно добавить следующий код

{% load breadcrumb %}
<ol class="breadcrumb  bg-light p-2" itemscope itemtype="{% breadcrumb_schema %}">
  {% breadcrumb_home '/' 'Главная' %}
  {% url 'news_index' as news_index_url %}
  {% breadcrumb_item news_index_url 'Новости' 1 %}
  {% breadcrumb_item news.category.get_absolute_url news.category.title 2 %}
  {% breadcrumb_active news.get_absolute_url news.title 3 %}
</ol>

Вы готовы начать работу или получить консультацию?

Самый простой способ - написать нам. Не стесняйтесь задавать вопросы. Мы готовы начать обсуждение вашего проекта сейчас, сделайте следующий шаг, напишите нам.