minor: design adjust (6) - update breadcrumb navigation

hypn0/hypn0_site/models.py

@@ -567,3 +567,19 @@ class TbBlogPost(models.Model):
     def get_absolute_url(self) -> str:
         """Возвращает канонический URL статьи блога."""
         return f"/blog/{self.slug}" if self.slug else f"/blog/{self.pk}"
+
+    @property
+    def blog_nav_title(self) -> str:
+        """Детерминированный выбор названия раздела блога для навигации на основе ID статьи."""
+        nav_titles = (
+            "Блог Мозгоклюя",
+            "Записки Гипножабы",
+            "Дневник Мозговых Перцепторов",
+            "Хроники психо-резонанса",
+            "Мемуары астрального архива",
+            "Манифесты волновой матрицы",
+            "Бортовой журнал транс-погружения",
+        )
+        if not self.id:
+            return nav_titles[0]
+        return nav_titles[self.id % len(nav_titles)]

hypn0/hypn0_site/tests.py

@@ -1386,7 +1386,7 @@ class BlogPostModelAndAdminTests(BaseMediaTestCase):
         self.assertContains(resp_parent, "Глава 1: Первичная модуляция")
         self.assertContains(resp_parent, "Глава 2: Фазовый сдвиг матрицы")
 
-        # 2. Проверка первой главы (связанный SVG, ссылка на родителя, следующая глава)
+        # 2. Проверка первой главы (связанный SVG, ссылка на родителя, следующая глава, хлебные крошки и JSON-LD)
         resp_ch1 = self.client.get(f"/blog/{ch1.slug}")
         self.assertEqual(resp_ch1.status_code, 200)
         self.assertContains(resp_ch1, "Глава 1: Первичная модуляция")
@@ -1399,6 +1399,18 @@ class BlogPostModelAndAdminTests(BaseMediaTestCase):
         self.assertContains(resp_ch1, "Следующая глава цикла")
         self.assertContains(resp_ch1, "Глава 2: Фазовый сдвиг матрицы")
 
+        # Проверка хлебных крошек
+        self.assertContains(resp_ch1, 'aria-label="Хлебные крошки"')
+        self.assertContains(resp_ch1, ch1.blog_nav_title)
+        self.assertContains(resp_ch1, "Глава 1 из 2")
+        self.assertContains(resp_ch1, 'aria-current="page"')
+
+        # Проверка JSON-LD BreadcrumbList
+        self.assertContains(resp_ch1, '"@type": "BreadcrumbList"')
+        self.assertContains(resp_ch1, '"name": "Главная"')
+        self.assertContains(resp_ch1, '"name": "Хроники гипноза"')
+        self.assertContains(resp_ch1, series_parent.s_title)
+
         # 3. Проверка второй главы (ссылка назад на главу 1)
         resp_ch2 = self.client.get(f"/blog/{ch2.slug}")
         self.assertEqual(resp_ch2.status_code, 200)

hypn0/hypn0_site/views.py

@@ -710,6 +710,7 @@ def blog_detail(request: HttpRequest, slug: str) -> HttpResponse:
         "svg_stats": svg_stats,
         "series_parent": series_parent,
         "series_posts": series_posts,
+        "series_total_count": len(series_posts) if series_posts else 0,
         "prev_post": prev_post,
         "next_post": next_post,
     }

hypn0/templates/_base.html

