feat: 文章详细页加入顶部按钮翻页

src/pages/posts/[...slug].astro

@@ -67,7 +67,8 @@ const isOutdated = entry.data.outdated;
             {}
         ]}>
             <!-- word count and reading time -->
-            <div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
+            <div class="flex flex-col gap-3 mb-3 transition onload-animation md:flex-row md:items-start md:justify-between">
+                <div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-5 transition">
                     <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
                         <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
                             <Icon name="material-symbols:notes-rounded"></Icon>
@@ -89,6 +90,31 @@ const isOutdated = entry.data.outdated;
                         <div class="text-sm" id="post-top-page-views">加载中...</div>
                     </div>
                 </div>
+                <div class="flex items-center justify-end gap-2 text-black/40 dark:text-white/40 md:shrink-0">
+                    <a
+                        href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
+                        aria-label={entry.data.nextTitle ? `上一篇：${entry.data.nextTitle}` : "没有上一篇"}
+                        title={entry.data.nextTitle || undefined}
+                        class:list={[
+                            "btn-card h-9 w-9 rounded-xl active:scale-95",
+                            {"pointer-events-none opacity-40": !entry.data.nextSlug},
+                        ]}
+                    >
+                        <Icon name="material-symbols:chevron-left-rounded" class="text-[1.5rem] text-[var(--primary)]"></Icon>
+                    </a>
+                    <a
+                        href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
+                        aria-label={entry.data.prevTitle ? `下一篇：${entry.data.prevTitle}` : "没有下一篇"}
+                        title={entry.data.prevTitle || undefined}
+                        class:list={[
+                            "btn-card h-9 w-9 rounded-xl active:scale-95",
+                            {"pointer-events-none opacity-40": !entry.data.prevSlug},
+                        ]}
+                    >
+                        <Icon name="material-symbols:chevron-right-rounded" class="text-[1.5rem] text-[var(--primary)]"></Icon>
+                    </a>
+                </div>
+            </div>
 
             <!-- title -->
             <div class="relative onload-animation">