mod: add Canonical

CHANGELOG.md

@@ -5,6 +5,22 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.0.0/),
 и этот проект придерживается [Semantic Versioning](https://semver.org/lang/ru/).
 
+## [0.2.5] — 2025–02–13
+
+### Добавлено
+- Редизайн списка постов в блоге: шахматный порядок, вертикальные разделители, улучшенная адаптивность для мобильных устройств.
+- Поле `updated_at` (_Дата обновления_) в модели, админке, блогах, страницах и `sitemaps.xml` и микроразметке `Schema.org` для улучшения SEO, GEO и LLMO.
+- `README.md` с описанием проекта онлайн-типографа, его особенностей, технического стека и инструкциями по установке и запуску.
+- Автоматическая генерация URL (slug) из заголовка поста с транслитерацией (при сохранении в админке).
+- Отображение заголовков постов в списке админки без HTML-мнемоник (декодирование ` ` и др.).
+
+### Изменено
+- Исправлены ошибки в шаблоне `post_list.html` (и полностью переработан дизайн в целом).
+  - Улучшено отображение даты и скрытие декоративных изображений в списке постов на мобильных устройствах.
+  - Оптимизированы отступы и типографика в списке постов.
+- Формирование `slag` из `title` при сохранении поста или страницы с использованием библиотеки `pytils` для транслитерации с очистикой от HTML-мнемоник и создания URL-дружественных строк.
+- Дизайн и вёрстка страниц для постов блога и вспомогательных страниц для мобильных устройств (адаптивность, скрытие картинки-обложки).
+
 ## [0.2.4] - 2025-02-12
 
 ### Добавлено

README.md

@@ -1,2 +1,121 @@
-# Сайт etpgrf -- единая типографика для веба / Site etpgrf -- effortless typography for web
+# ETPGRF Site — Онлайн-типограф
 
+![Version](https://img.shields.io/badge/version-0.2.5-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![Python](https://img.shields.io/badge/python-3.13-yellow)
+![Django](https://img.shields.io/badge/django-6.0-green)
+
+Официальный сайт проекта **etpgrf** — единой типографики для веба.
+Сайт предоставляет удобный интерфейс для типографирования текстов, а также содержит документацию, блог и новости проекта.
+
+🌐 **Живое демо:** [typograph.cube2.ru](https://typograph.cube2.ru)
+
+Зеркала репозитория:
+*   [GitHub](https://github.com/erjemin/etpgrf-site)
+*   [GitVerse](https://gitverse.ru/erjemin/etpgrf-site)
+*   [Cube2](https://git.cube2.ru/erjemin/2026-etpgrf-site) Gitea
+
+## Особенности
+
+### Онлайн-типограф
+*   Построен на базе библиотеки etpgrf (см.: [GitHub](https://github.com/erjemin/etpgrf), [GitVerse](https://gitverse.ru/erjemin/etpgrf), [Сube2](https://git.cube2.ru/erjemin/2025-etpgrf) и [PyPI](https://pypi.org/project/etpgrf/)).
+*   Поддержка русского и английского языков.
+*   Гибкие настройки (кавычки, тире, неразрывные пробелы, висячая пунктуация).
+*   Мгновенное копирование результата.
+*   Подсветка спецсимволов (неразрывные пробелы, мягкие переносы и тому подобное) в редакторе.
+
+### Блог и контент
+*   Встроенный движок блога и статических страниц.
+*   Поддержка HTML в контенте.
+*   Автоматическая генерация `sitemap.xml`.
+*   Полноценная SEO-оптимизация (Open Graph, Twitter Cards, Schema.org JSON-LD).
+*   RSS-лента (в планах).
+
+### Технический стек
+*   **Backend:** Python 3.13, Django 6.0.
+*   **Frontend:** Bootstrap 5, Alpine.js, HTMX, CodeMirror 6.
+*   **Infrastructure:** Docker, Docker Compose, Nginx, Gunicorn.
+*   **CI/CD:** Gitea Actions (сборка и деплой).
+
+## Установка и запуск
+
+### Предварительные требования
+*   Docker и Docker Compose
+*   Git
+
+### Быстрый старт (Docker)
+
+1.  **Клонируйте репозиторий:**
+    ```bash
+    git clone https://github.com/erjemin/etpgrf-site.git
+    cd etpgrf-site
+    ```
+
+2.  **Создайте файл `.env`:**
+    Скопируйте пример и отредактируйте его:
+    ```bash
+    cp .env.example .env
+    ```
+    Обязательно задайте `SECRET_KEY` и `ADMIN_URL`.
+
+3.  **Запустите контейнеры:**
+    ```bash
+    docker compose up -d --build
+    ```
+
+4.  **Откройте сайт:**
+    Перейдите по адресу [http://localhost:8000](http://localhost:8000).
+
+### Локальная разработка (без Docker)
+
+1.  **Установите зависимости (через Poetry):**
+    ```bash
+    poetry install
+    ```
+
+2.  **Создайте файл `.env`:**
+    Скопируйте пример и отредактируйте его (если еще не сделали):
+    ```bash
+    cp .env.example .env
+    ```
+    *Примечание: Убедитесь, что ваш способ запуска (IDE или терминал) подхватывает переменные из `.env`.*
+
+3.  **Активируйте виртуальное окружение:**
+    ```bash
+    poetry shell
+    ```
+
+4.  **Примените миграции:**
+    ```bash
+    python etpgrf_site/manage.py migrate
+    ```
+
+5.  **Запустите сервер разработки:**
+    ```bash
+    python etpgrf_site/manage.py runserver 8008
+    ```
+6.  **Откройте сайт:**
+    Перейдите по адресу [http://localhost:8008](http://localhost:8008).
+
+## Структура проекта
+
+*   `etpgrf_site/` — Основной код Django-проекта.
+    *   `typograph/` — Приложение типографа (главная страница, обработка текста).
+    *   `blog/` — Приложение блога (посты, страницы, sitemap).
+*   `data/` — Директория для хранения данных (SQLite) будет создан автоматически при запуске.
+*   `config/` — Конфигурационные файлы (Nginx).
+*   `public/static/` — Статические файлы (стили, скрипты, изображения), которые отдаются напрямую Nginx внутри Docker-контейнера.
+*   `media/` — Медиа-файлы (загружаемые пользователем), которые отдаются напрямую внешним Nginx (или внутренним в dev-режиме).
+*   `docker-compose.yml` — Конфигурация для разработки (по умолчанию).
+*   `docker-compose.prod.yml` — Конфигурация для продакшена (переименуйте в `docker-compose.yml` для использования).
+*   `.env` — Файл с переменными окружения (не хранится в репозитории, нужно создать самостоятельно на основе `.env.example`).
+
+## Лицензия
+
+Этот проект распространяется под лицензией MIT. Подробнее см. в файле [LICENSE](LICENSE).
+
+## Автор
+
+**Sergei Erjemin**
+*   GitHub: [@erjemin](https://github.com/erjemin)
+*   Gitea: [git.cube2.ru](https://git.cube2.ru)

etpgrf_site/__init__.py

@@ -2,7 +2,7 @@
 Основные возможности:
 - Веб-интерфейс для ввода текста и настройки параметров типографики.
 """
-__version__ = "0.2.4"
+__version__ = "0.2.5"
 __author__ = "Sergei Erjemin"
 __email__ = "erjemin@gmail.com"
 __license__ = "MIT"

etpgrf_site/blog/admin.py

@@ -1,17 +1,20 @@
 from django.contrib import admin
+from django.utils.html import format_html
+import html
 from .models import Post
 
 @admin.register(Post)
 class PostAdmin(admin.ModelAdmin):
-    list_display = ('title', 'post_type', 'is_published', 'published_at')
+    list_display = ('clean_title', 'post_type', 'is_published', 'published_at', 'updated_at')
     list_filter = ('post_type', 'is_published', 'published_at')
     search_fields = ('title', 'content', 'slug')
     prepopulated_fields = {'slug': ('title',)} 
     date_hierarchy = 'published_at'
+    readonly_fields = ('updated_at',)
     
     fieldsets = (
         (None, {
-            'fields': ('title', 'slug', 'post_type', 'is_published', 'published_at')
+            'fields': ('title', 'slug', 'post_type', 'is_published', 'published_at', 'updated_at')
         }),
         ('Контент', {
             'fields': ('image', 'excerpt', 'content')
@@ -21,3 +24,8 @@ class PostAdmin(admin.ModelAdmin):
             'classes': ('collapse',)
         }),
     )
+
+    @admin.display(description='Заголовок', ordering='title')
+    def clean_title(self, obj):
+        """Отображает заголовок без HTML-сущностей (  -> пробел)."""
+        return html.unescape(obj.title)

etpgrf_site/blog/migrations/0004_post_updated_at.py

@@ -0,0 +1,18 @@
+# Generated by Django 6.0.1 on 2026-02-11 11:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0003_alter_post_excerpt'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='post',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True, help_text='Автоматически обновляется при каждом сохранении.', verbose_name='Дата обновления'),
+        ),
+    ]

etpgrf_site/blog/migrations/0005_alter_post_slug.py

@@ -0,0 +1,18 @@
+# Generated by Django 6.0.1 on 2026-02-12 16:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0004_post_updated_at'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='post',
+            name='slug',
+            field=models.SlugField(blank=True, help_text='Уникальная часть адреса. Оставьте пустым для автогенерации.', max_length=255, unique=True, verbose_name='URL (slug)'),
+        ),
+    ]

etpgrf_site/blog/models.py

@@ -1,6 +1,13 @@
 from django.db import models
 from django.utils import timezone
 from django.urls import reverse
+from django.utils.text import slugify
+import html
+# Попробуем импортировать pytils, если он есть
+try:
+    from pytils.translit import slugify as pytils_slugify
+except ImportError:
+    pytils_slugify = None
 
 class PostType(models.TextChoices):
     BLOG = 'B', 'Пост в блог'
@@ -19,7 +26,8 @@ class Post(models.Model):
         verbose_name="URL (slug)",
         max_length=255, 
         unique=True, 
-        help_text="Уникальная часть адреса. Используйте латиницу, цифры и дефис. Например: my-new-post"
+        blank=True, # Разрешаем оставлять пустым в админке (заполнится в save)
+        help_text="Уникальная часть адреса. Оставьте пустым для автогенерации."
     )
     
     post_type = models.CharField(
@@ -43,13 +51,22 @@ class Post(models.Model):
         db_index=True,
         help_text="Дата, которая будет отображаться в блоге. Можно запланировать на будущее."
     )
+    updated_at = models.DateTimeField(
+        verbose_name="Дата обновления",
+        auto_now=True,
+        help_text="Автоматически обновляется при каждом сохранении."
+    )
     
     content = models.TextField(
         verbose_name="Контент",
+        blank=False,
+        null=False,
         help_text="Основной текст публикации. Поддерживает HTML."
     )
     excerpt = models.TextField(
         verbose_name="Краткое описание (тизер)",
+        blank=False,
+        null=False,
         help_text="Отображается в списке постов. Если оставить пустым, будет взято начало контента."
     )
     
@@ -97,5 +114,27 @@ class Post(models.Model):
 
     def get_absolute_url(self):
         if self.post_type == PostType.PAGE:
+            # Страницы живут в корневом urls.py без namespace
             return reverse('page_detail', kwargs={'slug': self.slug})
-        return reverse('post_detail', kwargs={'slug': self.slug})
+        # Посты живут в приложении blog с namespace 'blog'
+        return reverse('blog:post_detail', kwargs={'slug': self.slug})
+
+    def save(self, *args, **kwargs):
+        # Если слаг не заполнен, генерируем его из заголовка
+        if not self.slug:
+            # 1. Декодируем HTML-сущности (  -> " ")
+            clean_title = html.unescape(self.title)
+            # 2. Генерируем базовый слаг
+            if pytils_slugify:
+                base_slug = pytils_slugify(clean_title)
+            else:
+                base_slug = slugify(clean_title)
+            
+            # 3. Уникализация
+            self.slug = base_slug
+            counter = 1
+            while Post.objects.filter(slug=self.slug).exclude(pk=self.pk).exists():
+                self.slug = f"{base_slug}-{counter}"
+                counter += 1
+        
+        super().save(*args, **kwargs)

etpgrf_site/blog/sitemaps.py

@@ -11,4 +11,4 @@ class PostSitemap(Sitemap):
 
     def lastmod(self, obj):
         """Возвращает дату последнего изменения."""
-        return obj.published_at # Или можно добавить поле updated_at
+        return obj.updated_at # Используем дату обновления, а не публикации

etpgrf_site/blog/templates/blog/page_detail.html

@@ -2,9 +2,10 @@
 {% load static typograph_extras %}
 
 {# --- SEO --- #}
+{# В title и description НЕ используем escapejs, так как это HTML, а не JS #}
 {% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %} — ETPGRF{% endblock %}
-{% block description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|striptags|unescape|safe|truncatechars:160 }}{% endif %}{% endblock %}
+{% block description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
-{% block keywords %}{% if page.seo_keywords %}{{ post.seo_keywords }}{% else %}типограф, типографика, блог типограф, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев, лебедев{% endif %}{% endblock %}
+{% block keywords %}{% if page.seo_keywords %}{{ page.seo_keywords }}{% else %}типограф, типографика, блог типограф, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев, лебедев{% endif %}{% endblock %}
 
 {# --- Schema.org --- #}
  {% block schema %}<script type="application/ld+json">
@@ -23,30 +24,26 @@
      }
    },
    "datePublished": "{{ page.published_at|date:'Y-m-d' }}",
-   "dateModified": "{{ page.published_at|date:'Y-m-d' }}"
+   "dateModified": "{{ page.updated_at|date:'Y-m-d' }}"
  }
    </script>{% endblock %}
 
 {% block og_title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %}{% endblock %}
-{% block og_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|safe|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
+{% block og_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
 {% block og_image %}{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}{% endblock %}
 {% block twitter_title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title|striptags|unescape|safe }}{% endif %}{% endblock %}
-{% block twitter_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|striptags|unescape|safe|truncatechars:160 }}{% endif %}{% endblock %}
+{% block twitter_description %}{% if page.seo_description %}{{ page.seo_description }}{% else %}{{ page.excerpt|default:page.content|striptags|unescape|truncatechars:160 }}{% endif %}{% endblock %}
 {% block twitter_image %}{% if page.image %}{{ request.scheme }}://{{ request.get_host }}{{ page.image.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endif %}{% endblock %}
 
 {% block content %}
   <div class="row">
-
     {# Левая колонка: Дата и Картинка #}
     <div class="col-lg-2 align-self-start text-end mb-4">
       <p class="small align-self-end">
         <small class="bg-secondary bg-opacity-10 p-2 text-nowrap">{{ page.published_at|date:"d.M.Y"|lower }}</small>
       </p>
-      <p>{% if page.image %}
+      {% if page.image %}<p class="d-none d-lg-block"><img src="{{ page.image.url }}" class="w-100 rounded" alt="{{ page.title|striptags|unescape|safe }}" /></p>
-        <img src="{{ page.image.url }}" class="w-100" alt="{{ page.image|striptags|unescape|safe }}"/>
+    {% endif %}</div>
-        {% else %}<img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100" alt="{{ page.image|striptags|unescape|safe }}"/>
-      {% endif %}</p>
-    </div>
 
     {# Правая колонка: Контент #}
     <div class="col-lg-10 border-start ps-lg-4 post-page-content">

etpgrf_site/blog/templates/blog/post_detail.html

@@ -2,8 +2,9 @@
 {% load static typograph_extras %}
 
 {# --- SEO --- #}
-{% block title %}{% if post.seo_title %}{{ post.seo_title }}{% else %}{{ post.title|striptags|unescape|safe|escapejs }}{% endif %} — ETPGRF{% endblock %}
+{# В title и description НЕ используем escapejs, так как это HTML, а не JS #}
-{% block description %}{% if post.seo_description %}{{ post.seo_description|escapejs }}{% else %}{{ post.excerpt|striptags|unescape|safe|truncatechars:160|escapejs }}{% endif %}{% endblock %}
+{% block title %}{% if post.seo_title %}{{ post.seo_title }}{% else %}{{ post.title|striptags|unescape|safe }}{% endif %} — ETPGRF{% endblock %}
+{% block description %}{% if post.seo_description %}{{ post.seo_description }}{% else %}{{ post.excerpt|striptags|unescape|safe|truncatechars:160 }}{% endif %}{% endblock %}
 {% block keywords %}{% if post.seo_keywords %}{{ post.seo_keywords }}{% else %}типограф, типографика, блог типограф, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев, лебедев{% endif %}{% endblock %}
 
 {# --- Schema.org --- #}
@@ -27,7 +28,7 @@
     }
   },
   "datePublished": "{{ post.published_at|date:'Y-m-d' }}",
-  "dateModified": "{{ post.published_at|date:'Y-m-d' }}"
+  "dateModified": "{{ post.updated_at|date:'Y-m-d' }}"
 }
   </script>{% endblock %}
 
@@ -48,7 +49,8 @@
           {{ post.published_at|date:"d.M.Y"|lower }}
         </small>
       </p>
-      <p>{% if post.image %}
+      {# Картинка скрыта на мобильных (d-none), видна на больших экранах (d-lg-block) #}
+      <p class="d-none d-lg-block">{% if post.image %}
         <img src="{{ post.image.url }}" class="w-100" alt="{{ post.title|striptags|unescape|safe }}"/>
         {% else %}<img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100" alt="{{ post.title|striptags|unescape|safe }}"/>
       {% endif %}</p>

etpgrf_site/blog/templates/blog/post_list.html

@@ -1,41 +1,47 @@
 {% extends 'typograph/base.html' %}
+{% load static typograph_extras %}
 
 {% block title %}Блог — ETPGRF{% endblock %}
 
 {% block content %}
-<div class="row justify-content-center">
+  <div class="row justify-content-center">
-    <div class="col-lg-8">
+    <div class="col-lg-12">
-        <h1 class="mb-4">Блог</h1>
+      <h1 class="mb-3">Блог</h1>
-
+      <p class="lead bg-secondary bg-opacity-10 p-3 mb-5 rounded">Здесь мы&nbsp;делимся новостями типографа ETPGRF и&nbsp;его&nbsp;онлайн версии, рассказываем о&nbsp;тонкостях типографики и&nbsp;показываем, как&nbsp;сделать текст в&nbsp;вебе лучше.</p>
-        {% for post in page_obj %}
+      {# СПИСОК ПОСТОВ #}{% for post in page_obj %}
-            <article class="card mb-4 shadow-sm">
+      <article class="row mb-5 {% if forloop.counter|divisibleby:2 %}flex-lg-row-reverse{% endif %}">
-                {% if post.image %}
+        {# Колонка с датой и картинкой #}
-                    <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}" style="max-height: 300px; object-fit: cover;" />
+        <div class="col-lg-3 pt-2 pb-lg-5 align-self-stretch text-start {% if forloop.counter|divisibleby:2 %}text-lg-start border-lg-start ps-lg-4{% else %}text-lg-end border-lg-end pe-lg-4{% endif %} mb-2 mb-lg-0">
-                {% endif %}
+          {# Дата #}<p class="small align-self-end mb-2">
-                <div class="card-body">
+            <small class="bg-secondary bg-opacity-10 p-2 text-nowrap">
-                    <h2 class="card-title h4">
+              {{ post.published_at|date:"d.M.Y"|lower }}
-                        <a href="{{ post.get_absolute_url }}" class="text-decoration-none text-reset">{{ post.title }}</a>
+            </small>
+          </p>
+          {# Картинка (скрыта на мобильных) #}<a href="{{ post.get_absolute_url }}" class="d-none d-lg-block">
+            {% if post.image %}<img src="{{ post.image.url }}" class="img-fluid rounded shadow-sm" alt="{{ post.title|striptags|unescape }}">
+            {% else %}<img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="img-fluid rounded shadow-sm opacity-50" alt="{{ post.title|striptags|unescape }}">{% endif %}
+          </a>
+        </div>
+        {# Колонка с текстом (заголовок, тизер и ссылка #}<div class="col-lg-9 pt-2 pb-5 align-self-stretch {% if forloop.counter|divisibleby:2 %}pe-lg-4{% else %}ps-lg-4{% endif %}">
+          {# Заголовок #}<h2 class="h3 mb-3">
+            <a href="{{ post.get_absolute_url }}" class="text-decoration-none text-reset">{{ post.title|safe }}</a>
           </h2>
-                    <p class="card-text text-muted small mb-2">
+          {# Тизер #}<div class="lead text-muted">
-                        {{ post.published_at|date:"d E Y" }}
+            {{ post.excerpt|safe|linebreaks }}
-                    </p>
+          </div>
-                    <p class="card-text">
+          {# Ссылка #}<div class="mt-3">
-                        {% if post.excerpt %}
+            <a href="{{ post.get_absolute_url }}" class="link-dashed">Читать далее &rarr;</a>
-                            {{ post.excerpt|linebreaks }}
+          </div>
-                        {% else %}
-                            {{ post.content|striptags|truncatewords:30 }}
-                        {% endif %}
-                    </p>
-                    <a href="{{ post.get_absolute_url }}" class="btn btn-outline-primary btn-sm">Читать далее &rarr;</a>
         </div>
       </article>
+      {# Горизонтальный разделитель только на мобильных (на десктопе есть вертикальный бордер) #}{% if not forloop.last %}<hr class="my-5 d-lg-none"/>{% endif %}
       {% empty %}
-            <p class="text-muted">Пока нет записей.</p>
+      <p class="text-muted text-center">Пока нет записей.</p>
       {% endfor %}
 
       {# Пагинация #}
       {% if page_obj.has_other_pages %}
-            <nav aria-label="Page navigation">
+        <nav aria-label="Page navigation" class="mt-5">
           <ul class="pagination justify-content-center">
             {% if page_obj.has_previous %}
               <li class="page-item">
@@ -72,5 +78,5 @@
         </nav>
       {% endif %}
     </div>
-</div>
+  </div>
 {% endblock %}

etpgrf_site/blog/templates/blog/tmp.html

@@ -0,0 +1,242 @@
+{% extends 'typograph/base.html' %}
+{% load static %}
+
+{% block title %}Песочница верстки — ETPGRF{% endblock %}
+
+{% block content %}
+  <div class="row">
+
+    {# Левая колонка: Дата и Картинка #}
+    <div class="col-lg-2 align-self-start text-end mb-4">
+      <p class="small align-self-end">
+          <small class="bg-secondary bg-opacity-10 p-2 text-nowrap">
+              12.фев.2026
+          </small>
+      </p>
+      <p>
+        <img src="{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}" class="w-100" alt="Django Admin" />
+      </p>
+    </div>
+
+    {# Правая колонка: Контент #}
+    <div class="col-lg-10 border-start ps-lg-4 post-page-content">
+
+      <h1>Как&nbsp;«подружить» Django Admin и&nbsp;типограф etpgrf: Виртуальные поля для&nbsp;настроек</h1>
+
+      <div class="lead bg-secondary bg-opacity-10 p-3 rounded">
+
+        <p>Многие контент-проекты сталкиваются с&nbsp;дилеммой: хочется красивой типографики (правильные кавычки «ёлочки», длинные тире <code>—</code>, неразрывные пробелы <code>&amp;nbsp;</code>). Самое очевидное решение&nbsp;— переопре&shy;делить метод <code>safe()</code>, но&nbsp;каждый блок текста&nbsp;— заглоаок, тизер, статья&nbsp;— требуют разных настроек. В&nbsp;заголовках хочестя иметь «висячую пунктуацию» и&nbsp;запретить переносы в&nbsp;словах, для&nbsp;основного текста публикации&nbsp;— наоборот, одна публикация на&nbsp;английском и&nbsp;нужны кавычки “лапки”, другая на&nbsp;русском&nbsp;— и&nbsp;нужны «ёлочки».</p>
+        <p>Хранить все настройки в&nbsp;базе данных (добавляя десятки полей <code>bool</code> в&nbsp;модель)&nbsp;— плохая идея. Это «засоряет» схему данных параметрами отображения, раздувает базу «мусорной информацией» и&nbsp;некрасиво с&nbsp;точки зрения архитектуры.</p>
+        <p><strong>Решение:</strong> Если у&nbsp;вас Django в&nbsp;качестве бэкенда, то&nbsp;наилучший подход&nbsp;— использовать «Виртуальные поля» (Virtual Fields) в&nbsp;Django Admin: Добавить настройки типографа прямо в&nbsp;форму редакти&shy;рования админки, применить эти настройки при&nbsp;сохранении, и&nbsp;забыть о&nbsp;них, сохранив в&nbsp;базу только готовый, красивый HTML.</p>
+
+      </div>
+      <hr>
+      <div class="post-content mt-4">
+
+        <p>Разберём задачу на&nbsp;конкретном примере. У&nbsp;меня есть сайт с&nbsp;цитатами (<a href="https://dq.cube2.ru/" target="_blank">DQ&nbsp;– коллекция цитат. Место для&nbsp;вдумчивого чтения</a>, в&nbsp;нем большое внимание уделяется типографике, а&nbsp;значит при&nbsp;размещении&nbsp;цитат через&nbsp;иметь возможность не&nbsp;только редакти&shy;ровать текст, но&nbsp;и&nbsp;управлять настройками типографа. В&nbsp;проекте есть модель <code>Dictum</code> с&nbsp;полем <code>content</code> (исходный текст) и&nbsp;<code>content_html</code> (типогра&shy;фированный HTML для&nbsp;вывода на&nbsp;сайте). Я&nbsp;хочу, чтобы редактор мог управлять настройками типографа (язык, кавычки, переносы) прямо в&nbsp;админке, не&nbsp;меняя структуру БД.</p>
+        <h2>Инструменты</h2>
+      <ul>
+      <li><strong>Django 6.0</strong> (или любая актуальная версия) – «движок».</li>
+      <li><strong>etpgrf</strong> — библиотека типографики.</li>
+      </ul>
+      <h2>Реализация</h2>
+      <p>Идея в&nbsp;том, чтобы создать в&nbsp;админке дополни&shy;тельные «Виртуальные поля», которых нет в&nbsp;модели. Эти поля будут исполь&shy;зоваться только для&nbsp;настройки типографа при&nbsp;сохранении. Например, можно добавить выпадающий список для&nbsp;выбора языка (русский, английский), галочку для&nbsp;включения обработки кавычек, и&nbsp;т.&thinsp;д. При&nbsp;сохранении&nbsp;мы&nbsp;будем читать эти поля, настраивать типограф и&nbsp;сохранять результат в&nbsp;базу.</p>
+      <h3>Шаг 1. Добавляем необходимые импорты модулей etpgrf-типографа в&nbsp;<tt>admin.py</tt></h3>
+      <pre class="border p-3 my-3 rounded bg-secondary bg-opacity-25">from django.contrib import admin
+# Импортируем классы из нашей библиотеки типографики etpgrf
+try:
+    from etpgrf.typograph import Typographer
+    from etpgrf.layout import LayoutProcessor
+    from etpgrf.hyphenation import Hyphenator
+    from etpgrf.sanitizer import Sanitizer
+except ImportError:
+    # Заглушки на случай, если библиотека не установлена
+    class Typographer:
+        def __init__(self, **kwargs): pass
+        def process(self, text): return text
+    class LayoutProcessor:
+        def __init__(self, **kwargs): pass
+    class Hyphenator:
+         def __init__(self, **kwargs): pass</pre>
+      <h3>Шаг 2. Создаем кастомную форму</h3>
+      <p>Вместо стандартной формы админки (в&nbsp;<tt>admin.py</tt>, мы&nbsp;определим свою, унаследовав её от&nbsp;<code>forms.ModelForm</code>. В&nbsp;ней мы&nbsp;добавим поля, которых <strong>нет в&nbsp;модели</strong>:</p>
+      <pre class="border p-3 my-3 rounded bg-secondary bg-opacity-25">
+from django import forms
+from .models import TbDictumAndQuotes
+
+class DictumAdminForm(forms.ModelForm):
+    # Виртуальные поля для настройки типографа
+    etp_language = forms.ChoiceField(
+        label="Язык типографики",
+        choices=[('ru', 'Русский'), ('en', 'English'), ('ru,en', 'Ru + En')],
+        initial='ru',
+        required=False
+    )
+    etp_quotes = forms.BooleanField(
+        label="Обработка кавычек",
+        initial=True,
+        required=False,
+        help_text="Заменять прямые кавычки на «ёлочки» или “лапки”"
+    )
+    etp_hanging_punctuation = forms.ChoiceField(
+        label="Висячая пунктуация",
+        choices=[('no', 'Нет'), ('left', 'Слева'), ('right', 'Справа'), ('both', 'Обе стороны')],
+        initial='left',
+        required=False,
+        help_text="Выносить кавычки за границу текстового блока"
+    )
+    etp_hyphenation = forms.BooleanField(
+        label="Переносы",
+        initial=True,
+        required=False,
+        help_text="Расставлять мягкие переносы (&amp;shy;)"
+    )
+    etp_mode = forms.ChoiceField(
+        label="Режим вывода",
+        choices=[('mixed', 'Смешанный (Mixed)'), ('unicode', 'Юникод (Unicode)'), ('mnemonic', 'Мнемоники')],
+        initial='mixed',
+        required=False,
+        help_text="Формат спецсимволов"
+    )
+
+    class Meta:
+        model = TbDictumAndQuotes
+        fields = '__all__'</pre>
+      <h3>Шаг 3. Настраиваем ModelAdmin</h3>
+      <p>Теперь, там&nbsp;же в&nbsp;<tt>admin.py</tt>, подключаем эту форму к&nbsp;нашему классу админки. Главный трюк&nbsp;— использовать <code>fieldsets</code>, чтобы сгруп&shy;пировать эти новые поля в&nbsp;отдельный, свора&shy;чиваемый блок «Настройки типографа».</p>
+      <pre class="border p-3 my-3 rounded bg-secondary bg-opacity-25">
+class AdmDictumAndQuotesAdmin(admin.ModelAdmin):
+    form = DictumAdminForm  # Подключаем нашу форму
+    # ... другие настройки админки (list_display, search_fields и т.д.) ...
+    # ...
+    # ...
+
+    # Группировка "виртуальных полей" типографа в отдельный блок
+    fieldsets = (
+        # Основные поля модели (можно оставить как есть, или сгруппировать по своему усмотрению).
+        # Поле szContent может быть в этом же блоке, так как мы его как раз типографируем.
+        # (None, {
+        #    'fields': ( ... 'szContent', ... )
+        # }),
+        ('Настройки типографа (Etpgrf)', {
+            'classes': ('collapse',),
+            'fields': (
+                ('etp_language', 'etp_mode'),
+                ('etp_hyphenation', 'etp_hanging_punctuation'),
+            ),
+            'description': 'Настройки применяются при сохранении. Результат записывается в скрытые HTML-поля.'
+        }),
+        # ... другие fieldsets, если нужно ...
+        # ...
+        # ... Например, можно добавить отдельный блок для отображения результата типографирования (только для чтения) ...
+        # ('HTML Результат (ReadOnly)', {
+        #     'classes': ('collapse',),
+        #     'fields': ('szContentHTML',),
+        # }),
+    )
+
+    # ...</pre>
+      <h3>Шаг 4. Перехват сохранения (save_model)</h3>
+      <p>Сейчас, когда у&nbsp;нас есть форма с&nbsp;дополни&shy;тельными полями, нам нужно:</p>
+      <ol>
+      <li>Переопре&shy;делить метод <code>save_model</code> в&nbsp;нашем классе админки.</li>
+      <li>Внутри этого метода прочитать значения виртуальных полей из&nbsp;формы (<code>LayoutProcessor</code>, <code>Hyphenator</code> и&nbsp;другие).</li>
+      <li>Инициали&shy;зировать <code>Typographer</code> с&nbsp;этими настройками.</li>
+      <li>Обработать текст из&nbsp;полей <code>szContent</code>, сохранив результат в&nbsp;<code>szContentHTML</code>.</li>
+      </ol>
+      <pre class="border p-3 my-3 rounded bg-secondary bg-opacity-25">
+    def save_model(self, request, obj, form, change):
+        # 1. Читаем базовые настройки языка и режима из формы
+        langs = form.cleaned_data.get('etp_language', 'ru').split(',')
+
+        # 2. Собираем LayoutProcessor
+        layout_option = False
+        # Включаем layout по умолчанию с базовыми настройками (инициалы, юниты)
+        layout_option = LayoutProcessor(
+            langs=langs,
+            process_initials_and_acronyms=True,
+            process_units=True
+        )
+
+        # 3. Собираем Hyphenator (переносы слов)
+        hyphenation_enabled = form.cleaned_data.get('etp_hyphenation', True)
+        hyphenation_option = False
+        if hyphenation_enabled:
+            hyphenation_option = Hyphenator(
+                langs=langs,
+                max_unhyphenated_len=12
+            )
+
+        # 4. Читаем Hanging Punctuation (висячая пунктуация)
+        hanging_val = form.cleaned_data.get('etp_hanging_punctuation', 'no')
+        hanging_option = None
+        if hanging_val != 'no':
+            hanging_option = hanging_val
+
+        # 5. Собираем все настройки типографа в словарь
+        options = {
+            'langs': langs,
+            'process_html': True,
+            'quotes': form.cleaned_data.get('etp_quotes', True),
+            'layout': layout_option,
+            'unbreakables': True,
+            'hyphenation': hyphenation_option,
+            'symbols': True,
+            'hanging_punctuation': hanging_option,
+            'mode': form.cleaned_data.get('etp_mode', 'mixed'),
+        }
+
+        # Инициализируем типограф с настройками из формы
+        try:
+            # DEBUG: Проверка, какой класс используется
+            if Typographer.__module__ == __name__: # Если класс определен в этом же файле (заглушка)
+                 self.message_user(request, "ВНИМАНИЕ: Используется заглушка Typographer! Библиотека etpgrf не найдена.", level='WARNING')
+
+            t = Typographer(**options)
+
+            # Обрабатываем контент
+            if obj.szContent:
+                # В онлайн-типографе используется .process(text)
+                old_html = obj.szContentHTML or ""
+                processed = t.process(obj.szContent)
+                obj.szContentHTML = processed
+
+                # DEBUG: Проверка изменений
+                if processed != old_html and processed != obj.szContent:
+                     self.message_user(request, f"Типограф: szContentHTML обновлен (len changed: {len(old_html)} -&gt; {len(processed)})", level='INFO')
+
+
+        except Exception as e:
+            # Возникла ошибка при обработке типографом, сохраняем оригинальный текст и показываем сообщение об ошибке
+            self.message_user(request, f"Ошибка типографа: {e}", level='ERROR')
+            if not obj.szContentHTML: obj.szContentHTML = obj.szContent
+
+        super().save_model(request, obj, form, change)</pre>
+      <h3>Шаг 5. Очистка модели</h3>
+      <p>Так как&nbsp;логика обработки и&nbsp;сохранения поля <code>szContentHTML</code> «переехала» в&nbsp;админку, нам нужно <strong>убрать</strong> логику его записи из&nbsp;метода <code>save()</code> модели внутри <tt>models.py</tt>.
+              </p><p>Теперь метод <code>save()</code> в&nbsp;<tt>models.py</tt> должен быть максимально простым:</p>
+      <pre class="border p-3 my-3 rounded bg-secondary bg-opacity-25">
+class TbDictumAndQuotes(models.Model):
+    # ... поля ...
+    # ...
+    # ...
+
+    def save(self, *args, **kwargs):
+        # Типографирование поля szContentHTML перенесено в админку (через admin.save_model).
+        # Здесь оставляем только базовую подстраховку: если HTML пуст, заполняем оригиналом.
+        if not self.szContentHTML and self.szContent:
+            self.szContentHTML = self.szContent
+
+          super(TbDictumAndQuotes, self).save(*args, **kwargs)</pre>
+      <h2>Результат</h2>
+      <p>Теперь редактор видит обычную админку, пишет текст, открывает блок «Настройки типографа», выбирает нужные опции (например, «Включить висячую пунктуацию слева») и&nbsp;нажимает «Сохранить».</p>
+      <p>При&nbsp;сохранении&nbsp;Django читает эти настройки, инициа&shy;лизирует типограф, обрабатывает текст и&nbsp;сохраняет в&nbsp;базу уже готовый HTML. В&nbsp;итоге:</p>
+      <ul>
+      <li>Чистый исходный текст в&nbsp;поле <code>szContent</code> (для&nbsp;правки в&nbsp;будущем).</li>
+      <li>Готовый, красивый HTML в&nbsp;поле <code>szContentHTML</code> (с&nbsp;<code>&amp;nbsp;</code>, висячими кавычками и&nbsp;т.&thinsp;п., который можно сразу выводить на&nbsp;сайте.</li>
+      </ul>
+      <p>При&nbsp;этом таблица базы данных не&nbsp;замусорена колонками <code>is_hanging_punctuation_enabled</code>, которые нужны только в&nbsp;момент сохранения. <strong>Кроме того, это абсолютно безопасно:</strong> «виртуальные поля» существуют только в&nbsp;форме админки и&nbsp;не являются полями модели — Django их не сериализует и&nbsp;не пытается сохранить в&nbsp;БД, схема данных не меняется, а сами значения живут лишь в&nbsp;момент сохранения и&nbsp;влияют только на обработку текста.</p>
+
+
+  </div>
+{% endblock %}

etpgrf_site/etpgrf_site/settings.py

@@ -82,6 +82,11 @@ DATABASES = {
         'ENGINE': 'django.db.backends.sqlite3',
         # База данных лежит в папке data в корне проекта
         'NAME': BASE_DIR.parent / 'data' / 'db-etpgrf.sqlite3',
+        'OPTIONS': {
+            # Таймаут ожидания блокировки SQLite (в секундах)
+            # При сложных операциях (например, каскадное удаление тегов) нужно больше времени
+            'timeout': 20,
+        },
     }
 }
 

etpgrf_site/typograph/templates/typograph/base.html

@@ -3,12 +3,12 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  {# --- SEO & Meta Tags --- #}<title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
+  {# SEO & Meta Tags #}<title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
   <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
   <meta name="keywords" content="{% block keywords %}типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев{% endblock %}">
   <meta name="author" content="Sergei Erjemin">
-  {# --- Schema.org (JSON-LD) --- #}{% block schema %}{% endblock %}
+  {# Schema.org (JSON-LD) #}{% block schema %}{% endblock %}
-  {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}<meta property="og:type" content="website" />
+  {# Open Graph (Facebook, VK, LinkedIn, Telegram) #}<meta property="og:type" content="website" />
   <meta property="og:site_name" content="ETPGRF" />
   <meta property="og:url" content="{{ request.build_absolute_uri }}" />
   <meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}" />
@@ -20,13 +20,15 @@
   <meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}" />
   <meta name="twitter:description" content="{% block twitter_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик.{% endblock %}" />
   <meta name="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}" />
-  {# --- Favicons --- #}<link rel="icon" href="{{ request.scheme }}://{{ request.get_host }}{% static 'favicon.ico' %}" type="image/x-icon" />
+  {# Шутка #}<meta name="generator" content="Microsoft FrontPage 1.0"/>
-  {# --- Favicons --- #}<link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" />
+  {# Canonical #}<link rel="canonical" href="{{ request.build_absolute_uri }}"/>
-  {# --- Favicons --- #}<link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)" />
+  {# Favicons #}<link rel="icon" href="{{ request.scheme }}://{{ request.get_host }}{% static 'favicon.ico' %}" type="image/x-icon" />
-  {# --- Favicons --- #}<link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
+  {# Favicons #}<link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" />
-  {# --- Favicons --- #}<link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
+  {# Favicons #}<link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)" />
-  {# --- Favicons --- #}<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
+  {# Favicons #}<link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
-  {# --- Favicons --- #}<link rel="manifest" href="{% static 'site.webmanifest' %}" />
+  {# Favicons #}<link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
+  {# Favicons #}<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
+  {# Favicons #}<link rel="manifest" href="{% static 'site.webmanifest' %}" />
   {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
   {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"/>
   <style>
@@ -81,7 +83,7 @@
   <div class="container d-flex justify-content-between align-items-center">
     <span class="text-muted small nowrap me-2">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
     <nobr class="text-muted small mx-2">
-      <i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i><a href="/changelog">v0.1.4 / v0.2.4</a>
+      <i class="bi bi-tags me-1" title="Версия библиотеки etpgrf / Версия сайта"></i><a href="/changelog">v0.1.4 / v0.2.5</a>
     </nobr>
     {# Сводная статистика (HTMX) #}<span class="text-muted small ms-2" hx-get="{% url 'stats_summary' %}" hx-trigger="load">
       ...

poetry.lock

@@ -381,6 +381,17 @@ files = [
 [package.extras]
 cli = ["click (>=5.0)"]
 
+[[package]]
+name = "pytils"
+version = "0.4.4"
+description = "Russian-specific string utils"
+optional = false
+python-versions = "*"
+files = [
+    {file = "pytils-0.4.4-py3-none-any.whl", hash = "sha256:e54c16465a5fdb65d414e2da8045e6cc6de79889acda6143dcef2e1e86a1a840"},
+    {file = "pytils-0.4.4.tar.gz", hash = "sha256:9992a96caad57daa211584df1da4fd825f11e836d3ed93011785f1d02ab6f0ca"},
+]
+
 [[package]]
 name = "regex"
 version = "2026.1.15"
@@ -572,4 +583,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.13"
-content-hash = "9610a92fa47d1bd0849512ae842b0fdd68dc06d9917ab676cf5d8f6521700837"
+content-hash = "ce33b38ff06b069d35d46c795c2a5f81c0907f288bb662a001ab740760cc90b2"

public/static/css/etpgrf.css

@@ -127,7 +127,7 @@ body {
   position: relative;
 }
 
-/* Фикс для мобильных версий: ширина по контенту, прижатие вправо, логотипы */
+/* Фикс для мобильной версии: ширина по контенту и прижатие вправо */
 @media (max-width: 991.98px) {
     .nav-item {
         width: fit-content;
@@ -389,13 +389,24 @@ footer.footer a:hover {
     /*color: var(--bs-secondary-color);*/
 }
 
-.post-page-content a {
+/* Общий класс для ссылок в контенте и списках */
+.link-dashed, .post-page-content a {
     color: var(--bs-linkcolor);
     text-decoration: none;
     border-bottom: 1px dotted var(--bs-linkcolor);
 }
 
-.post-page-content a:hover {
+.link-dashed:hover, .post-page-content a:hover {
   color: var(--bs-linkclolor-hover);
   border-bottom: 1px solid var(--bs-linkclolor-hover);
 }
+
+/* Утилита для бордера только на больших экранах */
+@media (min-width: 992px) {
+    .border-lg-start {
+        border-left: 1px solid var(--bs-border-color) !important;
+    }
+    .border-lg-end {
+        border-right: 1px solid var(--bs-border-color) !important;
+    }
+}

public/static/js/base.js

@@ -96,7 +96,7 @@
             // Делаем gtag глобальной, чтобы вызывать из sendGoal
             window.gtag = gtag; 
             gtag('js', new Date());
-            gtag('config', '\'' + GOOGLE_ID + '\'');
+            gtag('config', GOOGLE_ID);
 
         } catch (e) {
             console.error("Ошибка загрузки счетчиков:", e);

pyproject.toml

@@ -16,6 +16,7 @@ etpgrf = "0.1.4"
 # regex = "^2023.12"          # etpgrf подтянет как зависимость
 # beautifulsoup4 = "^4.10.0"  # etpgrf подтянет как зависимость
 pillow = "^12.1.0"
+pytils = "^0.4.4"
 
 [build-system]
 requires = ["poetry-core"]