如何在 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 不仅是一个传统功能，更是一种尊重用户的表现。它让用户能够以自己喜欢的方式来消费内容，不被算法和平台所限制。

SVG 签名动画制作：从设计到动画实现全流程解析

Wed, 19 Mar 2025 23:07:40 +0800

重要通知

因站点重构，意为简化站点，故将签名动画移除

作为一个曾经被 SVG 劝退 800 次的手残选手，我懂你！每次看到别人博客里那些会自己画出来的炫酷签名，感觉就像在裸考数学考场上看别人提前交卷——弱小、可怜、又柠檬精附体。

直到最近在柃夏 chapu 的博客中，发现一篇文章写的很好，所以动手制作了一个属于自己的动态签名，并将制作过程记录下来。

一、前期准备

1.选择字体

访问 fonts.google.com，挑选喜欢的字体（大部分仅支持英文，中文需自备字体文件），记下字体名称备用。

2.生成 SVG 代码

前往 Google Font to Svg Path 网站，选择上述字体，在 text 中输入文字，勾选 union 选项，取消勾选 Non - Scaling Stroke，复制生成的 SVG 代码。

二、调整 SVG 画布

1.初步调整

将 SVG 代码粘贴到动画网页中，若画布小无法完整显示签名，修改 viewBox 属性。例如将 viewBox="0 0 177.295 72.999"改为 viewBox="-1 1 300 90"。

2.进一步调整（如需要）

若仍不理想，可借助 Adobe Illustrator 等专业工具调整 SVG 的宽高。

三、添加动画和样式

1.添加 CSS 样式和动画

在 CSS 中为 SVG 签名添加样式和动画，代码如下：

.animated-signature path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 8s linear infinite both;
  stroke-width: 2px;
  stroke: black;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }
  15% {
    fill: transparent;
  }
  35%,
  75% {
    stroke-dashoffset: 0;
    fill: black;
  }
  90%,
  to {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}

2.嵌入 html

在 HTML 中嵌入 SVG 代码时，删除多余属性和标签，保留 viewBox 属性，其他属性根据是否影响渲染决定是否删除。

<svg width="300" height="100" viewBox="-1 1 300 90">
    <g stroke-linecap="round" fill-rule="evenodd">...</g>
</svg>

折腾 on SUUS