Делать хлебные крошки удобнее всего на основе пользовательских тегов.
Будет удобнее создать "мета" пакет, который в последующем сможем использовать в любом приложении в проекте. Для этого в корне проекта создаем папку 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>