Политика конфиденциальностиКонтактыО сайтеОтзывыGitHubDonate
© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB

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 хостинг.

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
ГК
20 марта 2019 г. 9:01
Геннадий Костоянский

C++ - Тест 002. Константы

  • Результат:0баллов,
  • Очки рейтинга-10
ГК
20 марта 2019 г. 8:46
Геннадий Костоянский

C++ - Тест 002. Константы

  • Результат:25баллов,
  • Очки рейтинга-10
ГК
20 марта 2019 г. 8:00
Геннадий Костоянский

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

  • Результат:100баллов,
  • Очки рейтинга10
Последние комментарии
MU
20 марта 2019 г. 15:43
Maciej Urmański

It's possible to simply add vote option for non logged users?
20 марта 2019 г. 9:45
Евгений Легоцкой

Добрый день. Поппробуйте домен localhost, а url соответственно http://localhost Возможно, потребуется указать порт. Например, так http://localhost:8000
19 марта 2019 г. 12:57
AlexanderBardin

Добрый день. А проверить работоспособность локально как-то можно не указывая реальнй сайт (еще в разработке)
16 марта 2019 г. 13:55
Дмитрий

Спасибо за статью. Давно итересует следующий вопрос: с помощью переменных QMAKE_TARGET_COMPANYQMAKE_TARGET_PRODUCTQMAKE_TARGET_DESCRIPTIONможно задать свойства компилируемой программы, о...
JS
12 марта 2019 г. 10:19
Jean Stefanovich

Большое спасибо за разъяснения!
Сейчас обсуждают на форуме
20 марта 2019 г. 12:26
Евгений Легоцкой

Лучше стараться избегать этого. Нормального механизма нет. Я просто выдёргиваю из бэкенда перевёденные куски шаблона, если нужно что-то задействовать в JS.
17 марта 2019 г. 22:47
Евгений Легоцкой

Добрый день. Вот, нашлось у меня немного времени. Делается это через шаблон проектирования наблюдатель. GraphKS_mfvSlup.zip
ЧГ
15 марта 2019 г. 21:52
Чарльз Грин

спасибо, попробую, отпишусь
m
15 марта 2019 г. 19:41
mihamuz

Сори догадался)
n
12 марта 2019 г. 16:57
newbie.works.with.QT

Большооооое спасибо!!!!!Не передать как я вам благодарен, спасибо что всегда отзываетесь.Теперь я смогу продолжить работу в QT!!! (пробую писать бота (Я как вы могли догадаться немного не пр...
Присоединяйтесь к нам в социальных сетях

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