5 • 增强你的博客

添加 RSS 订阅源

准备好…

  • 安装 Astro 的包,用于为你的网站创建一个 RSS 订阅源
  • 创建一个可以通过 RSS 订阅源阅读的订阅源

Astro 提供了一个可自定义包,用于快速为你的网站添加一个 RSS 订阅源。

这个官方包会生成一个非 HTML 文档,其中包含有关你的所有博客文章的信息,可以被 Feedly、The Old Reader 等 订阅源阅读器(Feed Reader) 读取。每次重新构建你的网站时,该文档都会更新。

个人用户可以通过订阅源阅读器订阅你的订阅源,在你的网站上发布新博客文章时会收到通知,这使它成为一个受欢迎的博客功能。

  1. 退出 Astro 开发服务器,并在终端中运行以下命令以安装 Astro 的 RSS 包。

    终端窗口
    npm install @astrojs/rss
  2. 重新启动开发服务器,以继续预览你的 Astro 项目。

    终端窗口
    npm run dev

创建一个 .xml 订阅源文档

标题部分 创建一个 .xml 订阅源文档
  1. src/pages/ 目录下创建一个名为 rss.xml.js 的新文件。

  2. 将以下代码复制到这个新文档中,并将 site 属性替换为你的网站自己的唯一 Netlify URL。自定义 titledescription 属性,如果需要,可以在 customData 中指定不同的语言:

    src/pages/rss.xml.js
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';
    export async function get() {
    return rss({
    title: 'Astro Learner | Blog',
    description: 'My journey learning Astro',
    site: 'https://my-blog-site.netlify.app',
    items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
    customData: `<language>en-us</language>`,
    });
    }
  3. 这个 rss.xml 文档只有在编译你的网站时才会创建,因此在开发过程中无法在浏览器中查看该页面。退出开发服务器,并运行以下命令,首先在本地编译你的网站,然后查看编译的预览:

    终端窗口
    npm run build
    npm run preview
  4. 访问 localhost:3000/rss.xml,验证你是否可以在页面上看到(未格式化的)文本,每个 .md 文件都有一个 item。每个 item 应包含博客文章的信息,例如 titleurldescription

  5. 当你想以开发模式查看你的网站时,请确保退出预览并重新启动开发服务器。