Создание сайта на Django: Урок 37, создание тегов шаблона

Создание сайта на Django: Урок 37, создание тегов шаблона

avatar
7 | (offline)
❤️‍🔥Notehunter Developer
Добавлено:
Категория: Руководства «Django»
Комментариев: 0

Django предоставляет нам уже встроенные теги для использования в шаблоне, но также и дает возможность создать свои собственные теги с помощью вспомогательных функций.

Ознакомиться со всеми тегами вы можете по этой ссылке

Создание тегов

  • simple_tag: обрабатывает данные и возвращает строку.
  • include_tag: обрабатывает данные и возвращает отрисованный шаблон.

В папке нашего приложения "blog" создайте папку "templatetags" с файлом __init__.py, и рядом с ним создайте файл blog_tags.py.

Структура выглядеть будет следующим образом:

Создание простого тега

Создадим тег для вывода общего количества опубликованных на сайте статей.

modules/blog/templatetags/blog_tags.py

from django import template

from modules.blog.models import Article

register = template.Library()


@register.simple_tag
def total_articles():
    return Article.custom.all().count()

Пояснения:

  • Каждый тег должен быть зарегистрирован в библиотеке тегов (register)
  • С помощью декоратора @register.simple_tag мы регистрируем необходимый тег как simple_tag.
  • В этом теге мы выводим количество опубликованных статей на сайте.

Внимание: после добавления нового тега, нам необходимо перезапустить сервер Django для включения созданных тегов в библиотеку.

Давайте попробуем вывести наш созданный тег в шаблоне.

Для этого я в папке templates создам файл sidebar.html

templates/sidebar.html

{% load blog_tags %}

<div class="card border-0">
    <div class="card-body">
         <h6 class="card-title">
            Количество статей на сайте
        </h6>
        <div class="card-text">
            В Django Blog добавлено материалов: {% total_articles %}
        </div>
    </div>
</div>

Пояснения:

  • Для подгрузки наших тегов нам необходимо их добавить в загрузку с помощью тега {% load %}.
  • Выводим наш тег с помощью {% total_articles %}.

Давайте подключим sidebar.html в файл main.html

<!DOCTYPE html>
<html lang="ru">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- INCLUDE CSS -->
    <link href="{% static 'plugins/bootstrap-5.2.0-dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
    {% include 'navbar.html' %}
    <div class="row">
        <div class="col-md-8">
            {% include 'includes/messages.html' %}
            {% block content %}

            {% endblock %}
            {% include 'pagination.html' %}
        </div>
        <div class="col-md-4">
            {% block sidebar %}
            {% endblock %}
            {% include 'sidebar.html' %}
        </div>
    </div>
</div>
<script src="{% static 'plugins/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'custom/js/backend.js' %}"></script>
{% block script %}
{% endblock %}
</body>
</html>

Отлично, давайте взглянем на результат на нашем сайте:

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

Создание включающих тегов

Теперь создадим тег с отрисовкой шаблона для последних комментариев.

modules/blog/templatetags/blog_tags.py

@register.inclusion_tag('includes/tags/last_comments.html')
def show_latest_comments(count=5):
    latest_comments = Comment.objects.all().select_related('author')[:count]
    return {'latest_comments': latest_comments}

Пояснения:

  • Данный фрагмент кода мы зарегистрировали в библиотеке тегов с помощью декоратора @register.inclusion_tag, в котором определили шаблон для рендеринга includes/tags/last_comments.html.
  • Тег принимает значение count, что обозначает количество необходимое для вывода, по умолчанию 5 комментариев, но мы можем задать свое значение в {% show_latest_comments 10 %}
  • Тег возвращает словарь значений (QuerySet), который мы должны пройти циклом в созданном шаблоне last_comments.html для рендеринга.
  • Сразу добавлю select_related('author') для оптимизации SQL запроса.

Создадим папку tags в папке templates/includes, а затем в папке tags создадим last_comments.html

templates/includes/tags/last_comments.html

<ul>
{% for comment in latest_comments %}
  <li>
    <p>{{ comment.author }} / {{ comment.content }}</p>
  </li>
{% endfor %}
</ul>
  • Здесь ничего подгружать не надо, сразу делаем цикл из переданного словаря из нашего тега.

Добавим вывод в sidebar.html

templates/sidebar.html

{% load blog_tags %}

<div class="card border-0">
    <div class="card-body">
         <h6 class="card-title">
            Количество статей на сайте
        </h6>
        <div class="card-text">
            В Django Blog добавлено материалов: {% total_articles %}
        </div>
    </div>
</div>

<div class="card border-0">
    <div class="card-body">
         <h6 class="card-title">
            Последние комментарии на сайте
        </h6>
        <div class="card-text">
            {% show_latest_comments 10 %}
        </div>
    </div>
</div>

Посмотрим на результат

Отлично. Таким образом вы можете создавать теги так, как пожелаете, любые манипуляции с QuerySet вам доступны. 

Теги записи: DjangoDev, Уроки Django, Создание сайта,
Комментарии к статье 0
Комментариев нет
Форма добавления комментария (необходима регистрация)