@@ -101,13 +101,16 @@ val=>{if(val)document.documentElement.classList.add('dark');else document.docume
   файла css/tailwind-custom.css (подключён в input.css через @import).{% endcomment %}
   <link rel="stylesheet" href="{% static 'css/tailwind.min.css' %}" />{% endif %}
   <script type="application/ld+json">
-    {
+    [
-      "@context": "https://schema.org",
+      {
-      "@type": "WebSite",
+        "@context": "https://schema.org",
-      "name": "hypn0.xyz",
+        "@type": "WebSite",
-      "url": "{{ request.scheme }}://{{ request.get_host }}/"
+        "name": "hypn0.xyz",
-    }{% block EXTRA_LD_JSON %}
+        "url": "{{ request.scheme }}://{{ request.get_host }}/"
-  {% endblock EXTRA_LD_JSON %}</script>
+      }{% block EXTRA_LD_JSON %}
+      {% endblock EXTRA_LD_JSON %}
+    ]
+  </script>
   <script src="{% static 'js/alpine.min.js' %}" defer></script>
   <script src="{% static 'js/htmx.min.js' %}" defer></script>
   <script>

hypn0/templates/blog/detail.html

@@ -17,6 +17,43 @@
 
 {% block EXTRA_LD_JSON %},
     {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Главная",
+          "item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:index' %}"
+        },
+        {
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Хроники гипноза",
+          "item": "{{ request.scheme }}://{{ request.get_host }}{% url 'hypn0_site:blog_feed' %}"
+        }{% if series_parent %},
+        {
+          "@type": "ListItem",
+          "position": 3,
+          "name": "{{ series_parent.s_title|striptags|escapejs }}",
+          "item": "{{ request.scheme }}://{{ request.get_host }}{{ series_parent.get_absolute_url }}"
+        },
+        {
+          "@type": "ListItem",
+          "position": 4,
+          "name": "{{ post.s_title|striptags|escapejs }}",
+          "item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
+        }{% else %},
+        {
+          "@type": "ListItem",
+          "position": 3,
+          "name": "{{ post.s_title|striptags|escapejs }}",
+          "item": "{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}"
+        }{% endif %}
+      ]
+    },
+    {
+      "@context": "https://schema.org",
       "@type": "Article",
       "headline": "{{ post.s_title|striptags|escapejs }}",
       "description": "{{ post.s_teaser|striptags|escapejs }}",
@@ -33,20 +70,32 @@
 <article class="mx-auto space-y-10">
 
   <!-- Навигационная полоса / Хлебные крошки -->
-  <nav class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
+  <nav aria-label="Хлебные крошки" class="flex flex-wrap items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-stone-500 dark:text-stone-400">
-    <a href="{% url 'hypn0_site:blog_feed' %}"
+    <a href="{% url 'hypn0_site:index' %}" class="inline-flex items-center gap-1 " title="Главная">
-       class="inline-flex items-center gap-1.5 hover:text-stone-900 dark:hover:text-stone-100 transition-colors border-0">
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
       </svg>
-      <span>Блог Сновизора</span>
+      <span class="hidden sm:inline">Главная</span>
     </a>
+
+    <span class="text-stone-300 dark:text-zinc-700">/</span>
+
+    <a href="{% url 'hypn0_site:blog_feed' %}">
+      {{ post.blog_nav_title }}
+    </a>
+
     {% if series_parent %}
     <span class="text-stone-300 dark:text-zinc-700">/</span>
-    <a href="{{ series_parent.get_absolute_url }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors border-0">
+    <a href="{{ series_parent.get_absolute_url }}" title="{{ series_parent.s_title|striptags }}">
-      {{ series_parent.s_title|striptags|truncatechars:25 }}
+      Глава {{ post.i_order }}{% if series_total_count %} из {{ series_total_count }}{% endif %}
     </a>
     {% endif %}
+
+    <span class="text-stone-300 dark:text-zinc-700">/</span>
+
+    <span class="text-stone-400 dark:text-stone-500 truncate max-w-[180px] sm:max-w-xs md:max-w-sm font-normal" aria-current="page" title="{{ post.s_title|striptags }}">
+      {{ post.s_title|safe }}
+    </span>
   </nav>
 
   <!-- Серия: индикатор цикла (если пост является частью серии) -->
@@ -67,28 +116,7 @@
   </div>
   {% endif %}
 
-  <!-- Заголовок, метаданные, превью и контент статьи (двухколоночный единый блок) -->
+  <!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 1/4 слева (превью + SVG), 3/4 справа (заголовок + дата + тизер + контент) -->
-  <header class="space-y-6">
-    <!-- Метаданные статьи: бейджи слева, дата-время справа -->
-    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-stone-200/60 dark:border-zinc-800/80 pb-3">
-      <div class="flex flex-wrap items-center gap-2">
-        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-purple-500/15 text-purple-700 dark:text-purple-300 border border-purple-500/30">
-          Хроники гипноза
-        </span>
-        {% if post.k_item %}
-        <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}" class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/25 transition-colors border-0">
-          Аддитивная картина: {{ post.k_item.s_title }}
-        </a>
-        {% endif %}
-      </div>
-
-      <time datetime="{{ post.d_published_at|date:'c' }}" class="text-xs text-stone-500 dark:text-stone-400">
-        {{ post.d_published_at|date:'d E 30y, H:i:s' }}
-      </time>
-    </div>
-  </header>
-
-  <!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 1/4 слева (превью + SVG), 3/4 справа (заголовок + тизер + контент) -->
   <div class="grid grid-cols-1 md:grid-cols-4 gap-x-6 items-start">
 
     <!-- 1. Верхний ряд слева (1/4): Тизер-превью обложки -->
