refactor: Optimize article pages

f2ccloud · Sep 14, 2023 · dc8245b · dc8245b
1 parent fa21cf6
commit dc8245b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/templates/assets/dist/main.iife.js b/templates/assets/dist/main.iife.js
diff --git a/templates/assets/dist/style.css b/templates/assets/dist/style.css
diff --git a/templates/post.html b/templates/post.html
@@ -40,12 +40,12 @@ <h1 class="my-3 text-[1.625rem] font-medium dark:text-zinc-50" th:text="${post.s
             th:alt="${post.owner.displayName}"
           />
           <div class="flex flex-col gap-0.5">
-            <span
-              th:if="${not theme.config.layout.hide_author}"
-              class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
-              th:text="${not #strings.isEmpty(theme.config.layout.common_author) ? theme.config.layout.common_author : page.owner.displayName}"
-            ></span>
             <div class="flex items-center gap-2 text-xs font-light text-zinc-600 dark:text-zinc-100">
+              <span
+                th:if="${not theme.config.layout.hide_author}"
+                class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
+                th:text="${not #strings.isEmpty(theme.config.layout.common_author) ? theme.config.layout.common_author : page.owner.displayName}"
+              ></span>
               <span th:text="${'发布于 '+#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"></span>
               <span class="text-zinc-300 dark:text-zinc-200">/</span>
               <span th:text="${post.stats.visit}+' 阅读'"></span>
@@ -71,7 +71,7 @@ <h1 class="my-3 text-[1.625rem] font-medium dark:text-zinc-50" th:text="${post.s
               ></div>
             </template>
           </div>
-          <a href="#comment" class="cursor-pointer rounded-lg p-1 hover:bg-zinc-100 dark:hover:bg-zinc-600">
+          <a th:if="${site.comment.enable}" href="#comment" class="cursor-pointer rounded-lg p-1 hover:bg-zinc-100 dark:hover:bg-zinc-600">
             <div
               class="i-tabler-message-circle text-lg text-zinc-600 hover:text-zinc-900 dark:text-zinc-100 dark:hover:text-zinc-50"
             ></div>
@@ -88,41 +88,45 @@ <h1 class="my-3 text-[1.625rem] font-medium dark:text-zinc-50" th:text="${post.s
       </th:block>
       <article
         id="content"
-        class="prose prose-base font-normal prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base prose-tr:break-keep prose-th:border prose-th:border-solid prose-th:border-[var(--tw-prose-td-borders)] prose-td:border prose-td:border-solid prose-td:border-[var(--tw-prose-td-borders)] prose-pre:p-0 mt-4 !max-w-none dark:prose-invert"
+        class="prose prose-base font-normal prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base prose-tr:break-keep prose-th:p-2 prose-th:border prose-th:border-solid prose-th:bg-neutral-300 prose-th:dark:bg-neutral-400 prose-th:border-[var(--tw-prose-td-borders)] prose-td:p-2 prose-td:border prose-td:border-solid prose-td:border-[var(--tw-prose-td-borders)] prose-pre:p-0 mt-4 !max-w-none dark:prose-invert"
         th:utext="${post.content.content}"
       ></article>
+      <hr class="my-10 dark:border-zinc-700" />
       <div
-        class="mt-10 flex flex-col sm:flex-row sm:justify-between"
+        class="my-10 flex flex-col sm:flex-row sm:justify-between"
         th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
       >
         <div class="flex justify-start">
           <a
             th:if="${postCursor.hasPrevious()}"
             role="navigation"
-            class="group inline-flex items-center gap-2 truncate text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-100 dark:hover:text-zinc-200"
+            class="group inline-flex items-center gap-2 truncate text-base hover:text-[#567AAC] text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-200"
             th:href="@{${postCursor.previous.status.permalink}}"
             th:title="${postCursor.previous.spec.title}"
           >
             <span class="i-tabler-chevron-left translate-x-1 text-lg transition-all group-hover:-translate-x-0"></span>
-            <span th:text="${#strings.abbreviate(postCursor.previous.spec.title,20)}"></span>
+            <span>上一篇:</span>
+            <span th:text="${#strings.abbreviate(postCursor.previous.spec.title,25)}"></span>
           </a>
         </div>
+
         <div class="flex justify-end">
           <a
             th:if="${postCursor.hasNext()}"
             role="navigation"
-            class="group inline-flex items-center gap-2 truncate text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-100 dark:hover:text-zinc-200"
+            class="group inline-flex items-center gap-2 truncate text-base hover:text-[#567AAC] text-zinc-700 dark:text-zinc-100 dark:hover:text-zinc-200"
             th:href="@{${postCursor.next.status.permalink}}"
             th:title="${postCursor.next.spec.title}"
           >
-            <span th:text="${#strings.abbreviate(postCursor.next.spec.title,20)}"></span>
+            <span>下一篇:</span>
+            <span th:text="${#strings.abbreviate(postCursor.next.spec.title,25)}"></span>
             <span class="i-tabler-chevron-right -translate-x-1 text-lg transition-all group-hover:translate-x-0"></span>
           </a>
         </div>
       </div>
       <hr class="my-10 dark:border-zinc-700" />
       <!-- https://github.com/halo-sigs/plugin-comment-widget -->
-      <div th:if="${pluginFinder.available('PluginCommentWidget')}">
+      <div th:if="${site.comment.enable} and ${pluginFinder.available('PluginCommentWidget')}">
         <h2 class="mb-2 text-base font-medium text-zinc-900 dark:text-zinc-50">评论</h2>
         <halo:comment
           group="content.halo.run"