mod: Дизайн и вёрстка страниц для постов блога и вспомогательных страниц для мобильных устройств (адаптивность, скрытие картинки-обложки).

CHANGELOG.md

@@ -9,11 +9,12 @@
 
 ### Добавлено
 - Поле `updated_at` (_Дата обновления_) в модели, админке, блогах, страницах и `sitemaps.xml` для улучшения SEO, GEO и LLMO.
-- README.md с описанием проекта онлайн-типографа, его особенностей, технического стека и инструкциями по установке и запуску.
+- `README.md` с описанием проекта онлайн-типографа, его особенностей, технического стека и инструкциями по установке и запуску.
 
 ### Исправлено
-- Исправлены ошибки в шаблоне 'post_list.html' (и дизайн в целом).
+- Исправлены ошибки в шаблоне `post_list.html` (и дизайн в целом).
 - Формирование `slag` из `title` при сохранении поста или страницы с использованием библиотеки `pytils` для транслитерации с очистикой от HTML-мнемоник и создания URL-дружественных строк.
+- Дизайн и вёрстка страниц для постов блога и вспомогательных страниц для мобильных устройств (адаптивность, скрытие картинки-обложки).
 
 ## [0.2.4] - 2025-02-12
 

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">
@@ -28,25 +29,21 @@
    </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,6 +2,7 @@
 {% load static typograph_extras %}
 
 {# --- SEO --- #}
+{# В title и description НЕ используем escapejs, так как это HTML, а не JS #}
 {% 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 %}
@@ -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>