移除分类 - 云弈斋

723 字

4 分钟

移除分类

2025-11-28

Astro

/

Fuwari

/

博客改造

对于一般的技术类个人博客来说，标签和系列已经足够满足我们需求了，而且大部分情况下文章可能都会是一个类目，反而显得有些冗余，所以去除这个分类可以使我们的博客更加美观

需要修改的文件#

1. 侧边栏组件#

文件： src/components/widget/SideBar.astro

移除 Categories 组件的导入：

1
---
2
import type { MarkdownHeading } from "astro";
3
import Categories from "./Categories.astro";
4
import Profile from "./Profile.astro";
5
import Series from "./Series.astro";
6
import Tag from "./Tags.astro";
7

8
interface Props {
9
  class?: string;
10
  headings?: MarkdownHeading[];
11
  series?: string;
12
}

移除分类组件的显示：

21
<div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
22
    <div id="series" class="flex flex-col w-full gap-4">
23
        { series && <Series series={ series }></Series> }
24
    </div>
25
    <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
26
    <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
27
</div>

2. 文章元数据组件#

文件： src/components/PostMeta.astro

移除导入中的 getCategoryUrl，Props 接口中的 category 属性，以及 Props 解构中的 category 和整个 categories 显示区块：

1
---
2
import { Icon } from "astro-icon/components";
3
import I18nKey from "../i18n/i18nKey";
4
import { i18n } from "../i18n/translation";
5
import { formatDateToYYYYMMDD } from "../utils/date-utils";
6
import { getCategoryUrl, getTagUrl } from "../utils/url-utils";
7

8
interface Props {
9
  class: string;
10
  published: Date;
11
  updated?: Date;
12
  tags: string[];
13
  category: string | null;
14
  hideTagsForMobile?: boolean;
15
  hideUpdateDate?: boolean;
16
}
17
const {
18
  published,
19
  updated,
20
  tags,
21
  category,
22
  hideTagsForMobile = false,
23
  hideUpdateDate = false,
24
} = Astro.props;
25
const className = Astro.props.class;
26
---
27

28
<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
29
    <!-- publish date -->
30
    <div class="flex items-center">
31
        <div class="meta-icon">
32
            <Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
33
        </div>
34
        <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
35
    </div>
36

37
    <!-- update date -->
38
    {!hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
39
        <div class="flex items-center">
40
            <div class="meta-icon">
41
                <Icon name="material-symbols:edit-calendar-outline-rounded" class="text-xl"></Icon>
42
            </div>
43
            <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(updated)}</span>
44
        </div>
45
    )}
46

47
    <!-- categories -->
48
    <div class="flex items-center">
49
        <div class="meta-icon">
50
            <Icon name="material-symbols:book-2-outline-rounded" class="text-xl"></Icon>
51
        </div>
52
        <div class="flex flex-row flex-nowrap items-center">
53
            <a href={getCategoryUrl(category)} aria-label={`View all posts in the ${category} category`}
54
               class="link-lg transition text-50 text-sm font-medium
55
                            hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
56
                {category || i18n(I18nKey.uncategorized)}
57
            </a>
58
        </div>
59
    </div>
60

61
    <!-- tags -->
62
    <div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>

3. 文章卡片组件#

文件： src/components/PostCard.astro

移除 Props 接口中的 category 属性和解构中的 category：

11
interface Props {
12
  class?: string;
13
  entry: CollectionEntry<"posts">;
14
  title: string;
15
  url: string;
16
  published: Date;
17
  updated?: Date;
18
  tags: string[];
19
  category: string | null;
20
  image: string;
21
  description: string;
22
  draft: boolean;
23
  style: string;
24
}
25
const {
26
  entry,
27
  title,
28
  url,
29
  published,
30
  updated,
31
  tags,
32
  category,
33
  image,
34
  description,
35
  style,
36
} = Astro.props;

移除传递给 PostMetadata 的 category 参数：

60
<PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>

4. 文章列表页面#

文件： src/components/PostPage.astro

移除传递给 PostCard 的 category={entry.data.category} 参数：

12
{page.data.map((entry: CollectionEntry<"posts">) => (
13
    <PostCard
14
        entry={entry}
15
        title={entry.data.title}
16
        tags={entry.data.tags}
17
        category={entry.data.category}
18
        published={entry.data.published}
19
        updated={entry.data.updated}
20
        url={getPostUrlBySlug(entry.slug)}
21
        image={entry.data.image}
22
        description={entry.data.description}
23
        draft={entry.data.draft}
24
        class:list="onload-animation"
25
        style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
26
    ></PostCard>
27
))}

5. 文章详情页面#

文件： src/pages/posts/[...slug].astro

移除传递给 PostMetadata 的 category={entry.data.category} 参数：

87
<div class="onload-animation">
88
    <PostMetadata
89
        class="mb-5"
90
        published={entry.data.published}
91
        updated={entry.data.updated}
92
        tags={entry.data.tags}
93
        category={entry.data.category}
94
    ></PostMetadata>
95
    {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
96
</div>

注意事项#

保留的部分#

虽然移除了分类功能的显示，但以下部分仍然保留：

Content Schema：src/content/config.ts 中的 category 字段定义保留，这样不会破坏现有文章的 frontmatter。

1
const postsCollection = defineCollection({
2
    schema: z.object({
3
        // ... 其他字段
4
        category: z.string().optional().nullable().default(""),
5
        // ...
6
    }),
7
});