feat: add post cursor supports

Signed-off-by: Ryan Wang <i@ryanc.cc>
xzhuz · Apr 28, 2023 · d8772d9 · d8772d9
1 parent 89423f2
commit d8772d9
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 47 deletions.
diff --git a/templates/module/widget/prev_next_page.html b/templates/module/widget/prev_next_page.html
@@ -1,46 +1,82 @@
-<div class="entry-navigation bg-white rounded shadow-md flex flex-wrap mt-10 overflow-hidden w-full ">
-  <div class="nav previous flex flex-col justify-center min-h-100 py-0 px-4 relative w-full sm:w-6/12 break-word">
-    <#if prevPost??>
-      <#if prevPost.thumbnail?? && prevPost.thumbnail!=''>
-        <img class="lazyload h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             src="${theme_base!}/source/images/loading.gif" data-src="${prevPost.thumbnail}" alt="${prevPost.title!}"/>
-      <#elseif settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
-        <img class="img-random lazyloaded h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             index="${.now?string['ss']?number - 1}" src="${theme_base!}/source/images/loading.gif"
-             alt="${prevPost.title!}"/>
-      </#if>
-      <span class="text-white font-medium text-lg pt-8 relative uppercase z-10 dark:text-gray-300">上一篇</span>
-      <h4 class="text-white text-lg mt-1 mx-0 mb-0 pb-8 relative z-10 dark:text-gray-300">${prevPost.title!}</h4>
-      <a class="absolute bottom-0 left-0 right-0 top-0 z-10 dark:text-gray-300" href="${prevPost.fullPath!}"></a>
-    <#else>
-      <#if settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
-        <img class="img-random lazyloaded h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             index="${.now?string['ss']?number - 1}" src="${theme_base!}/source/images/loading.gif"/>
-      </#if>
-      <span class="text-white font-medium text-lg pt-8 relative uppercase z-10 dark:text-gray-300">上一篇</span>
-      <h4 class="text-white text-lg mt-1 mx-0 mb-0 pb-8 relative z-10 dark:text-gray-300">无</h4>
-    </#if>
+<div
+  th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
+  class="entry-navigation mt-10 flex w-full flex-wrap overflow-hidden rounded bg-white shadow-md"
+>
+  <div
+    class="nav previous break-word relative flex min-h-100 w-full flex-col justify-center py-0 px-4 sm:w-6/12"
+  >
+    <th:block th:if="${postCursor.hasPrevious()}">
+      <img
+        th:if="${not #strings.isEmpty(postCursor.previous.spec.cover)}"
+        class="lazyload dark:filter-60 no-zoom absolute left-0 top-0 h-full w-full object-cover"
+        th:src="@{/assets/images/loading.gif}"
+        th:attr="data-src=${postCursor.previous.spec.cover}"
+        th:alt="${postCursor.previous.spec.title}"
+      />
+      <span
+        class="relative z-10 pt-8 text-lg font-medium uppercase text-white dark:text-gray-300"
+      >
+        上一篇
+      </span>
+      <h4
+        class="relative z-10 mx-0 mt-1 mb-0 pb-8 text-lg text-white dark:text-gray-300"
+        th:text="${postCursor.previous.spec.title}"
+      ></h4>
+      <a
+        class="absolute bottom-0 left-0 right-0 top-0 z-10 dark:text-gray-300"
+        th:href="@{${postCursor.previous.status.permalink}}"
+      ></a>
+    </th:block>
+    <th:block th:unless="${postCursor.hasPrevious()}">
+      <span
+        class="relative z-10 pt-8 text-lg font-medium uppercase text-white dark:text-gray-300"
+      >
+        上一篇
+      </span>
+      <h4
+        class="relative z-10 mx-0 mt-1 mb-0 pb-8 text-lg text-white dark:text-gray-300"
+      >
+        无
+      </h4>
+    </th:block>
   </div>
