#折腾

缘由

今天浏览博友文章，无意中看见了 @清羽飞扬 最近发表了一篇文章 《美化你的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 创建样式文件：

作为一个曾经被 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