阅读进度 + 继续阅读 + 文章系列 + 完整 SEO

site.config.mjs

@@ -47,6 +47,13 @@ export const siteConfig = {
   pagination: {
     postsPerPage: 16,
   },
+  series: {
+    labels: {
+      webcustom: '博客定制手记',
+      opencv: 'OpenCV 学习笔记',
+      OpenGL: 'OpenGL 学习笔记',
+    },
+  },
   comments: {
     envId: 'https://comment.biss.click',
     region: '',

src/components/PostSeries.astro

@@ -0,0 +1,49 @@
+---
+import type { BlogPost } from '@/lib/posts';
+import { siteConfig } from '../../site.config.mjs';
+
+interface Props {
+  currentPost: BlogPost;
+  posts: BlogPost[];
+}
+
+const { currentPost, posts } = Astro.props;
+const currentIndex = posts.findIndex((post) => post.slug === currentPost.slug);
+const previousPost = currentIndex > 0 ? posts[currentIndex - 1] : undefined;
+const nextPost = currentIndex >= 0 && currentIndex < posts.length - 1 ? posts[currentIndex + 1] : undefined;
+const labels = siteConfig.series?.labels ?? {};
+const seriesKey = currentPost.series ?? '';
+const seriesTitle = labels[seriesKey] ?? seriesKey;
+---
+
+<section class="post-series" aria-labelledby="post-series-title">
+  <header class="post-series-head">
+    <div>
+      <span>ARTICLE SERIES</span>
+      <h2 id="post-series-title">{seriesTitle}</h2>
+    </div>
+    <strong>第 {currentIndex + 1} / {posts.length} 篇</strong>
+  </header>
+
+  <ol class="post-series-list">
+    {posts.map((post, index) => (
+      <li class:list={{ 'is-current': post.slug === currentPost.slug }}>
+        <a href={post.href} aria-current={post.slug === currentPost.slug ? 'page' : undefined}>
+          <span>{String(index + 1).padStart(2, '0')}</span>
+          <strong>{post.title}</strong>
+        </a>
+      </li>
+    ))}
+  </ol>
+
+  {(previousPost || nextPost) && (
+    <nav class="post-series-nav" aria-label="系列文章导航">
+      {previousPost ? (
+        <a href={previousPost.href} rel="prev"><span>上一篇</span><strong>{previousPost.title}</strong></a>
+      ) : <span></span>}
+      {nextPost ? (
+        <a href={nextPost.href} rel="next"><span>下一篇</span><strong>{nextPost.title}</strong></a>
+      ) : <span></span>}
+    </nav>
+  )}
+</section>

src/content.config.ts

@@ -6,6 +6,7 @@ const posts = defineCollection({
   schema: z.object({
     title: z.any().optional(),
     date: z.any().optional(),
+    updated: z.any().optional(),
     abbrlink: z.any().optional(),
     tags: z.any().optional(),
     category: z.any().optional(),
@@ -14,6 +15,8 @@ const posts = defineCollection({
     description: z.any().optional(),
     comments: z.any().optional(),
     cover: z.any().optional(),
+    series: z.any().optional(),
+    seriesOrder: z.any().optional(),
   }).passthrough(),
 });