如何在 HUGO 中打造更友好的 RSS 体验？

Thu, 24 Apr 2025 19:23:49 +0800

重要通知

因为站点重构，本站的 RSS 订阅地址已变更，暂时不再添加可视化的RSS订阅页面，请使用原始的 RSS 订阅地址： Atom

缘由

今天浏览博友文章，无意中看见了 @清羽飞扬 最近发表了一篇文章《美化你的RSS订阅地址》，看了他的实现过程，随即在网上搜索了下，还发现了 jakelazaroff，乍一看，以为是一个简洁的静态页面，仔细观察发现原来这个就是我们平时使用 Feed 订阅页面，是不是让人耳目一新？

可以先看看我现在的 Feed，或许说不上很好看，但应该比枯燥的 XML 标签看起来要友好一点吧 (つд⊂)

效果图

什么是 RSS？

RSS（Really Simple Syndication）是一种消息来源格式规范，它可以让用户订阅博客、新闻网站等内容源。通过 RSS，读者可以使用 RSS 阅读器集中阅读多个网站的更新，而不需要分别访问每个网站。

尽管社交媒体和平台算法主导了内容分发，但 RSS 依然具有不可替代的价值：

用户控制权：读者自主选择信息源，内容按时间顺序排列，不受算法干预。
无干扰阅读：RSS Feed 本身通常不包含网站广告和无关的界面元素（虽然原文可能有），阅读体验更纯粹。
高效聚合：一站式阅读所有关注的内容更新。
保护隐私：相比社交平台，RSS 订阅通常不涉及複杂的用户追踪。
开放标准：不被单一平台锁定，具有良好的兼容性和持久性。
内容备份与离线阅读：部分阅读器支持缓存内容，方便离线阅读。

提供 RSS Feed，是对那些偏爱这种阅读方式的读者的尊重，也是内容开放性的一种体现。

Hugo 的 RSS 支持

Hugo 默认就支持 RSS 输出，但要让它更好用，我们需要做一些配置优化。

基础配置

在 hugo.toml（或 config.toml）中添加基本的 RSS 配置：

# RSS 基础设置
[services.rss]
  limit = 20 # 输出最近的 20 篇文章
  fullText = true # 输出全文内容

# 确保输出包含 RSS
[outputs]
  home = ['HTML', 'RSS', 'JSON', 'SITEMAP']

RSS 模板美化

为了让 RSS feed 在浏览器中显示得更美观，我们可以添加一个 XSL 样式表。在 static/rss.xsl 创建样式文件：

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title><xsl:value-of select="/rss/channel/title"/> - RSS Feed</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <style type="text/css">
          body {
            max-width: 650px;
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            padding: 2rem;
            line-height: 1.5;
            color: #333;
            background: #f5f5f5;
          }
          /* 其他样式... */
        </style>
      </head>
      <body>
        <h1>
          <span class="rss-icon">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <circle cx="6" cy="18" r="2"/>
              <path d="M4 4a16 16 0 0 1 16 16"/>
              <path d="M4 11a9 9 0 0 1 9 9"/>
            </svg>
          </span>
          <a href="{/rss/channel/link}">
            <xsl:value-of select="/rss/channel/title"/>
          </a>
        </h1>
        <!-- 其他内容... -->
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

在自定义的 rss.xml 模板中引入 xsl 样式文件。

高级配置（可选）

如果需要更细致的控制，可以添加以下配置：

# RSS 输出格式设置
[outputFormats]
  [outputFormats.RSS]
    mediatype = "application/rss+xml"
    baseName = "feed"

# 为分类和标签页面启用 RSS
[outputs]
  section = ['HTML', 'RSS']
  taxonomy = ['HTML', 'RSS']

# 多语言支持
[languages]
  [languages.zh-cn]
    languageName = "简体中文"
    weight = 1
    [languages.zh-cn.params]
      rss_sections = ["posts"]

RSS 的使用

读者可以通过以下方式订阅你的博客：

使用在线 RSS 阅读器：
使用本地 RSS 阅读器应用

只需将博客的 RSS 链接（通常是 https://你的域名/index.xml）添加到这些阅读器中即可开始订阅。

总结

添加 RSS 功能可以让你的博客内容更容易被读者订阅和追踪。Hugo 的默认 RSS 支持已经很好，通过简单的配置就能满足基本需求。如果需要更好的用户体验，可以添加 XSL 样式表来美化 RSS 页面的显示效果。

记住，RSS 不仅是一个传统功能，更是一种尊重用户的表现。它让用户能够以自己喜欢的方式来消费内容，不被算法和平台所限制。

RSS on SUUS