Django - Урок 043. template tags для формирования breadcrumb с поддержкой shema.org

Django, templatetags, python

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

Виртуальный хостинг со скидкой 10 процентов
Виртуальный хостинг со скидкой 10 процентов
EVILEG предлагает надёжный хостинг со скидкой 10% на виртуальный хостинг и 5% на VPS
Поддержать автора Donate

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
22 июля 2019 г. 7:26
Pavel K.

Qt - Тест 001. Сигналы и слоты

  • Результат:68баллов,
  • Очки рейтинга-1
o
22 июля 2019 г. 6:26
oksik193

C++ - Тест 001. Первая программа и типы данных

  • Результат:80баллов,
  • Очки рейтинга4
ВД
21 июля 2019 г. 23:33
Влад Долгов

C++ - Тест 001. Первая программа и типы данных

  • Результат:40баллов,
  • Очки рейтинга-8
Последние комментарии
21 июля 2019 г. 6:03
Евгений Легоцкой

да, наверное, 32-х разрядную поддержку уже давно поа было выкинуть. К слову, у вас много проектов под Android? Часто много где вижу вопросы о том, пишет ли кто-то вообще на Qt под мобильные сист…
20 июля 2019 г. 14:41
Андрей Янкович

Очень полезная информация, увы уже выкинул поддержку 32 битных бедняг.
20 июля 2019 г. 9:31
Михаиллл

Вот так qDebug()<<"position:"<<event->scenePos();
20 июля 2019 г. 8:49
Михаиллл

Добрый день. Как можно узнать координату на графической сцене при отпускании клавиши мыши?
Сейчас обсуждают на форуме
22 июля 2019 г. 8:41
BlinCT

Вот только что нашел в инете, у человека такая же ошибка. Вроде бы таже самая проблема https://stackoverflow.com/questions/37633709/how-to-create-qtquick-window-outside-the-main-thread…
22 июля 2019 г. 3:58
Евгений Легоцкой

Добрый день! Нужен совет сообщества по разработке функционала проверки орфографии. Одна из идей - добавить проверку орфографии при наборе текста статей. Полагаю, что наиболее аде…
22 июля 2019 г. 3:01
Евгений Легоцкой

Возможно, если при сохранении файла установить права доступа на файл. Что-то такое должно быть у QFile
22 июля 2019 г. 3:01
Евгений Легоцкой

Я отрисовываю квадрат в его локальной системе координат от верхнего левого угла (-30,-30) до его правого нижнего угла (30,30). Поэтому мне нужно указать размеры объекта через boundingRect()…
20 июля 2019 г. 11:04
Михаиллл

Так и с ресурсами работает QImage image(":/Images/Images/1.png");
Ищу работу?
5,000.00 руб. - 15,000.00 руб.
Дизайнер
Moskovskiy, Moscow, Russia
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы

EVILEG
О нас
Услуги
Присоединяйтесь к нам
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB