Улучшения и новые возможности для приложения News

В рамках этого плана мы добавим новые интерактивные функции и проведем технические оптимизации в приложении news, чтобы повысить вовлеченность пользователей (Time on Site, Activity Rate), улучшить SEO-показатели сайта и оптимизировать загрузку изображений.

User Review Required

IMPORTANT

Миграции базы данных: Новые модели Comment и NewsReaction потребуют запуска команд makemigrations и migrate. Мы выполним их автоматически во время фазы выполнения.

Капча для гостей: Для отправки комментариев неавторизованными пользователями (гостями) будет использоваться django-simple-captcha (уже установленная в системе). Нам понадобится сгенерировать правильные поля формы в forms.py.

Open Questions

Вопросов нет. Мы планируем реализовать универсальный вариант: разрешить оставлять комментарии как зарегистрированным пользователям (автоматически подставляя их профиль), так и гостям (с вводом имени, email и капчи для защиты от спама).

Proposed Changes

Компонент: База данных и модели (Django Models)

Добавление моделей комментариев и реакций, а также методов автоматической оптимизации изображений.

[MODIFY] models.py

• Добавим модель Comment с поддержкой древовидных ответов (поле parent).

• Добавим модель NewsReaction для хранения реакций по сессиям/IP.

• Импортируем io.BytesIO и PIL.Image для оптимизации загружаемых картинок (News.image и NewsCategory.image). В методах save() добавим конвертацию в WebP формат перед сохранением файла на диск, если загружено новое изображение.

Компонент: Формы и валидация (Forms)

Создание формы для комментариев.

[NEW] forms.py

• Создадим CommentForm на основе Comment модели.

• Для гостей будем выводить поля name, email и captcha (CaptchaField).

• Для зарегистрированных пользователей скроем поля контактов и капчи, связав комментарий с request.user.

Компонент: Логика отображения и API (Views & Routing)

Добавление эндпоинтов для сохранения комментариев и фиксации реакций, а также обновление контекста деталей статьи.

[MODIFY] views.py

• Обновим news_detail: будем передавать список одобренных комментариев (сгруппированных по родителям) и существующие реакции на статью.

• Добавим AJAX представление post_comment для обработки отправки комментариев.

• Добавим AJAX представление toggle_reaction для обработки лайков/реакций.

[MODIFY] urls.py

• Зарегистрируем пути для api/post-comment/<int:news_id>/ и api/toggle-reaction/<int:news_id>/.

Компонент: Шаблоны и Интерфейс (Templates & CSS)

Добавление разметки комментариев, виджета реакций, аудио-плеера и стилизация.

[MODIFY] detail.html

• Аудиоверсия: Добавим виджет аудио-плеера (кнопки Play/Pause, выбор скорости, индикация чтения) на базе браузерного Web Speech API (SpeechSynthesis). Работает полностью на клиенте без внешних платных сервисов.

• Реакции: Добавим блок реакций под текстом статьи с анимированными счетчиками и micro-interactions (появление смайликов при наведении/клике).

• Комментарии: Добавим секцию древовидных комментариев со стильными карточками и формой ответа. Кнопка «Ответить» будет перемещать форму под родительский комментарий через JS.

[MODIFY] README.md

• Документируем новые возможности: древовидные комментарии, Web Speech API плеер, оптимизацию WebP и систему реакций.

Компонент: Поисковая оптимизация (SEO)

[MODIFY] sitemaps.py

• Отфильтруем отложенные публикации (published_at__lte=timezone.now()) в NewsSitemap, чтобы поисковики не индексировали закрытые статьи.

Verification Plan

Automated Tests

• Запустим python manage.py test news для проверки отсутствия регрессии.

Manual Verification

1. Откроем детальную страницу новости.

2. Проверим воспроизведение статьи через синтезатор речи (Web Speech API).

3. Поставим реакцию на новость (проверим инкремент счетчика и сохранение в сессии).

4. Оставим комментарий от имени гостя (проверим валидацию капчи) и от имени авторизованного пользователя.

5. Проверим появление новости и категорий в sitemap.xml.

6. Загрузим изображение в новость и убедимся в его конвертации в .webp в директории media/news/.