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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Поддержать автора Donate

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Как стать автором?

Внесите вклад в развитие сообщества EVILEG.

Узнайте, как стать автором сайта.

Изучить
Donate

Добрый день, Дорогие Пользователи !!!

Я Евгений Легоцкой, разработчик EVILEG. И это мой хобби-проект, который помогает учиться программированию другим программистам и разработчикам

Если сайт помог вам, и вы хотите также поддержать развитие сайта, то вы можете сделать пожертвование следующими способами

PayPalYandex.Money
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг Timeweb
АП
2 июня 2020 г. 22:11
Алексей Пикенин

C++ - Тест 005. Структуры и Классы

  • Результат:75баллов,
  • Очки рейтинга2
2 июня 2020 г. 14:04
Даниил Чижевский

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

  • Результат:86баллов,
  • Очки рейтинга6
a
1 июня 2020 г. 11:15
alekseyttrv

C++ - Тест 005. Структуры и Классы

  • Результат:83баллов,
  • Очки рейтинга4
Последние комментарии
31 мая 2020 г. 9:15
IscanderChe

Как установить OpenCV на Qt под Windows

Добавлю от себя: на Windows 10 x64 с MinGW 7.3.0 в CMake надо установить флаг OPENCV_ENABLE_ALLOCATOR_STATS=OFF, тогда всё скомпилится нормально.
29 мая 2020 г. 14:00
Евгений Легоцкой

Django - Урок 023. Like Dislike система с помощью GenericForeignKey

Думал так, но похоже что нет. {{ post.votes.likes.user.username }} Это же QuerySet будет, а не отдельный единственный объект {% for vote in post.votes %} {{ vote.user.username …
29 мая 2020 г. 12:43
Владислав Меленчук

Django - Урок 023. Like Dislike система с помощью GenericForeignKey

А как получить имя пользователя, который поставил лайк? Думал так, но похоже что нет. {{ post.votes.likes.user.username }}
29 мая 2020 г. 7:30
Евгений Легоцкой

Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце

У меня работает. Исправлял в проекте, который приложен к статье. А что происходит в вашем коде, с учётом места вызова этого кода, я знать не могу ;) Дебажьте и добавляйте условия, кото…
Сейчас обсуждают на форуме
МА
2 июня 2020 г. 10:40
Михаил А

Qt- C++ QTableView подсветить строку

Да, спасибо.
2 июня 2020 г. 3:46
Евгений Легоцкой

Медиа файлы Google Firebase

Картинки можете попробовать сжимать через QPixmap, там есть возможность установки scaleFactor, через него можете устанавливать нужные параметры. А что касается конвертации видео, то лучше п…
2 июня 2020 г. 3:01
Евгений Легоцкой

Перехват обращения к локальным файлам QWebEngineView

В вашем случае вполне адекватное решение. Так сказать меньше зло. В противном случае пришлось бы очень много переписывать и перепиливать.
a
1 июня 2020 г. 11:26
alekseyttrv

SSL на Android

у меня стоит версия Qt 5.14.2. В настройках android поставил openssl из коробки, и этот прроект автоматически стянулся. Достаточно было только добавить в .pro-файл строку после этого и все …
1 июня 2020 г. 3:21
Евгений Легоцкой

QModelIndex становится не действительным, но валидный

Не гоните лошадей. quintptr aid вам не нужно сохранять. Попробуйте ограничиться только колонкой и строкой. А также используете метод index() вашей модели, чтобы по строке и колонке возвраща…
О нас
Услуги
© EVILEG 2015-2020
Рекомендует хостинг TIMEWEB