Евгений Легоцкой6 января 2019 г. 7:48

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

Содержание

Делюсь своей реализацией 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

Комментарии

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

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

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

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

Посмотреть Хостинг
Е

C++ - Тест 003. Условия и циклы

  • Результат:0баллов,
  • Очки рейтинга-10
J
  • Jenek
  • 17 января 2021 г. 15:40

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:10баллов,
  • Очки рейтинга-10
ЕК

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:90баллов,
  • Очки рейтинга8
Последние комментарии
r
  • retmas
  • 17 января 2021 г. 4:09

Qt/C++ - Урок 074. Генерация псевдослучайных чисел с использованием случайной библиотеки STD

Дмитрий, решает. Просто автор, видимо, не сильно озаботился изучением документации QRandomGenerator. Да и в листинге с использованием qrand вызов функции qsrand на каждой итерации цикла нав…
g
  • gromoff
  • 10 января 2021 г. 12:53

Поздравляю всё Сообщество EVILEG с Новым Годом!!!

#include <iostream>using namespace std;int main() { cout << "Happy New Year and Thank you!"; return 0;}
МЗ
МЗ

Django - Урок 003. Модель, шаблон и представление в Django

from django.shortcuts import *from django.http import *from django.http import HttpResponseRedirectfrom django.contrib.auth.forms import *from django.urls import reverse_lazyfrom django.views …
Сейчас обсуждают на форуме

Qt: INTERNAL ERROR: failed to install GetMessage hook: 1158

Здравствуйте. Вопрос по простенькому серверу на ПК. Устройства-клиенты подключаются к локальной сети, передают данные на сервер. Задача сервера при каждом подключении клиента (раз в минуту) созд…

Не получается prefetch_related на M2M полях

join случается, если делать select_related префетч делается в два запроса - сначала изначальный запрос, а потом связанные с ним объекты. мерж этих запросов происходит в рантайме можн…

Проблемы с QTableView

кто-нибуль может подсказать как воткнуть QWidget в tableview header ?

QSqlTableModel - Как добавить картинки в таблицу, чтобы они отражались в диалоговом окне, но не были частью модели

Если у вас модель, в переопределнном методе QVariant data надо привязываться к Qt::EditRole, это если открывающийся диалог редактирования является частью таблицы
t

Работа с потоками в разных версиях Qt

Добрый день, впервые начал проект в котором активно используются потоки и наткнулся на один не очень приятный момент, например: Существует главный поток (GUI) и созданный поток. Связь…
О нас
Услуги
© EVILEG 2015-2020
Рекомендует хостинг TIMEWEB