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

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
}

1
/**
2
 * 用同一份文章清單建立所有相關文章結果
3
 */
4
export async function getAllRelatedPostsMap(
5
  limit: number = 4
6
): Promise<Map<string, PostForList[]>> {
7
  const allPosts = await getSortedPostsList();
8
  const relatedMap = new Map<string, PostForList[]>();
9

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

21
  return relatedMap;
22
}

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;

1
related:
2
  - slug: cloudflare-workers-redirects-order-limits
3
    relation: background
4
    reason: 先理解靜態規則與動態路徑的排序方式

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
)}