Django - Урок 062. Как написать блочный шаблонный тег tabbar наподобие тега blocktranslate

tag, templatetags, Django, Django 3, Django 4, template

В этой статье расскажу о том, как именно можно написать простой блочный шаблонный тег, наподобие тега blocktranslate в Django .

Такие блочные шаблонные теги имеют открывающий тег и закрывающий тег, и наиболее часто встречающимся я бы назвал тег blocktranslate , который позволяет переводить целый куски кода html, а не только отдельные предложения. Выглядеть же такой тег будет следующим образом.

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

В данном случае тег имеет открываеющий тег blocktranslate и закрывающий тег endblocktranslate , а с контентом внутри происходит некая манипуляция.

Лично я написал для себя несколько простых тегов для упрощения написания кода шаблонов на сайте. Одним из таких тегов является тег tabber внутри которого я также использую теги tab_item .

Это сокращает написание кода в шаблонах и делает шаблон более дружелюбным и более легко поддающимся поддержке.

В итоге код шаблона у меня может выглядеть следующим образом.

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

В результате данные шаблонные теги генерируют следующий html код

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

Как видите, здесь генерируется довольно стандартный для bootstrap код Tab Bar.

И если данный конкретный случай возможно не является чем-то, что может потребовать написания такого тега, то знание, как написать подобный тег может пригодится в более сложных вариантах вёрстки, либо там, где на сайте много мест использования подобных табов. Что будет весьма полезно, поскольку для изменения вёрстки во всех частях сайта будет достаточно изменить лишь код этих шаблонных тегов.

А теперь приступим к изучению, как написать подобный шаблонный тег.

Структура приложения

Допустим у нас есть приложение myapp , которое будет содержать данные шаблонные теги. Для этого необходимо, чтобы в данном приложении были созданы директории и файлы со следующей структурой (помимо тех которые создаются по умолчанию)

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

тег tabbar в файле myapp.py

Данный файл будет содержать python код для обработки тега в шаблоне, а также рядом с ним находится файл init .py, который инициализирует myapp в директории templatetags в качестве библиотеки тегов. По умолчанию данный файл пустой, но он там нужен.

Для начала добавим необходимые импорты

# -*- 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()

После чего зарегистрируем шаблонный тег. Важный момент состоит в том, что обычно функции, которые регистрируются в качестве блочного шаблонного тега начинаются с префикса do_ . Как видите в коде ниже, как только парсер Django находит тег {% tabbar %}, то он сразу начинает парсить шаблон в виде списка нод, то закрывающего тега, который в данном случае назван end_tabbar , при этом первый токен из парсер удаляется. Как я понял это удаляется нода, внутри которой был найден тег tabbar, в итоге он уже не обрабатывается. Список нод передаётся в кастомный класс ноды ( TabBarNode ) для дальнеёшей обработки.

@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)

Далее за обработку принимается класс TabBarNode , который инициализируется списком нод (nodelist), который рендерится в переменную tabbar_content . Метод render вызывает дальнейший парсинг всех остальных нод, пока все ноды не распарсятся и не отрендерятся до состояния обычной строки, которую можно вставить в виде переменной tabbar_content в шаблон и отрендерить с помощью функции render_to_string в методе render . Вы уе заметили, что
nodelist тоже имеет метод render ?

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

Шаблон в данном случае выглядит довольно тривиально.

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

тег tab_item в файле myapp.py

А вот tab_item регистрируем уже как inclusion_tag , и для понимания он уже более простой.

Здесь имеются входные аргументы, которые отвечают за:

• Текст
• Ссылку
• Указание css активности ссылки

@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

И взглянем на шаблон тега

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

Заключение

В результате получился небольшой упрощённый способ написания TabBar на сайте с помощью блочный тегов.