一分钟美化 RSS：使用 RSS.Beauty 让你的博客 RSS 源更漂亮

RSS 是博客的核心功能，但默认的 XML 格式在浏览器中看起来不够友好。传统的解决方案需要自己编写 XSLT 样式表，这对很多博主来说是个技术门槛。

今天介绍一个超简单的解决方案——RSS.Beauty，它是一个在线服务，可以自动为你的 RSS 源生成漂亮的样式表，而且完全免费！

效果如下：

在线预览：

https://www.suiyan.cc/feed

什么是 RSS.Beauty？

RSS.Beauty 是一个在线服务，专门用于为 RSS 源生成美观的 XSLT 样式表。它的特点是：

• ✅ 零代码：无需编写任何 XSLT 或 CSS
• ✅ 在线生成：访问网站即可生成样式
• ✅ 即插即用：生成的样式表可以直接使用
• ✅ 完全免费：不需要注册，没有使用限制
• ✅ CDN 托管：样式表托管在 CDN 上，访问速度快

使用方法

步骤 1：访问 RSS.Beauty

打开浏览器，访问 RSS.Beauty 网站。

步骤 2：获取样式表链接

RSS.Beauty 提供了多种样式表链接，你可以选择：

选项 1：使用官方 CDN（推荐）

https://rss.beauty/xsl/pretty-feed-v3.xsl

选项 2：自定义样式 点击 "Customize" 按钮，可以调整颜色、字体等参数，生成自定义的样式表链接。

步骤 3：修改 RSS 源

在你的 RSS 生成代码中，添加 XSLT 引用。以 Next.js 为例：

// src/app/feed/route.ts
const rssContent = `<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://rss.beauty/xsl/pretty-feed-v3.xsl"?>
<rss version="2.0"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>你的博客标题</title>
        <link>https://你的博客网址</link>
        <description>你的博客描述</description>
        <!-- RSS 内容 -->
    </channel>
</rss>`;

关键修改就是这一行：

<?xml-stylesheet type="text/xsl" href="https://rss.beauty/xsl/pretty-feed-v3.xsl"?>

步骤 4：部署验证

保存修改后，重新部署你的博客：

npm run build
npm start

访问你的 RSS 源（例如 https://你的博客网址/feed），现在应该能看到美化的页面了！

本地部署

如果你希望完全掌控样式表，或者担心依赖外部服务，可以将样式表下载到本地使用。这样可以避免跨域问题，并且完全自托管。

步骤 1：下载样式表文件

访问以下链接下载你需要的样式表文件：

• RSS 样式表：https://rss.beauty/xsl/pretty-feed-v3.xsl
• Atom 样式表：https://rss.beauty/xsl/pretty-feed-atom-v3.xsl

直接访问这些链接，浏览器会显示 XSLT 代码，然后右键选择"另存为"保存文件。

步骤 2：放置到静态资源目录

将下载的文件放置到你网站的静态资源目录中。不同框架的静态资源目录位置：

• Next.js：public/rss.xsl 或 public/atom.xsl
• Astro：public/rss.xsl 或 public/atom.xsl
• Hugo：static/rss.xsl 或 static/atom.xsl
• Hexo：source/rss.xsl 或 source/atom.xsl

重要提示：样式表文件必须放在同一个域名下，不能跨域引用。

步骤 3：修改 RSS 源引用

在你的 RSS 生成代码中，将 XSLT 引用改为本地路径。

以 Next.js 为例，如果你的 RSS 源在 src/app/feed/route.ts：

// src/app/feed/route.ts
const rssContent = `<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/rss.xsl"?>
<rss version="2.0"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>你的博客标题</title>
        <link>https://你的博客网址</link>
        <description>你的博客描述</description>
        <!-- RSS 内容 -->
    </channel>
</rss>`;

如果是 Atom 源，则使用：

<?xml-stylesheet type="text/xsl" href="/atom.xsl"?>

步骤 4：验证部署

保存修改后，重新部署你的博客：

npm run build
npm start

然后访问：

• https://你的博客网址/rss.xsl - 确认样式表文件能正常访问
• https://你的博客网址/feed - 确认 RSS 源显示美化的页面

本地部署 vs 在线服务

修改样式表

本地部署的优势是可以自由修改样式表。打开 rss.xsl 文件，找到 <style> 标签，你可以：

<style>
  /* 修改主色调 */
  :root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
  }

  /* 修改字体 */
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  /* 自定义布局 */
  .container {
    max-width: 1000px; /* 改变宽度 */
    padding: 50px;     /* 改变内边距 */
  }

  /* 添加自定义元素 */
  .custom-banner {
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    /* 你的自定义样式 */
  }
</style>

修改完成后保存，无需重新部署，刷新浏览器即可看到效果。

不同框架的本地部署示例

Next.js

目录结构：

your-project/
├── public/
│   └── rss.xsl          ← 样式表文件放在这里
├── src/
│   └── app/
│       └── feed/
│           └── route.ts ← RSS 生成代码

RSS 引用：

<?xml-stylesheet type="text/xsl" href="/rss.xsl"?>

Astro

目录结构：

your-project/
├── public/
│   └── rss.xsl          ← 样式表文件放在这里
├── src/
│   └── pages/
│       └── rss.xml.js   ← RSS 生成代码

RSS 生成代码：

import rss from '@astrojs/rss';

export const GET = async () => rss({
  title: '你的博客',
  description: '博客描述',
  site: 'https://你的博客网址',
  items: getPosts(),
  stylesheet: '/rss.xsl',  // 使用本地样式表
});

Hugo

目录结构：

your-project/
├── static/
│   └── rss.xsl          ← 样式表文件放在这里
├── layouts/
│   └── _default/
│       └── rss.xml      ← RSS 模板

RSS 模板：

<?xml version="1.0" encoding="UTF-8"?>
{{ printf "<?xml-stylesheet type=\"text/xsl\" href=\"%s\"" "/rss.xsl" | safeHTML }}
<rss version="2.0">
  <!-- RSS 内容 -->
</rss>

Hexo

目录结构：

your-project/
├── source/
│   └── rss.xsl          ← 样式表文件放在这里
├── _config.yml          ← 配置文件

配置文件：

# _config.yml
feed:
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - rss2.xml
  limit: 20
  rss:
    xml_stylesheet: '/rss.xsl'  # 使用本地样式表

总结

RSS.Beauty 是一个非常实用的工具，特别适合不想折腾技术的博主：

• ⚡ 极速上手：5 分钟完成配置
• 🎨 美观大方：现代化设计，响应式布局
• 💰 完全免费：不需要任何费用
• 🔧 零维护：无需自己维护样式
• 🌐 稳定可靠：CDN 托管，访问速度快

如果你还没有美化 RSS 源，或者觉得自己写 XSLT 太麻烦，强烈推荐试试 RSS.Beauty！

参考资源

• RSS.Beauty 官网
• RSS.Beauty 自定义页面
• RSS 2.0 规范
• XSLT 官方文档

---

后记：有时候，最好的解决方案不是自己造轮子，而是善用现有的优秀工具。RSS.Beauty 就是这样一款工具，它让 RSS 美化变得简单快捷，让博主可以专注于内容创作，而不是纠结于技术细节。推荐大家使用！