归档统计

1
---
2
import { getSortedPostsList } from "@/utils/content-utils";  // [!code --]
3
const sortedPostsList = await getSortedPostsList();     // [!code --]
4
<ArchivePanel sortedPosts={sortedPostsList} client:only="svelte" /> // [!code --]
5

6
import { getArchiveList } from "@/utils/content-utils";
7

8
// 获取归档列表（posts + moments + bangumi + life）
9
const archiveList = await getArchiveList();
10

11
// 计算各类型数量
12
const postsCount = archiveList.filter(item => item.type === "post").length;
13
const momentsCount = archiveList.filter(item => item.type === "moment").length;
14
const bangumiCount = archiveList.filter(item => item.type === "bangumi").length;
15
const lifeCount = archiveList.filter(item => item.type === "life").length;
16
const totalCount = postsCount + momentsCount + bangumiCount + lifeCount;
17
---
18

19
<MainGridLayout title={i18n(I18nKey.archive)}>
20
      <!-- 统计信息 -->
21
    <div class="card-base px-8 py-6 mb-6">
22
        <div class="flex flex-wrap gap-6 justify-center text-center">
23
            <div class="flex flex-col">
24
                <span class="text-3xl font-bold text-amber-500">{postsCount}</span>
25
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.postList)}</span>
26
            </div>
27
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
28
            <div class="flex flex-col">
29
                <span class="text-3xl font-bold text-(--primary)">{momentsCount}</span>
30
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.moments)}</span>
31
            </div>
32
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
33
            <div class="flex flex-col">
34
                <span class="text-3xl font-bold text-red-500 dark:text-red-400">{bangumiCount}</span>
35
                <span class="text-sm text-30 mt-1">{i18n(I18nKey.bangumi)}</span>
36
            </div>
37
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
38
            <div class="flex flex-col">
39
                <span class="text-3xl font-bold text-emerald-600 dark:text-emerald-400">{lifeCount}</span>
40
                <span class="text-sm text-30 mt-1">生活</span>
41
            </div>
42
            <div class="w-px bg-neutral-200 dark:bg-neutral-700"></div>
43
            <div class="flex flex-col">
44
                <span class="text-3xl font-bold text-(--primary)">{totalCount}</span>
45
                <span class="text-sm text-30 mt-1">总计</span>
46
            </div>
47
        </div>
48
    </div>
49
  <ArchivePanel sortedPosts={archiveList} client:only="svelte" />
50
</MainGridLayout>

1
---
2
import { getCategoryUrl, getPostUrlBySlug } from "@utils/url-utils";
3
import { getDiaryList } from "@/data/diary"
4
---
5

6
export interface ArchiveItem {
7
  id: string;
8
  type: "post" | "moment" | "bangumi" | "life";
9
  link?: string;
10
  data: {
11
    title: string;
12
    published: Date;
13
    tags: string[];
14
    category?: string | null;
15
  };
16
}
17

18
export async function getArchiveList(): Promise<ArchiveItem[]> {
19
  const posts = await getCollection("posts", ({ data }) => {
20
    return import.meta.env.PROD ? data.draft !== true : true;
21
  });
22
  const diaryList = getDiaryList();
23

24
  const postItems: ArchiveItem[] = posts.map((post) => ({
25
    id: post.id,
26
    type: "post",
27
    link: getPostUrlBySlug(post.id),
28
    data: {
29
      title: post.data.title,
30
      published: post.data.published,
31
      tags: post.data.tags,
32
      category: post.data.category || null,
33
    },
34
  }));
35

36
  // 将日记数据转换为归档项
37
  const momentItems: ArchiveItem[] = diaryList.map((diary) => {
38
    let title = diary.content || "";
39
    title = title.replace(/[#*`]/g, "").trim();
40
    if (title.length > 50) title = `${title.substring(0, 50)}...`;
41
    if (!title) title = i18n(I18nKey.moments) || "日常动态";
42

43
    return {
44
      id: String(diary.id),
45
      type: "moment",
46
      link: "/diary/",
47
      data: {
48
        title: title,
49
        published: new Date(diary.date),
50
        tags: diary.tags || [],
51
        category: null,
52
      },
53
    };
54
  });
55

56
  // 空数组，用于保持接口兼容性
57
  const bangumiItems: ArchiveItem[] = [];
58
  const lifeItems: ArchiveItem[] = [];
59

60
  return [...postItems, ...momentItems, ...bangumiItems, ...lifeItems].sort((a, b) => {
61
    const timeA = a.data.published.getTime();
62
    const timeB = b.data.published.getTime();
63
    return timeB - timeA;
64
  });
65
}

1
interface Post {
2
  id: string;
3
  type?: "post" | "moment" | "bangumi" | "life";
4
  link?: string;
5
  data: {
6
    title: string;
7
    tags: string[];
8
    category?: string | null;
9
    published: Date;
10
  };
11
}
12

13
{@const postLink = post.link || getPostUrlBySlug(post.id)}
14
<a
15
  href={getPostUrlBySlug(post.id)}  // [!code --]
16
    href={postLink}  // [!code ++]
17
  aria-label={post.data.title}
18
  class="group btn-plain block! h-10 w-full rounded-lg hover:text-[initial]"
19
>
20

21
<div
22
                class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
23
                     group-hover:translate-x-1 transition-all group-hover:text-(--primary)
24
                     text-75 pr-8 whitespace-nowrap text-ellipsis overflow-hidden flex items-center gap-2"
25
            >
26
              {#if post.type === 'post'}
27
                <span class="px-1.5 py-0.5 text-[10px] bg-amber-500 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
28
                  文章
29
                </span>
30
              {:else if post.type === 'moment'}
31
                <span class="px-1.5 py-0.5 text-[10px] bg-(--primary) text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
32
                  {i18n(I18nKey.moments) || 'Moment'}
33
                </span>
34
              {:else if post.type === 'bangumi'}
35
                <span class="px-1.5 py-0.5 text-[10px] bg-red-500 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
36
                  {i18n(I18nKey.bangumi) || 'Record'}
37
                </span>
38
              {:else if post.type === 'life'}
39
                <span class="px-1.5 py-0.5 text-[10px] bg-emerald-600 text-white rounded-md shrink-0 uppercase tracking-wider opacity-80 font-normal">
40
                  生活
41
                </span>
42
              {/if}
43
              <span class="truncate">{post.data.title}</span>
44
            </div>