Делюсь своей реализацией built-in тегов для формирования breadcrumbs с поддержкой разметки schema.org, а также поддержкой bootstrap css.
Написал данные теги, чтобы ускорить скорость разработки сайта. Теперь работа двигается значительно быстрее, поскольку код стал компактнее, а поправить ошибки в разметке breadcrumbs стало значительно проще, поскольку исправлять код теперь нужно только в одно месте.
Допустим, у вас есть приложение core, которое отвечает за некоторый общий функционал и в нём есть каталог template_tags с файлом core.py для формирования всех встраиваемых тегов. Добавим туда 3 inclusion tags и один simple tag для формирования 4 компонентов breadcrumb.
- 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. К тому же в моём случае там есть иконка вместо тектса title, поэтому и шаблон у него будет другой.
В случае двух других тегов нам понадобится указывать позицию.
Шаблоны
Сразу оговорюсь по поводу иконки home. Я использую пакет иконок 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>
Применение тегов в шаблоне
Ну и приведу кусок кода из шаблона статьи, где это применяется в боевых условиях.
{% 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 строчек в шаблоне статьи пришлось бы писать для правильной разметки каждый компонент. Количество строчек код увеличилось бы втрое, а при увеличении данного однообразного функционала поддерживать код сайта и быстро исправлять становится всё сложнее.