Evgenii Legotckoi
Evgenii LegotckoiJan. 6, 2019, 7:48 a.m.

Django - Tutorial 043. template tags to form breadcrumb with shema.org support

I share my implementation of built-in tags to form breadcrumbs with support for schema.org markup, as well as support for bootstrap css.

Wrote these tags to speed up site development speed. Now the work moves much faster, because the code has become more compact, and correcting errors in the breadcrumbs markup has become much easier, since now you only need to correct the code in one place.


Suppose you have a core application that is responsible for some common functionality and it has a directory template_tags with the file core.py for the formation of all embedded tags. Add 3 inclusion tags and one simple tag to form 4 breadcrumb components.

  • breadcrumb_schema - to keep current schema from schema.org markup
  • breadcrumb_home - to form the root of the site
  • breadcrumb_item - to form elements of the site structure tree
  • breadcrumb_active - to form an element of the current page of the site

core.py

Look at the contents of the python file with these tags.

# -*- 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
    }

If everything is clear with the breadcrumb_schema () tag, it simply returns the definition of the markup scheme, then there are more questions with other tags.

All markup is formed from three main parameters:

  • url - link to the item page
  • title - page title
  • position - all elements in the markup should be numbered. For example, 0, 1, 2, 3, etc.

For breadcrumb_home() I do not add any position because there is no point in it, there will always be position 0. Besides, in my case there is an icon instead of a title, so the template will have a different one.

In the case of the other two tags, we will need to specify the position.

Шаблоны

Immediately make a reservation about the home icon. I use the Material Design Icons package, so there will be a span tag with classes 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>

Applying tags in a template

Ну и приведу кусок кода из шаблона статьи, где это применяется в боевых условиях.

{% 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>

Conclusion

Now imagine that instead of these 9 lines in the article template, you would have to write each component for proper markup. The number of lines the code would increase threefold, and with the increase of this monotonous functionality, it becomes more difficult to maintain the code of the site and quickly fix it.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

Comments

Only authorized users can post comments.
Please, Log in or Sign up
AD

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
m

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:80points,
  • Rating points4
m

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:20points,
  • Rating points-10
Last comments
ИМ
Игорь МаксимовNov. 22, 2024, 7:51 p.m.
Django - Tutorial 017. Customize the login page to Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii LegotckoiOct. 31, 2024, 9:37 p.m.
Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZEOct. 19, 2024, 3:19 p.m.
Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь МаксимовOct. 5, 2024, 2:51 p.m.
Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas5July 5, 2024, 6:02 p.m.
QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Now discuss on the forum
Evgenii Legotckoi
Evgenii LegotckoiJune 24, 2024, 10:11 p.m.
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
t
tonypeachey1Nov. 15, 2024, 2:04 p.m.
google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
NSProject
NSProjectJune 4, 2022, 10:49 a.m.
Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
9
9AnonimOct. 25, 2024, 4:10 p.m.
Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

Follow us in social networks