PostNav 上一篇下一篇
浅色细线下面并排两个链接:左边上一篇,右边下一篇。
放在文章最末尾。顺序由页面决定;这个网站按发布时间,Previous 是更早的一篇,Next 是更新的一篇。
页面里怎么写
Section titled “页面里怎么写”<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。交付包在个人网站样板里直接写了这段,这里做成组件。