美化你的博客RSS订阅地址

美化你的博客RSS订阅地址

介绍

1. 什么是RSS

RSS(全称为 Really Simple Syndication 或 Rich Site Summary)是一种基于 XML 的内容分发格式,主要用于网站内容的自动订阅与聚合。它的设计目标是:让用户无需逐个访问网站,即可通过 RSS 阅读器自动获取网站的最新更新。

RSS 最初被广泛应用于博客、新闻网站、论坛等内容频繁更新的平台,目前依然是信息分发与聚合的重要工具。

2. RSS 的基本结构

一个标准的 RSS 文档是一个 XML 文件,包含如下几个核心元素:

xml
<rss version="2.0">
  <channel>
    <title>站点名称</title>
    <link>https://example.com</link>
    <description>站点简介</description>
    <item>
      <title>文章标题</title>
      <link>https://example.com/post/1</link>
      <description>文章摘要</description>
      <pubDate>Fri, 12 Apr 2025 14:00:00 +0800</pubDate>
    </item>
    <!-- 可有多个 item -->
  </channel>
</rss>
  • 是文档的根节点,version="2.0" 表示使用 RSS 2.0 标准;
  • 包含了整个订阅源的信息;
  • 表示一篇文章或一条内容更新记录;
  • 每个 可包含标题、链接、发布时间、摘要等字段

3. 优势

RSS提供了一种完全不需要平台中介的内容获取方式,使用户可以主动订阅感兴趣的源,集中管理、阅读多个站点的更新内容。与社交媒体推荐流不同,RSS完全由用户控制,无广告干扰、无算法推荐。同时,RSS格式标准统一,适合程序处理和自动化集成,常用于信息聚合、数据采集和内容推送等场景。

4. RSS阅读器

目前也有很多优秀的RSS阅读器,这里我推荐一下我的Friend-Circle-Lite,完全依赖免费服务运行,使用github action定时运行,理论上可以配合结果json插入所有的站点,地址如下,欢迎品尝!

Github项目地址

5. RSS美化原理

首先展示一下最终的美化效果:

RSS美化

大家可以打开这个网址可以看一下我们美化过的效果

RSS美化站点网页预览地址

RSS是一种基于XML的内容分发格式,默认在浏览器中呈现为结构化但缺乏样式的纯文本。为了提升其可读性与视觉效果,可以通过引入 XSLT(Extensible Stylesheet Language Transformations) 技术,对XML结构进行转换,使其在浏览器中以HTML的形式展示。

RSS 美化的核心原理是:使用 XSL 样式表对RSSXML数据进行转换,并生成结构化的HTML页面。浏览器在解析XML时,会根据声明的 XSL 文件渲染页面内容。

RSS文件头部添加如下声明,即可引用本地的 XSL 文件:

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

6. XSL文件

XSL 是一种专门用于转换 XML 文档结构的样式语言。借助 XSL,可以将原始的RSS数据(如 <item> 列表)转换为HTML结构,搭配CSS实现样式美化,从而达到“美化RSS”的目的,同时因为在真正的源码中,XSL的引入只是一行小小的类似于注释的声明,所以完全不会影响到RSS的整体接口,也不会影响RSS的抓取。

源代码展示
源代码展示

下面是一个简单的XSL文件示例,可以将RSSXML结构转为一个简洁的html界面

7. 限制

出于安全限制,大多数现代浏览器默认禁止加载跨域的 XSL 样式表。也就是说,如果你在 RSS 文件中通过远程地址引用 XSL:

xml
<?xml-stylesheet type="text/xsl" href="https://example.com/rss-style.xsl"?>

实测Chrome是无法加载的,其他浏览器暂时没有测试,但是建议使用相对路径。

8. 实现美化

上面是原理部分,所有xml的美化都是基于这个原理,而我个人使用的是Hexo,为了更加简单的进行美化,我实现了一个Hexo插件,插件地址如下:

Github项目地址

该插件完全基于原插件 hexo-generator-feed,仅仅添加了在Atom顶部插入XSL文件的功能,为了方便个人进行美化,同时,所有的XSL需要放在本地,所以甚至没有添加内置的美化文件,下面简单讲解一下使用方式。

9. 安装插件

由于两个插件共用一个配置,可能会造成冲突,所以请卸载掉原插件并安装新插件:

bash
npm uninstall hexo-generator-feed --save
npm install hexo-pretty-feed --save

该插件和原始插件配置完全兼容,如果你不愿意添加美化,可以删掉参数pretty_atom_filepretty_rss2_file,功能和原版保持完全一致。

10. 添加文件

下面就添加美化文件,在source文件夹下任意位置创建文件atom.xsl或者rss2.xsl,具体选哪个需要看你个人的rss需求,当然也可以两个都加上

其中,atom.xsl文件写入以下内容:复制的时候注意上面的空格

rss2.xsl文件写入以下内容:

两个文件内容里的文本部分请按照个人要求自行修改,应该不算太难,可以部署后对照实际效果进行文本部分的修改。

11. 订阅文件乱码问题

Hexo-generator-feed插件生成的订阅文件在本地直接预览会出现乱码的问题,本插件也有该情况,虽然不影响上线后的效果,但是在执行Hexo server预览的过程中可能会导致无法显示美化后的预览效果,暂时无法解决,可以尝试先部署上线一次,然后再对照修改对应文本部分,或者采用VSCode插件Live Server,直接预览hexo generate生成的静态文件,实测可以规避乱码问题,方便预览效果进行修改。

12. 修改配置

然后,添加或修改_config.yml文件中的feed部分配置,如果之前没有使用可以参考我的配置:

bash
# 更加美观的RSS订阅源
# see:https://github.com/willow-god/hexo-pretty-feed
feed:
  enable: true
  content: false
  content_limit: 40
  type: atom
  path: atom.xml
  limit: 25
  pretty_atom_file: /config/feed/atom.xsl
  pretty_rss2_file: /config/feed/rss2.xsl

具体相对地址需要看你的文件放置的位置,这里只是举个栗子!

一切妥当就可以尝试部署了,应该就可以达到心仪的效果啦!xsl文件也可以上网搜寻其他的文件内容,这里只是以一个现有的模板进行演示。

本文原创LiuShen

参考教程

RSS.Beautyhexo-generator-feed让你的 RSS/Atom feed 更好看

结尾来个图片

哲风壁纸

图片来自哲风壁纸

一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、远程控制
LibreTV 是一个轻量级、免费的在线视频搜索与观看平台

评论区

评论加载中...