Photo by Monica Hudec on Unsplash

美化 Astro 项目的 RSS 订阅源

author's avatar
igaozp
未来已来，只是分布不均

众所周知网站中的 RSS 订阅源链接对应的是 XML 格式内容，一般情况下直接访问订阅源链接就直接展示对应的 XML 结构内容。

当然，我们可以对这个页面的样式进行优化。这篇教程展示了在 Astro 构建的项目中如何改进 RSS 的订阅源样式。

准备

我们借助 RSS.Beauty 这个工具来帮助我们优化样式

RSS.Beauty 是一个基于 XSLT 技术的 RSS 美化工具, 可以将普通的 RSS/Atom 订阅源转换成美观的阅读界面。

我们选择 File 选项后可以下载到一个 XSL 文件，这个文件就是用来实现美化的样式文件，可以把它类比成 CSS。

RSS.Beauty official site screenshot

在 Astro 中集成

  1. 首先将下载的 XSL 文件放入到 Astro 项目中的 public 目录中
  2. 修改 Astro 项目的 rss.xml.js 文件
    1. 在 RSSOptions 配置中增加 stylesheet 配置，该配置可以指定我们的美化样式文件
    2. 修改响应参数，需要将 HTTP Response 的 Content-Type 调整为 application/xml，否则自定义样式可能不会生效

完整的 rss.xml.js 代码参考：

import rss from "@astrojs/rss";
import { getCollection } from "astro:content";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts.ts";

export async function GET(context) {
  const posts = (await getCollection("blog")).sort(
    (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
  );
  const resp = rss({
    title: SITE_TITLE,
    description: SITE_DESCRIPTION,
    site: context.site,
    items: posts.map((post) => ({
      ...post.data,
      link: `/blog/${post.slug}/`,
      content: post.body,
    })),
    // 👇 Please specify the directory for the XSL stylesheet file
    stylesheet: "/rss.xsl",
  });

  return new Response((await resp).body, {
    headers: {
      // 👇 Modify the Content-Type of the HTTP Response
      "Content-Type": "application/xml",
      "x-content-type-options": "nosniff",
    },
  });
}

修改完后访问 RSS 订阅源链接，不出意外的话样式就生效了。也可以访问 https://igaozp.me/rss.xml 参考一下生效后的样式。

附录