Удалить все

ЗАГРУЗКА ...

Генератор содержания(индекса) статьи для Django сайта

25.04.2025

21.05.2025

295

Теги:

Джанго

Джанго приложение

Парсер

Описание

Это инструмент представляет собой Django-приложение, которое генерирует "Содержание" той страницы, на которой оно установленно. Из-за особенности устройства Django-фреймворка, вся генерация происходит на сервере, то есть SSR-метод рендеринга. Так же данное приложение создаёт анкорные ссылки на собранные главы, при наличии атрибута id у последних.

Настройка и установка

Начнём с утановки необходимого пакета. Его можно скачать и тут, но давай лучше скачаем с PyPi. Не забудь установить виртуальное окружение и активировать его соответственно.

pip install django-simple-toc

Теперь настроим проект. В файле settings.py подключи приложение и соответствующую мидлвари:

INSTALLED_APPS = [ ... 'django_simple_toc', ... ] MIDDLEWARE = [ ... 'django_simple_toc.middleware.TableofcontentMiddleware', ... ]

И теперь, чтобы данное приложение смогло найти страницы на которые нужно будет добавить "Содержание", твои представления должны будут возвращать TemplateResponse объект. Например, у меня есть стандартное представление статей, которое возвращает HttpResponse используя шорткат функцию render:

from django.shortcuts import render def article(request): ... return render(request, template_name, context)

Вместо функции render, нужно подставить TemplateResponse. Вот так:

from django.template.response import TemplateResponse def article(request): ... return TemplateResponse(request, template_name, context)

С настройкой и установкой необходимого django-приложения мы закончили. Теперь о том как и куда вставлять шаблон "Содержания".

Как использовать

Определяетесь с шаблоном и местом где будет ваш индекс статьи. Я обычно вставляю блок содержания статьи в самое начало. После нужно вставить такой вот кусочек шаблона:

{% if isTableOfContentMiddlewareConnected %} {% include 'table-of-content.html' with NO_REF='False' LIST_STYLE='none' WITH_HEADER_TYPE='True' WITH_PADDING='True' WITH_TITLE='Index' DISALLOWED_TAGS='h1,h6' DISALLOWED_HEADERS='Вам так же может понравится, Ссылки и источники' %} {% endif %}

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

Переменные шаблона для кастомизации

NO_REF - допустимые значения, True, False. Определяет, будет ли создана внутренняя анкорная ссылка на главу. Ссылки будут созданы только в том случае если прописан атрибут id в соответствующих заголовках
LIST_STYLE - допустимые значения, все которые поддерживает на данный момент стиль list-style-type. Какие значки списков использовать.
WITH_HEADER_TYPE - допустимые значения, True, False. Определяет, будут ли добавлены перед элементом имя тега (h1, h2, h3, h4, h5, h6)
WITH_PADDING - допустимые значения, True, False. Определяет, будут ли отступы
WITH_TITLE - допустимые значения, любая строка. Если не определено, будет использоваться значение по умолчанию: Table of content
DISALLOWED_TAGS - допустимые значения, строка содержащая h1, h2, h3, h4, h5, h6. Определяет, какие заголовки вставлять, а какие нет, в зависимости от имени тега.
DISALLOWED_HEADERS - допустимые значения, строка. Определяет, какие заголовки вставлять, а какие нет, в зависимости от содержания заголовка.
isTableOfContentMiddlewareConnected - чтобы убедиться, что приложение django-simple-toc соединенно с проектом правильно.

Классы для стилизации и дополнительной кастомизации

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

toc-title
toc-list-container
toc-list-item
toc-list-tag-name
toc-list-tag-content

Как это работает

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

Итак, я реализовал это как Django-приложение, с небольшим мидлвари, то есть прокладкой между финальным отрендеренным шаблоном и другими, такими же мидлвари. Вот код мидлвари:

from bs4 import BeautifulSoup from django.template.response import TemplateResponse class TableofcontentMiddleware: def __init__(self, get_response): self.get_response = get_response def __call__(self, request): response = self.get_response(request) return response def process_template_response(self, request, response: TemplateResponse): soup = BeautifulSoup(response.rendered_content, 'lxml') headers_tags = ('h1', 'h2', 'h3', 'h4', 'h5', 'h6') headers = soup.find_all(headers_tags) toc_headers = [] for header in headers: toc_headers.append({ 'name': header.name, 'content': header.text, 'ref': header.get('id'), 'padding': int(header.name[1:]) * 2 }) response.context_data.update({'isTableOfContentMiddlewareConnected': True}) response.context_data.update({'toc_headers': toc_headers}) return response

Я переопределил 3 метода.

Методы __init__ и __call__ нас не интересуют, ибо это минимально необходимый код для его работы. Единственное что скажу, так это то, что в метод __init__ выполняется один раз при запуске проекта и там можно определять общие члены класса для дальнейшей работы.

Метод process_template_response, вызывается сразу после возврата тем или иным представлением, (будь то функция или класс), объекта класса TemplateResponse. Именно по этому, нужно было переделать представление статьи.

В самой функции мы парсим отрендеренный контент и находим все теги заголовков. После, проходим по ним списком и обновляем хранилище контекстных данных.

Есть два шаблона, которые используются данным приложением, table-of-content.html:

{% load static %} {% if WITH_TITLE %} <h2 class="toc-title"><b> {{WITH_TITLE}} </b></h2> {% else %} <h2 class="toc-title"><b> Table of content </b></h2> {% endif %} <ol class="toc-list-container"> {% for header in toc_headers %} {% if header.name not in DISALLOWED_TAGS and header.content not in DISALLOWED_HEADERS %} <li class="toc-list-item" style="list-style-type: {{LIST_STYLE}}; {% if WITH_PADDING == 'True' %} padding-left: {{header.padding}}px; {% endif %} "> {% if NO_REF != 'True' %} {% if header.ref %} <a href="#{{header.ref}}"> {% include 'table-of-content-element.html' with WITH_HEADER_TYPE=WITH_HEADER_TYPE %} </a> {% else %} {% include 'table-of-content-element.html' with WITH_HEADER_TYPE=WITH_HEADER_TYPE %} {% endif %} {% else %} {% include 'table-of-content-element.html' with WITH_HEADER_TYPE=WITH_HEADER_TYPE %} {% endif %} </li> {% endif %} {% endfor %} </ol>

И table-of-content-element.html соответственно

{% if WITH_HEADER_TYPE == 'True' %} <span class="toc-list-tag-name">{{header.name}}</span> - {% endif %} <b> <span class="toc-list-tag-content">{{header.content}}</span> </b>

Что значит каждая переменная, ты уже знаешь из первых глав.