Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 02:20:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ad-closeNN
2026-04-25 19:32:27 +08:00
parent 19484758a9
commit c57b68a9e5
1 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/posts/[...slug].astro
+42 -16
View File
@@ -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>