Django – Підручник 043. шаблонні теги для формування хлібної крихти з підтримкою shema.org

templatetags, Django, python

Ділюсь своєю реалізацією вбудованих тегів для формування 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>

Застосування тегів у шаблоні

Ну і наведу шматок коду із шаблону статті, де це застосовується у бойових умовах.

{% 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 рядків у шаблоні статті вам довелося прописувати кожен компонент для правильної розмітки. Кількість рядків коду збільшилася б утричі, а зі збільшенням цього монотонного функціоналу стає складніше підтримувати код сайту та швидко його виправляти.