Делюсь своей реализацией встроенных тегов для формирования breadcrumb с поддержкой разметки schema.org, а также поддержкой bootstrap css.
Написал эти теги, чтобы ускорить скорость разработки сайта. Теперь работа продвигается намного быстрее, потому что код стал более компактным, а исправлять ошибки в разметке хлебных крошек стало намного проще, так как теперь исправлять код нужно только в одном месте.
Допустим, у вас есть ядро приложения, которое отвечает за какой-то общий функционал и в нем есть директория template_tags с файлом core.py для формирования всех встроенных тегов. Добавьте 3 тега включения и один простой тег, чтобы сформировать 4 компонента хлебной крошки.
- breadcrumb_schema - сохранить текущую схему из разметки schema.org
- breadcrumb_home - для формирования корня сайта
- breadcrumb_item - для формирования элементов дерева структуры сайта
- breadcrumb_active - для формирования элемента текущей страницы сайта
core.py
Посмотрите на содержимое файла python с этими тегами.
# -*- coding: utf-8 -*-
from django import template
register = template.Library()
@register.simple_tag
def breadcrumb_schema():
return "http://schema.org/BreadcrumbList"
@register.inclusion_tag('core/breadcrumb_home.html')
def breadcrumb_home(url='/', title=''):
return {
'url': url,
'title': title
}
@register.inclusion_tag('core/breadcrumb_item.html')
def breadcrumb_item(url, title, position):
return {
'url': url,
'title': title,
'position': position
}
@register.inclusion_tag('core/breadcrumb_active.html')
def breadcrumb_active(url, title, position):
return {
'url': url,
'title': title,
'position': position
}
Если с тегом breadcrumb_schema() все понятно, он просто возвращает определение схемы разметки, то с другими тегами вопросов больше.
Вся разметка формируется из трех основных параметров:
- url - ссылка на страницу товара
- title - Заголовок страницы
- position - все элементы в разметке должны быть пронумерованы. Например, 0, 1, 2, 3 и т. д.
Для breadcrumb_home() я не добавляю никакой позиции, потому что в ней нет смысла, всегда будет позиция 0. Кроме того, в моем случае вместо заголовка иконка, поэтому шаблон будет иметь другой вид. один.
В случае двух других тегов нам нужно будет указать позицию.
Шаблоны
Сразу оговорюсь про домашнюю иконку. Я использую пакет Material Design Icons , поэтому будет тег span с классами mdi mdi-home .
breadcrumb_home.html
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ url }}">
<span class="mdi mdi-home">
<span class="d-none" itemprop="name">{{ title }}</span>
</span>
</a>
<meta itemprop="position" content="1" />
</li>
breadcrumb_item.html
<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>
breadcrumb_active.html
<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>
Applying tags in a template
Ну и приведу кусок кода из шаблона статьи, где это применяется в боевых условиях.
{% extends 'home/base.html' %}
{% load core %}
<ul class="breadcrumb bg-light" itemscope itemtype="{% breadcrumb_schema %}">
{% url 'home:index' as home_index_url %}
{% breadcrumb_home home_index_url 'EVILEG' %}
{% url 'knowledge:index' as knowledge_index_url %}
{% breadcrumb_item knowledge_index_url _('Articles') 2 %}
{% breadcrumb_item article.section.get_absolute_url article.section.title 3 %}
{% breadcrumb_active article.get_absolute_url article.title 4 %}
</ul>
Вывод
А теперь представьте, что вместо этих 9 строк в шаблоне статьи вам пришлось бы прописывать каждый компонент для правильной разметки. Количество строк кода увеличилось бы втрое, а с увеличением этого монотонного функционала становится сложнее поддерживать код сайта и быстро его исправлять.
