博客折腾小计，为每个标签添加 rss

astro-paper 主题当前版本 v5.2.0 只有整站有 rss 订阅，但是有些标签有单独订阅的需求，我就使用 AI 辅助，为每个标签添加了 rss 订阅。整体上比较简单，基于现有的 AI 辅助编程很简单就可以实现。

为每个标签生成 RSS 订阅

Astro 本身带有 RSS 组件，并且 astro-paper 已经在项目的根目录使用 RSS 组件生成了博客所有文章的 RSS 订阅，我们需要做的就是参考该文件为每个标签生成对应的 RSS 组件。按照下面的内容创建 src/pages/tags/rss.xml.ts 文件。

import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
import { getPath } from "@/utils/getPath";
import { SITE } from "@/config";
import getPostsByTag from "@/utils/getPostsByTag";
import { slugifyStr } from "@/utils/slugify";

interface Props {
  tagName: string;
}

interface Params {
  tag: string;
}

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  const tags = posts
    .flatMap(post => post.data.tags)
    .map(tag => ({ tag: slugifyStr(tag), tagName: tag }))
    .filter(
      (value, index, self) =>
        self.findIndex(tag => tag.tag === value.tag) === index
    );

  return tags.map(({ tag, tagName }) => ({
    params: { tag },
    props: { tagName },
  }));
}

export async function GET({ params, props }: { params: Params; props: Props }) {
  const posts = await getCollection("blog");
  const tagPosts = getPostsByTag(posts, params.tag);

  return rss({
    title: `${SITE.title} | Tag: ${props.tagName}`,
    description: `All posts tagged with ${props.tagName}`,
    site: SITE.website,
    items: tagPosts.map(({ data, id, filePath }) => ({
      link: getPath(id, filePath),
      title: data.title,
      description: data.description,
      pubDate: new Date(data.modDatetime ?? data.pubDatetime),
    })),
  });
}

在标签页面展示订阅

通过上面的方式，已经为每个 tag 生成了对应的 RSS 订阅，路径为 /tags/{tagName}/rss.xml。按照下面的方式修改 src/pages/tags/[tag]/[...page].astro 文件。

import IconRss from "@/assets/icons/IconRss.svg";
<!-- 其他 import -->

<Layout title={`Tag: ${tagName} | ${SITE.title}`}>
  <Header />
  <Main
    pageTitle={[`Tag:`, `${tagName}`]}
    titleTransition={tag}
    pageDesc={`All the articles with the tag "${tagName}".`}
  >
    <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
    <!-- 下面是需要增加用于展示 RSS 订阅的代码 -->
    <div class="flex items-center gap-2">
      <div>使用 RSS 订阅该标签</div>
      <a
        href={`/tags/${tagName}/rss.xml`}
        class="hover:text-accent"
        title={`RSS feed for ${tagName} tag`}
        target="_blank"
      >
        <IconRss class="size-5" />
      </a>
    </div>
    <!-- 上面是需要增加用于展示 RSS 订阅的代码 -->
    <ul>
      {page.data.map(data => <Card {...data} />)}
    </ul>
  </Main>

  <Pagination {page} />

  <Footer noMarginTop={page.lastPage > 1} />
</Layout>

最后

至此，就为所有标签增加了对应的 rss 订阅。