跳转到内容

PostNav 上一篇下一篇

浅色细线下面并排两个链接:左边上一篇,右边下一篇。

放在文章最末尾。顺序由页面决定;这个网站按发布时间,Previous 是更早的一篇,Next 是更新的一篇。

<PostNav prev={{ title: "Vibe Coding", href: "/blog/vibe-coding" }} next={{ title: "…", href: "…" }} />

两边都没有时什么也不输出。

浅色细线下面的两栏网格。每个链接是大写小标签 Previous 或 Next,下面是 18px 衬线字的文章标题。Next 靠右。缺一边时那一格留空,Next 仍然在右边。窄于 560px 时两个链接上下排。

属性 取值
prev、next { title, href, lang }
label、prevLabel、nextLabel 导航的名字 “More posts”,以及两个小标签
状态 变化
悬停 标题变成珊瑚色

名为 “More posts” 的 <nav>。每个链接的名字是小标签加标题,分别带 rel="prev" 和 rel="next"。

PostNav.astro。交付包在个人网站样板里直接写了这段,这里做成组件。

PostLicense 版权卡片。