mod: Новый дизайн списка для блога и новая версия v.0.2.5.

2026-02-13 15:46:56 +03:00
parent 53a98df4c1
commit e53dac8180
6 changed files with 102 additions and 80 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,14 +5,19 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.0.0/),
 и этот проект придерживается [Semantic Versioning](https://semver.org/lang/ru/).

-## [Unreleased] — 2025–02–13
+## [0.2.5] — 2025–02–13

 ### Добавлено
- Поле `updated_at` (_Дата обновления_) в модели, админке, блогах, страницах и `sitemaps.xml` для улучшения SEO, GEO и LLMO.
+- Редизайн списка постов в блоге: шахматный порядок, вертикальные разделители, улучшенная адаптивность для мобильных устройств.
+- Поле `updated_at` (_Дата обновления_) в модели, админке, блогах, страницах и `sitemaps.xml` и микроразметке `Schema.org` для улучшения SEO, GEO и LLMO.
 - `README.md` с описанием проекта онлайн-типографа, его особенностей, технического стека и инструкциями по установке и запуску.
+- Автоматическая генерация URL (slug) из заголовка поста с транслитерацией (при сохранении в админке).
+- Отображение заголовков постов в списке админки без HTML-мнемоник (декодирование `&nbsp;` и др.).

-### Исправлено
- Исправлены ошибки в шаблоне `post_list.html` (и дизайн в целом).
+### Изменено
+- Исправлены ошибки в шаблоне `post_list.html` (и полностью переработан дизайн в целом).
+  - Улучшено отображение даты и скрытие декоративных изображений в списке постов на мобильных устройствах.
+  - Оптимизированы отступы и типографика в списке постов.
 - Формирование `slag` из `title` при сохранении поста или страницы с использованием библиотеки `pytils` для транслитерации с очистикой от HTML-мнемоник и создания URL-дружественных строк.
 - Дизайн и вёрстка страниц для постов блога и вспомогательных страниц для мобильных устройств (адаптивность, скрытие картинки-обложки).

--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # ETPGRF Site — Онлайн-типограф

-![Version](https://img.shields.io/badge/version-0.2.4-blue)
+![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)
--- a/etpgrf_site/init.py
+++ b/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"
--- a/etpgrf_site/blog/templates/blog/post_list.html
+++ b/etpgrf_site/blog/templates/blog/post_list.html
@@ -1,76 +1,82 @@
 {% extends 'typograph/base.html' %}
+{% load static typograph_extras %}

 {% block title %}Блог — ETPGRF{% endblock %}

 {% block content %}
-<div class="row justify-content-center">
-    <div class="col-lg-8">
-        <h1 class="mb-4">Блог</h1>
+  <div class="row justify-content-center">
+    <div class="col-lg-12">
+      <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 %}
+      <article class="row mb-5 {% if forloop.counter|divisibleby:2 %}flex-lg-row-reverse{% endif %}">
+        {# Колонка с датой и картинкой #}
+        <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">
+          {# Дата #}<p class="small align-self-end mb-2">
+            <small class="bg-secondary bg-opacity-10 p-2 text-nowrap">
+              {{ post.published_at|date:"d.M.Y"|lower }}
+            </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>
+          {# Тизер #}<div class="lead text-muted">
+            {{ post.excerpt|safe|linebreaks }}
+          </div>
+          {# Ссылка #}<div class="mt-3">
+            <a href="{{ post.get_absolute_url }}" class="link-dashed">Читать далее &rarr;</a>
+          </div>
+        </div>
+      </article>
+      {# Горизонтальный разделитель только на мобильных (на десктопе есть вертикальный бордер) #}{% if not forloop.last %}<hr class="my-5 d-lg-none"/>{% endif %}
+      {% empty %}
+      <p class="text-muted text-center">Пока нет записей.</p>
+      {% endfor %}

-        {% for post in page_obj %}
-            <article class="card mb-4 shadow-sm">
-                {% if post.image %}
-                    <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}" style="max-height: 300px; object-fit: cover;" />
-                {% endif %}
-                <div class="card-body">
-                    <h2 class="card-title h4">
-                        <a href="{{ post.get_absolute_url }}" class="text-decoration-none text-reset">{{ post.title }}</a>
-                    </h2>
-                    <p class="card-text text-muted small mb-2">
-                        {{ post.published_at|date:"d E Y" }}
-                    </p>
-                    <p class="card-text">
-                        {% if post.excerpt %}
-                            {{ post.excerpt|linebreaks }}
-                        {% 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>
-        {% empty %}
-            <p class="text-muted">Пока нет записей.</p>
-        {% endfor %}
+      {# Пагинация #}
+      {% if page_obj.has_other_pages %}
+        <nav aria-label="Page navigation" class="mt-5">
+          <ul class="pagination justify-content-center">
+            {% if page_obj.has_previous %}
+              <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a>
+              </li>
+            {% else %}
+              <li class="page-item disabled">
+                <span class="page-link">&laquo;</span>
+              </li>
+            {% endif %}

-        {# Пагинация #}
-        {% if page_obj.has_other_pages %}
-            <nav aria-label="Page navigation">
-                <ul class="pagination justify-content-center">
-                    {% if page_obj.has_previous %}
-                        <li class="page-item">
-                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a>
-                        </li>
-                    {% else %}
-                        <li class="page-item disabled">
-                            <span class="page-link">&laquo;</span>
-                        </li>
-                    {% endif %}
+            {% for i in page_obj.paginator.page_range %}
+              {% if page_obj.number == i %}
+                <li class="page-item active">
+                  <span class="page-link">{{ i }}</span>
+                </li>
+              {% else %}
+                <li class="page-item">
+                  <a class="page-link" href="?page={{ i }}">{{ i }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}

-                    {% for i in page_obj.paginator.page_range %}
-                        {% if page_obj.number == i %}
-                            <li class="page-item active">
-                                <span class="page-link">{{ i }}</span>
-                            </li>
-                        {% else %}
-                            <li class="page-item">
-                                <a class="page-link" href="?page={{ i }}">{{ i }}</a>
-                            </li>
-                        {% endif %}
-                    {% endfor %}
-
-                    {% if page_obj.has_next %}
-                        <li class="page-item">
-                            <a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
-                        </li>
-                    {% else %}
-                        <li class="page-item disabled">
-                            <span class="page-link">&raquo;</span>
-                        </li>
-                    {% endif %}
-                </ul>
-            </nav>
-        {% endif %}
+            {% if page_obj.has_next %}
+              <li class="page-item">
+                <a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a>
+              </li>
+            {% else %}
+              <li class="page-item disabled">
+                <span class="page-link">&raquo;</span>
+              </li>
+            {% endif %}
+          </ul>
+        </nav>
+      {% endif %}
    </div>
-</div>
+  </div>
 {% endblock %}
--- a/etpgrf_site/typograph/templates/typograph/base.html
+++ b/etpgrf_site/typograph/templates/typograph/base.html
@@ -81,7 +81,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">
      ...
--- a/public/static/css/etpgrf.css
+++ b/public/static/css/etpgrf.css
@@ -127,12 +127,12 @@ body {
  position: relative;
 }

-/* Фикс для мобильных версий: ширина по контенту, прижатие вправо, логотипы */
+/* Фикс для мобильной версии: ширина по контенту и прижатие вправо */
@media (max-width: 991.98px) {
-  .nav-item {
-    width: fit-content;
-    margin-left: auto;
-  }
+    .nav-item {
+        width: fit-content;
+        margin-left: auto;
+    }

  .navbar-collapse {
    margin-top: -10px;
@@ -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;
+    }
+}