Django - Сабақ 062. Блок-үлгі қойындысының тегін blocktranslate тегі сияқты қалай жазуға болады

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

Бұл мақалада мен сізге Django ішіндегі blocktranslate тегі сияқты қарапайым блок үлгі тегін қалай жазуға болатынын көрсетемін.

Бұл блок үлгісінің тегтерінің ашу тегі және жабу тегі бар, және ең көп тарағанын мен 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 қойындысының штрих коды жасалады.

Ал егер бұл нақты жағдай мұндай тег жазуды қажет етпеуі мүмкін болса, онда мұндай тегті қалай жазу керектігін білу күрделі орналасуларда немесе сайтта мұндай қойындылар қолданылатын көптеген орындарда ыңғайлы болуы мүмкін. Бұл өте пайдалы болады, өйткені сайттың барлық бөліктеріндегі орналасуды өзгерту үшін тек осы үлгі тегтерінің кодын өзгерту жеткілікті болады.

Енді осындай үлгі тегін жазуды үйренуге кірісейік.

Қолданбаның құрылымы

Бізде осы үлгі тегтерін қамтитын myapp қолданбасы бар делік. Бұл осы қолданбада келесі құрылымы бар каталогтар мен файлдарды жасауды талап етеді (әдепкі бойынша жасалғандарға қосымша)

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

myapp.py файлындағы ## қойынды тегі

Бұл файлда үлгідегі тегті өңдеуге арналған python коды болады және оның жанында templatetags каталогындағы myapp қолданбасын тегтер кітапханасы ретінде инициализациялайтын __init__.py файлы болады. Әдепкі бойынша, бұл файл бос, бірақ ол сол жерде қажет.

Қажетті импортты қосудан бастайық.

# -*- 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 , талдаушыдан бірінші таңбалауыш жойылған кезде. Менің түсінуімше, қойынды тегі табылған түйін жойылды, нәтижесінде ол енді өңделмейді. Түйіндер тізімі әрі қарай өңдеу үшін реттелетін түйін класына ( 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 класы өңдеуге алынады, ол tabbar_content айнымалысына көрсетілетін түйіндер тізімімен (түйін тізімі) инициализацияланады. Көрсету әдісі барлық түйіндер талданғанша және үлгідегі tabbar_content айнымалысы ретінде кірістірілетін және ішіндегі render_to_string функциясы арқылы көрсетілетін кәдімгі жолдың күйіне шығарылғанша, барлық басқа түйіндерді одан әрі талдауды тудырады. көрсету әдісі. Соны байқадыңыз ба
nodelist де көрсету әдісі бар ма?

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

sure.html

Бұл жағдайда үлгі өте тривиальды болып көрінеді.

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

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 жазудың сәл жеңілдетілген әдісі.