Evgenii Legotckoi
Evgenii LegotckoiMarch 21, 2023, 4:17 a.m.

Django - Lesson 062. How to write a block-template tabbar tag like the blocktranslate tag

In this article, I'll show you exactly how you can write a simple block template tag, like the blocktranslate tag in Django .

These block template tags have an opening tag and a closing tag, and the most common one I would call the blocktranslate tag, which allows you to translate entire pieces of html code, not just individual sentences. The tag will look like this:

{% blocktranslate %}This string will have {{ value }} inside.{% endblocktranslate %}

In this case, the tag has a blocktranslate opening tag and an endblocktranslate closing tag, and the content inside is being manipulated.

Personally, I wrote a few simple tags for myself to simplify writing template code on the site. One such tag is the tabber tag inside which I also use tab_item tags.

This reduces coding in templates and makes the template friendlier and easier to maintain.

As a result, my template code may look like this.

{% load tabbar tab_item from myapp %}

{% url 'myapp:settings_main' as the_settings_main_url %}
{% url 'myapp:settings_notification' as the_settings_notification_url %}

{% tabbar %}
  {% tab_item _('Main') the_settings_main_url True %}
  {% tab_item _('Notifications') the_settings_notification_url %}
{% end_tabbar %}

As a result, these template tags generate the following html code

<div class="overflow-hidden">
  <div class="nav nav-tabs border-bottom flex-nowrap">
    <a class="text-nowrap nav-item nav-link active" href="/ru/myapp/settings/main/">Основное</a>
    <a class="text-nowrap nav-item nav-link" href="/ru/myapp/settings/notification/">Уведомления</a>
  </div>
</div>

As you can see, quite standard bootstrap Tab Bar code is generated here.

And if this particular case may not be something that may require writing such a tag, then knowing how to write such a tag can come in handy in more complex layouts, or where there are many places on the site where such tabs are used. Which will be very useful, since in order to change the layout in all parts of the site, it will be enough to change only the code of these template tags.

Now let's start learning how to write such a template tag.

Application structure

Let's say we have an application myapp that will contain these template tags. This requires that directories and files with the following structure be created in this application (in addition to those that are created by default)

  • myapp
    • templates
      • myapp
        • tabbar.html
        • tab_item.html
    • templatetages
      • __init__.py
      • myapp.py

tabbar tag in myapp.py file

This file will contain the python code for processing the tag in the template, and next to it is the init .py file, which initializes myapp in the templatetags directory as a tag library. By default, this file is empty, but it is needed there.

Let's start by adding the necessary imports.

# -*- coding: utf-8 -*-

import random

from django import template
from django.template.loader import render_to_string
from django.utils.translation import ugettext_lazy as _

register = template.Library()

Then we will register the template tag. The important point is that usually functions that are registered as a block template tag start with the do_ prefix. As you can see in the code below, as soon as the Django parser finds the {% tabbar %} tag, it immediately starts parsing the template in the form of a list of nodes, then the closing tag, which in this case is named end_tabbar , while the first token from the parser is removed. As I understand it, the node inside which the tabbar tag was found is deleted, as a result, it is no longer processed. The list of nodes is passed to the custom node class ( TabBarNode ) for further processing.

@register.tag("tabbar")
def do_tabbar(parser, token):
    tag_name, args, kwargs = parse_tag(token, parser)
    nodelist = parser.parse(('end_tabbar',))
    parser.delete_first_token()
    return TabBarNode(nodelist)

Further, the TabBarNode class is taken for processing, which is initialized with a list of nodes (nodelist), which is rendered into the tabbar_content variable. The render method causes further parsing of all other nodes until all nodes are parsed and rendered to the state of a regular string, which can be inserted as a tabbar_content variable in the template and rendered using the render_to_string function in the render method. Have you noticed that
nodelist also has a render method?

class TabBarNode(template.Node):
    def __init__(self, nodelist):
        self.nodelist = nodelist

    def render(self, context):
        context.update({'tabbar_content': self.nodelist.render(context)})

        return render_to_string(
            template_name='myapp/tabbar.html',
            context=context.flatten()
        )

tabbar.html

The template in this case looks rather trivial.

<div class="overflow-hidden">
  <div class="nav nav-tabs border-bottom flex-nowrap">
    {{ tabbar_content }}
  </div>
</div>

tab_item tag in myapp.py file

But tab_item is already registered as inclusion_tag , and for understanding it is already simpler.

There are input arguments that are responsible for:

  • Text
  • Link
  • Indicate css link activity
@register.inclusion_tag('myapp/tab_item.html', takes_context=True)
def tab_item(context, title, url='#', active=False):
    return {
        'title': title,
        'url': url,
        'active': active,
    }

tab_item.html

And take a look at the tag template

<a class="text-nowrap nav-item nav-link{% if active %} active{% endif %}" href="{{ url }}">{{ title }}</a>

Conclusion

The result is a little simplified way to write a TabBar on a website using block tags.

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!

NSProject
  • March 24, 2023, 7:15 p.m.

Хорошая статья. И тут я подумал что на её основе можно отлично сформировать "хлебные крошки". Самое простое распарсить адрес. Так и поступил бы но лень

Evgenii Legotckoi
  • March 24, 2023, 8:09 p.m.

Почитайте эту статью про "хлебные крошки"

NSProject
  • March 25, 2023, 12:35 a.m.

Да не я так к примеру просто написал.

Comments

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

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

  • Result:70points,
  • Rating points1
РК

Qt - Test 001. Signals and slots

  • Result:84points,
  • Rating points4
Last comments
k
kmssrFeb. 9, 2024, 7:43 a.m.
Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVADec. 25, 2023, 11:30 p.m.
Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJoDec. 25, 2023, 9:38 p.m.
Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
GvozdikDec. 19, 2023, 10:01 a.m.
Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Now discuss on the forum
BlinCT
BlinCTJune 25, 2024, 1 p.m.
Нарисовать кривую в qml Всем привет. Имеется Лист листов с тосками, точки получаны интерполяцией Лагранжа. Вопрос, как этими точками нарисовать кривую? ChartView отпадает сразу, в qt6.7 появился новый элемент…
Evgenii Legotckoi
Evgenii LegotckoiJune 25, 2024, 3:11 a.m.
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
BlinCT
BlinCTMay 5, 2024, 5:46 p.m.
Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
Evgenii Legotckoi
Evgenii LegotckoiMay 3, 2024, 2:07 a.m.
Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.
IscanderChe
IscanderCheApril 30, 2024, 4:22 p.m.
Во Flask рендер шаблона не передаётся в браузер Доброе утро! Имеется вот такой шаблон: <!doctype html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="{{ url_…

Follow us in social networks