在 Astro 部落格實作自動延伸閱讀

Q: 如何自訂相關性計分規則？

修改 calculateRelatedPosts 函式中的計分邏輯。例如，你可以增加「相同作者 +3 分」、「發布日期相近 +1 分」等規則。目前的規則是：共同 tag +2 分、相同 category +1 分。

Q: 這個方案適用於其他 SSG 框架嗎？

概念相同，實作細節不同。Next.js 可以在 getStaticProps 中做類似的事；Hugo 可以用 .Site.RegularPages 搭配 intersect 函式；Jekyll 需要用 Liquid 模板或外掛。核心思路都是在 Build 階段預計算。

1081 字

5 分鐘

在 Astro 部落格實作自動延伸閱讀

2026-02-01

前端

Astro

/

SEO

/

前端開發

/

JavaScript

每次發布新文章，都要回頭修改舊文章的「延伸閱讀」連結？這不僅耗時，還容易遺漏。本文記錄如何在 Astro 部落格實作自動化的相關文章推薦系統。

問題分析#

在維護技術部落格時，常見的痛點包括：

延伸閱讀維護成本高：每篇新文章發布，相關舊文章都應該更新延伸閱讀
內部連結不一致：手動維護容易遺漏，導致 SEO 內部連結結構不完整
格式不統一：有些文章有延伸閱讀，有些沒有

解決方案架構#

我們的目標是在 Build 時自動計算相關文章：

1
getStaticPaths() 執行一次
2
    │
3
    ├── getSortedPosts() ─────────── 取得所有文章
4
    │
5
    └── getAllRelatedPostsMap() ──── 一次迴圈計算所有相關文章
6
            │
7
            └── Map<slug, PostForList[]>
8
                    │
9
                    ▼
10
每篇文章頁面
11
    │
12
    └── props.relatedPosts ───────── 直接使用預計算結果

為什麼選擇 Build 時生成而非前端動態載入？因為 SEO。Build 時生成的 HTML 包含完整連結，搜尋引擎爬蟲可以直接讀取。

實作步驟#

步驟 1：相關文章計算函式#

在 src/utils/content-utils.ts 新增計算邏輯：

1
/**
2
 * 計算單篇文章的相關文章
3
 */
4
function calculateRelatedPosts(
5
  currentSlug: string,
6
  currentTags: string[],
7
  currentCategory: string | undefined,
8
  allPosts: PostForList[],
9
  limit: number
10
): PostForList[] {
11
  const otherPosts = allPosts.filter((post) => post.slug !== currentSlug);
12

13
  const scoredPosts = otherPosts.map((post) => {
14
    let score = 0;
15

16
    // 每個共同 tag 加 2 分
17
    const postTags = post.data.tags || [];
18
    const commonTags = currentTags.filter((tag) => postTags.includes(tag));
19
    score += commonTags.length * 2;
20

21
    // 相同 category 加 1 分
22
    if (currentCategory && post.data.category === currentCategory) {
23
      score += 1;
24
    }
25

26
    return { post, score };
27
  });
28

29
  return scoredPosts
30
    .filter((item) => item.score > 0)
31
    .sort((a, b) => {
32
      if (b.score !== a.score) return b.score - a.score;
33
      return new Date(b.post.data.published).getTime()
34
           - new Date(a.post.data.published).getTime();
35
    })
36
    .slice(0, limit)
37
    .map((item) => item.post);
38
}

計分規則：

每個共同 tag：+2 分
相同 category：+1 分
分數相同時，較新的文章優先

步驟 2：一次性預計算（效能優化）#

為了避免每篇文章都重複讀取所有文章列表，我們在 getStaticPaths 只計算一次：

1
/**
2
 * 一次性計算所有文章的相關文章
3
 * 時間複雜度：O(n) 而非 O(n²)
4
 */
5
export async function getAllRelatedPostsMap(
6
  limit: number = 4
7
): Promise<Map<string, PostForList[]>> {
8
  const allPosts = await getSortedPostsList();
9
  const relatedMap = new Map<string, PostForList[]>();
10

11
  for (const post of allPosts) {
12
    const related = calculateRelatedPosts(
13
      post.slug,
14
      post.data.tags || [],
15
      post.data.category || undefined,
16
      allPosts,
17
      limit
18
    );
19
    relatedMap.set(post.slug, related);
20
  }
21

22
  return relatedMap;
23
}

步驟 3：整合至文章頁面#

在 src/pages/posts/[...slug].astro 的 getStaticPaths 中使用：

1
export async function getStaticPaths() {
2
  const blogEntries = await getSortedPosts();
3
  // 一次性計算所有文章的相關文章
4
  const relatedPostsMap = await getAllRelatedPostsMap(4);
5

6
  return blogEntries.map((entry) => ({
7
    params: { slug: entry.slug },
8
    props: {
9
      entry,
10
      relatedPosts: relatedPostsMap.get(entry.slug) || []
11
    },
12
  }));
13
}
14

15
const { entry, relatedPosts } = Astro.props;

步驟 4：建立 RelatedPosts 元件#

建立 src/components/RelatedPosts.astro：

1
---
2
import type { PostForList } from "@utils/content-utils";
3
import { getPostUrlBySlug } from "@utils/url-utils";
4
import { Icon } from "astro-icon/components";
5

6
interface Props {
7
  posts: PostForList[];
8
  class?: string;
9
}
10

11
const { posts, class: className } = Astro.props;
12
---
13

14
{posts.length > 0 && (
15
  <div class:list={["card-base rounded-xl p-6 mb-4", className]}>
16
    <h2 class="flex items-center gap-2 text-xl font-bold mb-4">
17
      <Icon name="material-symbols:link-rounded" />
18
      延伸閱讀
19
    </h2>
20
    <ul class="space-y-3">
21
      {posts.map((post) => (
22
        <li>
23
          <a href={getPostUrlBySlug(post.slug)}>
24
            {post.data.title}
25
          </a>
26
        </li>
27
      ))}
28
    </ul>
29
  </div>
30
)}