Evgenii Legotckoi
Evgenii Legotckoi21 марта 2023 г. 4:17

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

В этой статье расскажу о том, как именно можно написать простой блочный шаблонный тег, наподобие тега 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 на сайте с помощью блочный тегов.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

NSProject
  • 24 марта 2023 г. 19:15

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

Evgenii Legotckoi
  • 24 марта 2023 г. 20:09

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

NSProject
  • 25 марта 2023 г. 0:35

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

Комментарии

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

Qt - Тест 001. Сигналы и слоты

  • Результат:84баллов,
  • Очки рейтинга4
Ua

Qt - Тест 001. Сигналы и слоты

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

Qt - Тест 001. Сигналы и слоты

  • Результат:47баллов,
  • Очки рейтинга-6
Последние комментарии
ИМ
Игорь Максимов22 ноября 2024 г. 21:51
Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii Legotckoi31 октября 2024 г. 23:37
Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZE19 октября 2024 г. 17:19
Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов5 октября 2024 г. 16:51
Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas55 июля 2024 г. 20:02
QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Сейчас обсуждают на форуме
f
firstlunoxod15 февраля 2025 г. 13:46
Рисование на QGraphicsScene при зажатой кнопке мыши Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
Дмитрий
Дмитрий3 февраля 2025 г. 16:24
Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
NW
Nayo Wai30 января 2025 г. 19:22
не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
n
nkly3 января 2025 г. 12:52
Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
M
Marsel17 августа 2023 г. 0:26
OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.

Следите за нами в социальных сетях