mod: Шаблоны в современном ситиле + schema.org

2026-02-18 18:52:22 +03:00
parent 7e33997260
commit d1eb218986
6 changed files with 198 additions and 63 deletions
--- a/dicquo/templates/base.html
+++ b/dicquo/templates/base.html
@@ -2,33 +2,48 @@
 {% load static %}<html lang="ru">
 <head>
  <meta charset="utf-8" />
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <meta http-equiv="content-language" content="ru" />
-  <meta http-equiv="Date" content="{% block Date4Meta %}{% now 'c' %}{% endblock %}" />
-  <meta http-equiv="Last-Modified" content="{% block Last4Meta %}{% now 'c' %}{% endblock %}" />
-  <meta http-equiv="Expires" content="{% block Expires4Meta %}{% now 'c' %}{% endblock %}" />
-  <meta http-equiv="Cache-Control" content="no-cache">
-  <meta name="GENERATOR" content="Microsoft FrontPage 1.0" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!-- SEO & Meta -->
+  <title>{% block Title %}{% endblock %}</title>
  <meta name="description" content="{% block Description %}{% endblock %}" />
  <meta name="keywords" content="{% block Keywords %}{% endblock %}" />
-  <meta name="copyright" lang="ru" content="Sergei Erjemin (дизайн){% block CopyrightAuthor4Meta %}{% endblock %}." />
+  <meta name="copyright" content="Sergei Erjemin (дизайн){% block CopyrightAuthor4Meta %}{% endblock %}." />
  <meta name="robots" content="index,follow" />
-  <meta name="document-state" content="{{ META_DOCUMENT_STATE|default:'Dynamic' }}" />
-  <meta name="generator" content="FAVICON -- 0.01β by Python/Django" />
-  <title>{% block Title %}{% endblock %}</title>
+
+  <!-- Open Graph / Social Media -->
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content="{% block OgTitle %}{{ DQ.szContent|truncatechars:60 }}{% endblock %}" />
+  <meta property="og:description" content="{% block OgDescription %}{{ DQ.szIntro|default:'' }} {{ DQ.szContent }} {{ AUTHOR.szAuthor|default:'' }}{% endblock %}" />
+  <meta property="og:url" content="{{ request.build_absolute_uri }}" />
+  <meta property="og:site_name" content="DicQuo" />
+  {% if IMAGE %}<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}" />{% endif %}
+
+  <!-- Technical Meta -->
+  <meta http-equiv="Last-Modified" content="{% block Last4Meta %}{% endblock %}" />
+  <meta name="generator" content="Django" />
+
  <!-- Favicons -->
  <link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}" />
  <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
+
+  <!-- Styles -->
  <link rel="stylesheet" href="{% static 'css/dicquo.css' %}" />
-</head>
-<body style="background: rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %});
+
+  <style>
+    body {
+        margin: 0;
+        min-height: 100vh;
+        background: rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %});
        background: -webkit-linear-gradient(to right, rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %}), rgb({% for i in CLR %}{% if forloop.counter > 3 %}{{ i|stringformat:"02d" }}{% if not forloop.last %},{%endif %}{% endif %}{% empty %}19,10,05{% endfor %}));
-             background: linear-gradient(to right, rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %}), rgb({% for i in CLR %}{% if forloop.counter > 3 %}{{ i|stringformat:"02d" }}{% if not forloop.last %},{%endif %}{% endif %}{% empty %}19,10,05{% endfor %}));">{% block BODY %}
-  {% block Top_JS1 %}{% endblock %}{% block Top_JS2 %}{% endblock %}{% block Top_JS3 %}{% endblock %}
-  {% block Top_CSS1 %}{% endblock %}{% block Top_CSS2 %}{% endblock %}{% block Top_CSS3 %}{% endblock %}
+        background: linear-gradient(to right, rgb({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %}), rgb({% for i in CLR %}{% if forloop.counter > 3 %}{{ i|stringformat:"02d" }}{% if not forloop.last %},{%endif %}{% endif %}{% empty %}19,10,05{% endfor %}));
+    }
+  </style>
+
+  {% block ExtraHead %}{% endblock %}
+</head>
+<body>
  {% block CONTENT %}{% endblock %}
