erjemin/2026-hypn0-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor: design adjust (6) - update breadcrumb navigation

Browse Source
This commit is contained in:
erjemin
2026-09-13 01:28:07 +03:00
parent 28556f0b12
commit 49542cd49c
5 changed files with 114 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hypn0/templates/blog/detail.html
+74 -34
View File
@@ -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">
<a href="{% url 'hypn0_site:blog_feed' %}"
class="inline-flex items-center gap-1.5 hover:text-stone-900 dark:hover:text-stone-100 transition-colors border-0">
<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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
<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:index' %}" class="inline-flex items-center gap-1 " title="Главная">
<svg class="w-3.5 h-3.5" 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"/>
</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">
{{ series_parent.s_title|striptags|truncatechars:25 }}
<a href="{{ series_parent.get_absolute_url }}" title="{{ series_parent.s_title|striptags }}">
Глава {{ 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 %}
<!-- Заголовок, метаданные, превью и контент статьи (двухколоночный единый блок) -->
<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 справа (заголовок + тизер + контент) -->
<!-- ЕДИНАЯ ДВУХКОЛОНОЧНАЯ СЕТКА: 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">