给博客增加RSS订阅功能(上) ::花与剑::

背景

一般Blog盛行时代,Blog程序都提供了生成RSS订阅的功能,搭配RSS阅读器(比如QQ邮箱),只需添加一个RSS源(url)就可以让你的来访者跟踪阅读最新发布的文章。现在来谈RSS有点昨日黄花的感脚了,现在各种资讯类APP胜行,对应的关注和推送功能早已经把RSS这种古老的信息订阅方式推向了边缘化。不过由于RSS的支持度较广,还是有不少优质的网站保留了这种订阅方式。甚至有人在GitHub上发起了RSSHub的项目,是一款轻量、易于扩展的 RSS 生成器,可以给任何奇奇怪怪的内容生成RSS订阅源。

缘起

希望在自己的博客上也生成一个RSS订阅源,因为博客现在是基于koa搭建的,没有了之前wordpress的RSS订阅功能,为了让它看起来更像一个博客,决定加上这么个RSS订阅功能。

用到的关键技术点

首先想到的就是去查阅相关npm包,最终选择了feed和rss-parser这两个包来实现。其中feed是用于生成自己站点的RSS源,rss-parser则是用于解析第三方站点的RSS源。在本篇文章里主要讲利用feed生成RSS源。

RSS格式

RSS源是一种基于XML的消息来源规范,包含了富有语义的微格式,所以能够被客户端解析程序用做数据源。如下面展示的title,description等...

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
  <title>奇舞周刊</title>
  <description>领略前端技术，阅读奇舞周刊。奇舞周刊是由360前端团队奇舞团发布的一个专注Web前端技术的周刊，汇聚一周内的精华文章，每周五发布。</description>
  <link>https://75team.com/weekly/</link>
  <pubDate>Tue, 16 Jul 2019 13:57:30 +0800</pubDate>
  <ttl>1440</ttl>
  <item>
    <title>奇舞周刊第311期（2019-06-28）</title>
    <link>https://www.75team.com/weekly/issue311.html</link>
    <guid>https://www.75team.com/weekly/issue311.html</guid>
    <pubDate>Fri, 28 Jun 2019 00:00:00 +0800</pubDate>
    <description></description>
  </item>
</channel>
</rss>

关键代码

其实我们的问题是要利用feed包帮助生成这样的xml格式,贴个feed使用文档:

import { Feed } from "feed";
 
const feed = new Feed({
  title: "Feed Title",
  description: "This is my personal feed!",
  id: "http://example.com/",
  link: "http://example.com/",
  language: "en", // optional, used only in RSS 2.0, possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
  image: "http://example.com/image.png",
  favicon: "http://example.com/favicon.ico",
  copyright: "All rights reserved 2013, John Doe",
  updated: new Date(2013, 6, 14), // optional, default = today
  generator: "awesome", // optional, default = 'Feed for Node.js'
  feedLinks: {
    json: "https://example.com/json",
    atom: "https://example.com/atom"
  },
  author: {
    name: "John Doe",
    email: "johndoe@example.com",
    link: "https://example.com/johndoe"
  }
});
 
posts.forEach(post => {
  feed.addItem({
    title: post.title,
    id: post.url,
    link: post.url,
    description: post.description,
    content: post.content,
    author: [
      {
        name: "Jane Doe",
        email: "janedoe@example.com",
        link: "https://example.com/janedoe"
      },
      {
        name: "Joe Smith",
        email: "joesmith@example.com",
        link: "https://example.com/joesmith"
      }
    ],
    contributor: [
      {
        name: "Shawn Kemp",
        email: "shawnkemp@example.com",
        link: "https://example.com/shawnkemp"
      },
      {
        name: "Reggie Miller",
        email: "reggiemiller@example.com",
        link: "https://example.com/reggiemiller"
      }
    ],
    date: post.date,
    image: post.image
  });
});
 
feed.addCategory("Technologie");
 
feed.addContributor({
  name: "Johan Cruyff",
  email: "johancruyff@example.com",
  link: "https://example.com/johancruyff"
});
 
console.log(feed.rss2());
// Output: RSS 2.0
 
console.log(feed.atom1());
// Output: Atom 1.0
 
console.log(feed.json1());
// Output: JSON Feed 1.0

代码中的posts可以是站点最近发布的文章集合,编写一个对应的controller下的action就实现了我们需要的RSS订阅源功能。

看下生成的RSS源链接

还有RSS阅读器里的效果

RSS阅读器

写在最后

至此我们就完成了生成站点RSS源的需求,在下篇中我会用rss-parser反过来去解析第三方的RSS源。在信息碎片化的当下,个人认为优质的资源聚合还是有其意义的。与其说是RSS消亡了,不如说是RSS发展成了其它形态，就像雨滴落入溪流变为了江河的一部分,江河奔入大海变成了海洋的一部分。微信公众号，今日头条,稀土掘金等等平台,把信息订阅的门槛降到了更低,不需要额外的阅读器。