-{% endblock %}
-<!-- Rating Mail.ru counter --><script type="text/javascript">var _tmr = window._tmr || (window._tmr = []);_tmr.push({id:"1603042",type:"pageView",start:(new Date()).getTime()});(function(d,w,id){if(d.getElementById(id)) return;var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function(){var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera == "[object Opera]"){ d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"topmailru-code");</script><noscript><div><img src="https://top-fwz1.mail.ru/counter?id=1603042;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript><!-- //Rating Mail.ru counter -->
+  {% include "blocks/counters.html" %}
 </body>
 </html>
--- a/dicquo/templates/blocks/counters.html
+++ b/dicquo/templates/blocks/counters.html
@@ -0,0 +1,4 @@
+<!-- Rating Mail.ru counter -->
+<script type="text/javascript">var _tmr = window._tmr || (window._tmr = []);_tmr.push({id:"1603042",type:"pageView",start:(new Date()).getTime()});(function(d,w,id){if(d.getElementById(id)) return;var ts=d.createElement("script");ts.type="text/javascript";ts.async=true;ts.id=id;ts.src="https://top-fwz1.mail.ru/js/code.js";var f=function(){var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(ts,s);};if(w.opera == "[object Opera]"){ d.addEventListener("DOMContentLoaded",f,false);}else{f();}})(document,window,"topmailru-code");</script><noscript><div><img src="https://top-fwz1.mail.ru/counter?id=1603042;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
+<!-- //Rating Mail.ru counter -->
+
--- a/dicquo/templates/blocks/header_nav.html
+++ b/dicquo/templates/blocks/header_nav.html
@@ -1,16 +1,19 @@
-{% load static %}<!-- ШАПКА: НАЧАЛО -->
-  <center><table>
-    <tr>
-      <td align="left">
-        <a href="\" id="logo">
+{% load static %}
+<!-- ШАПКА: НАЧАЛО -->
+<div class="container">
+  <header>
+      <a href="/" id="logo">
        <img src='{% static "svgs/dq-logo.svg" %}' alt="Dictum & Quotes" title="Dictum & Quotes"
-               width="50" height="46"/></a>
-      </td>
-      <td align="right">
-        <span id="menu">
-          <a href="#">Блог</a> | <a href="#">Добавить высказывание</a> |
-        </span>
-        <a href="#" id="mm" onclick="document.getElementById('menu').style.display='inline';">≡</a></td>
-    </tr>
-  </table></center>
-  <!-- ШАПКА: КОНЕЦ -->
+             width="50" height="46"/>
+      </a>
+      <div>
+        <nobr id="stats-menu" style="display: none; color: silver; font-size: 0.9em; margin-right: 15px;">
+          {% if ticks %}<i class="stats-icon icon-time" title="Generation time"></i> {{ ticks|floatformat:1 }}ms{% endif %}
+          {% if DQ %} &nbsp; | &nbsp; <i class="stats-icon icon-views" title="Views"></i> {{ DQ.iViewCounter }}{% endif %}
+           &nbsp; | &nbsp;  <a href="/add_quote/" style="color: silver; text-decoration: none;" title="Добавить цитату">Добавить цитату</i></a>  &nbsp; |
+        </nobr>
+        <a href="#" onclick="var m=document.getElementById('stats-menu'); m.style.display = (m.style.display === 'none' ? 'inline' : 'none'); return false;" style="color: silver; text-decoration: none; font-size: 1.2em;">≡</a>
+      </div>
+  </header>
+</div>
+<!-- ШАПКА: КОНЕЦ -->
--- a/dicquo/templates/index.html
+++ b/dicquo/templates/index.html
@@ -1,52 +1,92 @@
 {% extends "base.html" %}
 {% load static %}

-{% block Date4Meta %}{{ DQ.dtCreated|date:"c" }}{% endblock %}
-{% block Last4Meta %}{{ DQ.dtEdited|date:"c" }}{% endblock %}
-{% block Expires4Meta %}{% now "c" %}{% endblock %}"
+{% block Last4Meta %}{{ DQ.dtEdited|date:"Y-m-d" }}{% endblock %}

-{% block Description %}{% if DQ.szIntro %}{{ DQ.szIntro }} {% endif %}{{ DQ.szContent }}{% if AUTHOR.szAuthor %} ({{ AUTHOR.szAuthor }}){% endif %}{% endblock %}
+{% block Description %}{% if DQ.szIntro %}{{ DQ.szIntro }} {% endif %}{{ DQ.szContent }}{% if AUTHOR %} ({{ AUTHOR.szAuthor }}){% endif %}{% endblock %}

 {% block Keywords %}Цитаты, {% for i in TAGS %}{{ i.name|safe }}, {% endfor %}Высказвания{% endblock %}


-{% block CopyrightAuthor4Meta %}{% if AUTHOR.szAuthor %}, {{ AUTHOR.szAuthor }} (слова){% endif %}{% endblock %}
+{% block CopyrightAuthor4Meta %}{% if AUTHOR %}, {{ AUTHOR.szAuthor }} (слова){% endif %}{% endblock %}

 <!--- ТИТУЛ --->
-{% block Title %}DQ: {{ DQ.szContent }}{% if AUTHOR.szAuthor %} ({{ AUTHOR.szAuthor }}){% endif %}{% endblock %}
+{% block Title %}DQ: {{ DQ.szContent }}{% if AUTHOR %} ({{ AUTHOR.szAuthor }}){% endif %}{% endblock %}

-{% block Top_JS1 %}{% endblock %}
+{% block ExtraHead %}
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "CreativeWork",
+  "name": "Dictum & Quotes #{{ DQ.id }}",
+  "text": "{{ DQ.szContent|escapejs }}",
+  {% if AUTHOR %}"author": {
+    "@type": "Person",
+    "name": "{{ AUTHOR.szAuthor|escapejs }}"
+  },{% endif %}
+  {% if IMAGE %}"image": "{{ request.scheme }}://{{ request.get_host }}{{ IMAGE.url }}",{% endif %}
+  "keywords": "{% for i in TAGS %}{{ i.name|escapejs }}{% if not forloop.last %}, {% endif %}{% endfor %}",
+  "inLanguage": "ru",
+  "dateCreated": "{{ DQ.dtCreated|date:'Y-m-d' }}",
+  "dateModified": "{{ DQ.dtEdited|date:'Y-m-d' }}"
+}
+</script>
+{% endblock %}

-{% block Top_JS2 %}{% endblock %}
-
-{% block Top_JS3 %}{% endblock %}

 {% block CONTENT %}{% include "blocks/header_nav.html" %}
-  <center><table style="height:80vh;">
-    <tr>
-      <td>
+<div class="container main-content">
+  <!-- Основной контент: Текст + Картинка -->
+  <div class="content-row">
+
+    <!-- Текстовая колонка -->
+    <div class="text-col">
+        <!-- Интро/Вступление -->
+        {% if DQ.szIntroHTML %}
        <div id="info">{{ DQ.szIntroHTML|safe }}</div>
-        <div id="bb">{{ DQ.szContentHTML|safe }}</div>
-        <div id="author">{{ AUTHOR.szAuthorHTML|safe }}</div>
-      </td>{% if IMAGE %}<td id="image">
-        <center><div style="background:rgba({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %},0.7);">
-          <div><img src="{{IMAGE.url}}" alt="{{ AUTHOR.szAuthor }}" title="{{ AUTHOR.szAuthor }}" /></div>
-        </div></center>
-      </td></tr><tr><td colspan="2">{% else %}</tr><tr><td>{% endif %}
+        {% endif %}
+
+        <!-- Цитата: Семантический blockquote -->
+        <blockquote id="bb" style="border:none; margin:0; padding:0;">
+            {{ DQ.szContentHTML|safe }}
+        </blockquote>
+
+        <!-- Автор: Семантический cite -->
+        <div id="author">
+            <cite>
+              {% if AUTHOR %}
+                {{ AUTHOR.szAuthorHTML|default:AUTHOR.szAuthor|safe }}
+              {% endif %}
+            </cite>
+        </div>
+    </div>
+
+    <!-- Колонка с картинкой (если есть) -->
+    {% if IMAGE %}
+    <div class="image-col" id="image">
+        <center>
+          <div style="background:rgba({% for i in CLR %}{% if forloop.counter <= 3 %}{{ i|stringformat:"02d" }}{% if forloop.counter < 3 %},{%endif %}{% endif %}{% empty %}87,00,00{% endfor %},0.7);">
+             <div><img src="{{IMAGE.url}}" alt="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" title="{% if AUTHOR %}{{ AUTHOR.szAuthor }}{% else %}Dictum & Quotes{% endif %}" /></div>
+          </div>
+        </center>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Блок тегов и навигации -->
  <div class="tags">
      {% for i in TAGS %}<a href="/?tag={{ i.slug }}">{{ i.name|safe }}</a> {% endfor %}
-          <div id="next"><a href="/{{ NEXT }}_{{ NEXT_TXT }}">&rightarrow;</a></div>
+      <div id="next"><a href="/{{ NEXT }}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">&rightarrow;</a></div>
  </div>
-      </td>
-    </tr>
-  </table></center>
+</div>
+

 <script type="text/javascript">
-   setTimeout('location.replace("/{{ NEXT }}_{{ NEXT_TXT }}")', 15000);
+   setTimeout('location.replace("/{{ NEXT }}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}")', 15000);
   /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
 </script>
 <noscript>
-   <meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}">
+   <meta http-equiv="refresh" content="15; url=/{{ NEXT}}_{{ NEXT_TXT }}{% if CURRENT_TAG %}?tag={{ CURRENT_TAG }}{% endif %}">
 </noscript>


