Rewrite story title html to improve SEO

andreymal · Sep 23, 2023 · 5e72848 · 5e72848
1 parent 8d4f9af
commit 5e72848
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 10 deletions.
diff --git a/frontend/src/css/main.css b/frontend/src/css/main.css
@@ -856,6 +856,30 @@ input.show-spoiler-trigger {
     margin-bottom: 60px;
 }
 
+.story-item-header,
+.story-info-header {
+  font-family: 'Trebuchet MS', Arial, sans-serif;
+  font-weight: 400;
+  text-rendering: optimizelegibility;
+}
+
+.story-item-header {
+    font-size: 20px;
+    line-height: 20px;
+    margin-bottom: 5px;
+}
+
+.story-info-header {
+    font-size: 32px;
+    line-height: 42px;
+    margin: 6px 0;
+}
+
+.story-title {
+    display: inline;
+    margin: 0;
+}
+
 .green {
     color: green;
 }
@@ -885,6 +909,14 @@ input.show-spoiler-trigger {
     color: #999;
 }
 
+.story-item-header .story-mark {
+    font-size: 12px;
+}
+
+.story-info-header .story-mark {
+    font-size: 17px;
+}
+
 .story-info img,
 .story-notes img {
     max-width: 100%;
@@ -2694,6 +2726,10 @@ ul.editlog .editlog-item:nth-child(2n+1) {
         font-size: 22px;
         line-height: 28px;
     }
+    .story-info-header {
+        font-size: 22px;
+        line-height: 28px;
+    }
     .chapter-text-block {
         width: calc(100% - 12px);
         margin: 0;

diff --git a/mini_fiction/templates/includes/stories.html b/mini_fiction/templates/includes/stories.html
@@ -11,14 +11,21 @@
                 {{ edit_buttons(story) }}
             {% endif %}
         </div>
-        <h3>
-            <a href="{{ url_for('story.view', pk=story.id) }}">{{ story.title }}</a>
+
+        <div class="story-item-header">
+            <h3 class="story-title">
+                <a href="{{ url_for('story.view', pk=story.id) }}">{{ story.title }}</a>
+            </h3>
+
             {% if story.pinned -%}
                 <span class="scon small story-pinned" title="Рассказ закреплён"></span>
             {%- endif %}
+
             {{- story.bl.vote_view_html(user=current_user, full=False)|safe }}
-            {% include 'includes/story_marks.html' with context %}
-        </h3>
+
+            {% include 'includes/story_marks.html' %}
+        </div>
+
         <p class="meta">
             {{ tags_block(story.prepared_tags, story.id) }}
                 {{ ngettext("%(num)d word", "%(num)d words", story.words) }} {{ pgettext('story_by', 'by') }} {% include 'includes/story_authors_list.html' %}

diff --git a/mini_fiction/templates/includes/story_marks.html b/mini_fiction/templates/includes/story_marks.html
@@ -1,3 +1,4 @@
+<span class="story-marks">
 {% if story.draft -%}
     <sup class="story-mark draft">{{ pgettext('story_mark', 'draft') }}</sup>
 {% elif not story.approved -%}
@@ -14,3 +15,4 @@
 {%- else -%}
     <sup class="story-mark incomplete">{{ pgettext('story_mark', 'incomplete') }}</sup>
 {% endif %}
+</span>
diff --git a/mini_fiction/templates/story_localcomments.html b/mini_fiction/templates/story_localcomments.html
@@ -9,10 +9,13 @@
         <div class="icon-metagroup">
             {{ edit_buttons(story, with_edit=False) }}
         </div>
-        <h1 id="story_title">
-            <a class="invisible-link" href="{{ url_for('story.view', pk=story.id, _external=True) }}">{{ story.title }}</a>
+
+        <div class="story-info-header">
+            <h1 id="story_title" class="story-title">
+                <a class="invisible-link" href="{{ url_for('story.view', pk=story.id, _external=True) }}">{{ story.title }}</a>
+            </h1>
             {% include 'includes/story_marks.html' %}
-        </h1>
+        </div>
 
         <!-- Вывод комментариев: начало -->
         <div id="comments">

diff --git a/mini_fiction/templates/story_view.html b/mini_fiction/templates/story_view.html
@@ -37,19 +37,26 @@
             {{ common_buttons(story, with_abuse=True) }}
             {{ edit_buttons(story) }}
         </div>
-        <h1 id="story_title">
-            <span itemprop="name"><a itemprop="url" class="invisible-link" href="{{ url_for('story.view', pk=story.id, _external=True) }}">{{ story.title }}</a></span>
+
+        <div class="story-info-header">
+            <h1 id="story_title" class="story-title" itemprop="name">
+                <a itemprop="url" class="invisible-link" href="{{ url_for('story.view', pk=story.id, _external=True) }}">{{ story.title }}</a>
+            </h1>
+
             <span class="vote-area-1 js-vote-area-1-{{ story.id }}">
                 {{- story.bl.vote_area_1_html(user=current_user, user_vote=vote)|safe -}}
             </span>{#
             #}<span class="js-vote-view-{{ story.id }}" style="display: inline;">
                 {{- story.bl.vote_view_html(user=current_user, full=True)|safe -}}
             </span>
+
             {% include 'includes/story_marks.html' %}
-        </h1>
+        </div>
+
         <div class="vote-area-2 js-vote-area-2-{{ story.id }}">
             {{- story.bl.vote_area_2_html(user=current_user, user_vote=vote)|safe -}}
         </div>
+
             <p>
                 {{ tags_block(story.prepared_tags, story.id) }}
             </p>