From c57b68a9e5b18d89f672e56f367d57e6e3ed796f Mon Sep 17 00:00:00 2001
From: Ad-closeNN <1709301095@qq.com>
Date: Sat, 25 Apr 2026 19:32:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E7=AB=A0=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E5=85=A5=E9=A1=B6=E9=83=A8=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=BF=BB=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/posts/[...slug].astro | 58 ++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 6fffa48..4419eda 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -67,26 +67,52 @@ 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-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>
+            <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>
+                        </div>
+                        <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
                     </div>
-                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
-                </div>
-                <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:schedule-outline-rounded"></Icon>
+                    <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:schedule-outline-rounded"></Icon>
+                        </div>
+                        <div class="text-sm">
+                            大约 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
+                        </div>
                     </div>
-                    <div class="text-sm">
-                        大约 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
+                    <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:visibility-outline-rounded"></Icon>
+                        </div>
+                        <div class="text-sm" id="post-top-page-views">加载中...</div>
                     </div>
                 </div>
-                <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:visibility-outline-rounded"></Icon>
-                    </div>
-                    <div class="text-sm" id="post-top-page-views">加载中...</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>