-  <div class="nav next items-end text-right flex flex-col justify-center min-h-100 py-0 px-4 relative w-full sm:w-6/12 break-word">
-    <#if nextPost??>
-      <#if nextPost.thumbnail?? && nextPost.thumbnail!=''>
-        <img class="lazyload h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             src="${theme_base!}/source/images/loading.gif" data-src="${nextPost.thumbnail}" alt="${nextPost.title!}"/>
-      <#elseif settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
-        <img class="img-random lazyloaded h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             index="${.now?string['ss']?number + 1}" src="${theme_base!}/source/images/loading.gif"
-             alt="${nextPost.title!}"/>
-      </#if>
-      <span class="text-white font-medium text-lg pt-8 relative uppercase z-10 dark:text-gray-300">下一篇</span>
-      <h4 class="text-white text-lg mt-1 mx-0 mb-0 pb-8 relative z-10 dark:text-gray-300">${nextPost.title!}</h4>
-      <a class="absolute bottom-0 left-0 right-0 top-0 z-10 dark:text-gray-300" href="${nextPost.fullPath}"></a>
-    <#else>
-      <#if settings.card_random_cover_list?? && settings.card_random_cover_list != ''>
-        <img class="img-random lazyloaded h-full w-full left-0 top-0 object-cover absolute dark:filter-60 no-zoom"
-             index="${.now?string['ss']?number + 1}" src="${theme_base!}/source/images/loading.gif" alt=""/>
-      </#if>
-      <span class="text-white font-medium text-lg pt-8 relative uppercase z-10 dark:text-gray-300">下一篇</span>
-      <h4 class="text-white text-lg mt-1 mx-0 mb-0 pb-8 relative z-10 dark:text-gray-300">无</h4>
-    </#if>
+  <div
+    class="nav next break-word relative flex min-h-100 w-full flex-col items-end justify-center py-0 px-4 text-right sm:w-6/12"
+  >
+    <th:block th:if="${postCursor.hasNext()}">
+      <img
+        th:if="${not #strings.isEmpty(postCursor.next.spec.cover)}"
+        class="lazyload dark:filter-60 no-zoom absolute left-0 top-0 h-full w-full object-cover"
+        th:src="@{/assets/images/loading.gif}"
+        th:attr="data-src=${postCursor.next.spec.cover}"
+        th:alt="${postCursor.next.spec.title}"
+      />
+      <span
+        class="relative z-10 pt-8 text-lg font-medium uppercase text-white dark:text-gray-300"
+      >
+        下一篇
+      </span>
+      <h4
+        class="relative z-10 mx-0 mt-1 mb-0 pb-8 text-lg text-white dark:text-gray-300"
+        th:text="${postCursor.next.spec.title}"
+      ></h4>
+      <a
+        class="absolute bottom-0 left-0 right-0 top-0 z-10 dark:text-gray-300"
+        th:href="@{${postCursor.next.status.permalink}}"
+      ></a>
+    </th:block>
+
+    <th:block th:unless="${postCursor.hasNext()}">
+      <span
+        class="relative z-10 pt-8 text-lg font-medium uppercase text-white dark:text-gray-300"
+      >
+        下一篇
+      </span>
+      <h4
+        class="relative z-10 mx-0 mt-1 mb-0 pb-8 text-lg text-white dark:text-gray-300"
+      >
+        无
+      </h4>
+    </th:block>
   </div>
 </div>
diff --git a/templates/post.html b/templates/post.html
@@ -159,11 +159,12 @@
       </div>
 
       <!-- 上一篇和下一篇 -->
-      <!-- <#if settings.post_nepre!true>
-      <div class="mx-4 md:mx-auto mt-8 max-w-4xl tracking-wider md:leading-relaxed sm:leading-normal">
-        <#include "module/widget/prev_next_page.ftl">
+      <div
+        th:if="${theme.config.post.post_nepre}"
+        class="mx-4 mt-8 max-w-4xl tracking-wider sm:leading-normal md:mx-auto md:leading-relaxed"
+      >
+        <th:block th:replace="~{module/widget/prev_next_page}" />
       </div>
-    </#if> -->
 
       <div
         class="md-content mx-4 mt-8 max-w-4xl tracking-wider sm:leading-normal md:mx-auto md:leading-relaxed"