给博客新增文章主页隐藏功能 hideFromHome

一、 修改 Content Schema#

在 src/content.config.ts 的 postsCollection 里面加上这个新字段：

1
const postsCollection = defineCollection({
2
  ...
3
  schema: z.object({
4
    ...
5
    comment: z.boolean().optional().default(true),
6
    password: z.string().optional().default(""),
7
    hideFromHome: z.boolean().optional().default(false), // 新增此项
8
  }),
9
});

默认设为 false，这样不加这个字段的老文章不会受任何影响。

二、 首页与 RSS 过滤#

接下来只需要在主页分页和 RSS 处把带有 hideFromHome: true 的文章过滤掉即可。

1
export const getStaticPaths = (async ({ paginate }) => {
2
  const allBlogPosts = (await getSortedPosts()).filter(
3
    (post) => !post.data.hideFromHome,
4
  );
5
  const pageSize = siteConfig.pagination.postsPerPage;
6
  return paginate(allBlogPosts, { pageSize });
7
}) satisfies GetStaticPaths;

1
const blog = (await getSortedPosts()).filter(
2
  (post) => !post.data.hideFromHome,
3
);

三、 归档页与分类联动#

归档页（src/components/controls/ArchivePanel.astro）的情况稍微特殊一点：

1. 默认无筛选状态下：希望隐藏这些文章，同时不计入年份统计数（如果某一年全部是隐藏文章，默认将整年折叠块隐藏）。
2. 选中分类或标签时：比如点击 AIGC 分类进入 /archive/?category=AIGC 时，客户端脚本会自动取消 hidden 属性，把隐藏的文章展示出来并重新计算数量。

修改 HTML 渲染部分：

1
<a
2
  href={getPostUrlBySlug(post.id)}
3
  class="archive-post ..."
4
  data-tags={JSON.stringify(post.data.tags || [])}
5
  data-category={post.data.category || ""}
6
  data-hide-from-home={post.data.hideFromHome ? "true" : "false"}
7
  hidden={post.data.hideFromHome}
8
>

这样原本没选分类时它默认带有 hidden 属性，一旦点击分类，原本的 JS 筛选逻辑就会动态把符合条件的文章解除隐藏，不需要写额外的复杂逻辑。

使用方法#

以后如果有不想在首页展示的文章，直接在 Markdown 的 Frontmatter 里加上一行：

1
---
2
title: "唱跳rap篮球"
3
category: "AIGC"
4
hideFromHome: true
5
---