--- a/dicquo/web/views.py
+++ b/dicquo/web/views.py
@@ -133,7 +133,7 @@ class CommonContextMixin:
        total_time = 0.0
        if hasattr(self, 't_start'):
            total_time = float(time.process_time() - self.t_start)
-        context['ticks'] = total_time
+        context['ticks'] = total_time * 1000
        return context


--- a/public/static/css/dicquo.css
+++ b/public/static/css/dicquo.css
@@ -132,3 +132,76 @@ table { width: 80%; }
 #next { float: right; }

 #next a { border-bottom: none; }
+
+/* --- NEW STYLES for FLEXBOX LAYOUT --- */
+.container {
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Header */
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1vh 0;
+}
+
+/* Main Content Area */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 80vh;
+}
+
+.content-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2vw;
+}
+
+.text-col {
+  flex: 1;
+}
+
+.image-col {
+  flex: 0 0 30vw;
+  display: flex;
+  justify-content: center;
+}
+
+/* --- Icons for Header Stats (SVG in Base64) --- */
+.stats-icon {
+  display: inline-block;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 0.2em;
+  opacity: 0.7; /* Slight transparency for subtle look */
+}
+
+/* Clock Icon (Time) */
+.icon-time {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='silver' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+/* Eye Icon (Views) */
+.icon-views {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='silver' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+/* Responsive: on mobile stack columns */
+@media (max-width: 768px) {
+  .content-row {
+    flex-direction: column-reverse;
+  }
+  .image-col {
+    flex: 0 0 auto;
+    margin-bottom: 2vh;
+  }
+}