@@ -107,15 +135,27 @@
       {% endif %}
     </div>
 
-    <!-- 1. Верхний ряд справа (3/4): Заголовок + Тизер с непрерывной пунктирной линией -->
+    <!-- 1. Верхний ряд справа (3/4): Заголовок + Дата + Тизер с непрерывной пунктирной линией -->
     <div class="md:col-span-3 border-l-1 border-purple-500 border-dotted pl-6 pb-8 space-y-4">
       <h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-stone-900 dark:text-stone-100 leading-tight">
         {{ post.s_title|safe }}
       </h1>
 
+      <!-- Дата и время публикации статьи в рамочке с иконкой часов -->
+      <div class="flex items-center justify-start">
+        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-500/10 text-purple-700 dark:text-purple-300 border border-purple-500/20 font-bold text-sm">
+          <svg class="w-3.5 h-3.5 text-purple-700 dark:text-purple-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <time datetime="{{ post.d_published_at|date:'c' }}">
+            {{ post.d_published_at|date:'d E 30y, H:i:s' }}
+          </time>
+        </div>
+      </div>
+
       <!-- Лид / Тизер статьи -->
       {% if post.s_teaser %}
-      <div class="text-base sm:text-lg text-stone-600 dark:text-stone-300 leading-relaxed font-sans p-4 sm:p-5 bg-stone-100/50 dark:bg-zinc-900/50 rounded-2xl">
+      <div class="text-base sm:text-lg text-stone-600 dark:text-stone-300 leading-relaxed font-sans p-4 sm:p-5 bg-stone-100 dark:bg-zinc-900 border border-stone-200 dark:border-zinc-800 rounded-2xl">
         {{ post.s_teaser|safe }}
       </div>
       {% endif %}
@@ -163,9 +203,9 @@
             <div class="font-bold text-stone-900 dark:text-stone-100 text-sm leading-snug">
               {{ post.k_item.s_title|safe }}
             </div>
-            <div class="flex items-center justify-end gap-1.5 mt-3.5">
+            <div class="flex items-center justify-end gap-1.5 my-2.5">
               <a href="{% url 'hypn0_site:gallery_detail' post.k_item.s_hash_id %}"
-                 class="text-[10px] px-2 py-0.5 rounded-full text-purple-600 dark:text-purple-400 font-bold border border-purple-500/20 bg-purple-500/5 hover:bg-purple-500/15 hover:border-purple-500/40 transition-colors"
+                 class="text-[10px]"
                  title="Открыть картину в галерее">#{{ post.k_item.s_hash_id }}</a>
             </div>
             <div class="flex items-center justify-end gap-1.5 mt-1.5">