给你的静态网页开个RSS功能

折腾 › RSS
, ,

什么是RSS？

RSS是Really Simple Syndication的缩写，也就是简易信息聚合的意思。通过这个技术，你可以使用一些软件或者网站去订阅你喜欢的RSS源，从而达到快速获取到更新，专注于文章内容。RSS的文件通常都是 .rss 或者 .xml。

每个人都可以建立属于自己的RSS，这也造就了不同类型的网站都拥有不同的RSS源。例如我喜欢游戏，我可以去订阅机核的RSS源，我热爱科学，我可以去订阅ScienceDaily的RSS，我喜欢医学，我可以去订阅丁香园的RSS…

看到这里你应该明白了，订阅RSS就像订阅报纸一样，当网站推送了一篇新的文章后，内容将会被收录到RSS中，你的RSS订阅器检测到发生了改变后会给你推送(一些订阅器会有)。通过订阅高品质的RSS源可以快速高效的获取信息以及得到上乘的文章质量。

不是每一个建站程序都会有RSS功能，以前我用的WordPress和Typecho都有，换到VuePress之后是肯定不会有的…想来想去还是去做了一下RSS订阅这块的功能，在这里也分享出来。

FEED43

首先先去打开FEED43的网页

FEED43

点击中间的Create your first RSS feed之后开始制作RSS源

因为VuePress并不是一个Blog程序…所以我必须自己建立一个文章的选择列表…

Select

像是HEXO之类的会自动建立文章选择就会容易很多，VuePress则需要手动建立…

进入Create your first RSS feed的页面之后填写一下存在有你文章选项的链接，就像这样

Rssinfo

Encoding那块填写UTF-8，否则中文可能会出现乱码。

Feed43会自动返回该页面的HTML代码，接下来就是自定义编辑规则了

下面的内容是按照我博客的情况来编写的，自己操作的时候可能需要多折腾一下

往下滑动，直到开始出现自己文章标题的地方，就可以开始找规律了

RssHTML

我要求的功能不多，只需要正确输出文章标题和链接就好

通过图片不难发现，包含文章标题和链接的规律很容易被找出来

以下是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="page"> <div class="content">
<h3 id="文章归档">
<a href="https://jimmy0w0.me/content/blog/select.html#%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3" aria-hidden="true" class="header-anchor">#</a> 文章归档</h3> 
<hr> <p>2019年二月份</p> 
<ul>
<li>
<p><a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.06.%E7%A7%91%E6%99%AE.%E6%8A%80%E6%9C%AF%E3%80%91%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%8F%91%E5%B1%95%E5%8E%86%E5%8F%B2%E4%B8%8E%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.html">【Blog.06.科普.技术】计算机的基本发展历史与工作原理</a>
</p>
</li> 
<li>
<p>RSS抓取专用 (仅在只有一篇文章中会出现，方便RSS抓取)
</p>
</li>
</ul>
 <hr> <p>2019年一月份</p> 
 <ul>
 <li>
 <p>
 <a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.05.%E5%94%A0%E5%97%91.%E6%8A%80%E6%9C%AF%E3%80%91%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8GitHub.html">【Blog.05.唠嗑.技术】如何使用GitHub</a></p></li> 
 <li>
 <p>
 <a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.04.%E5%88%86%E4%BA%AB.%E7%99%BD%E5%AB%96.%E6%95%99%E7%A8%8B%E3%80%91%E5%88%A9%E7%94%A8GitHub%E5%92%8CNetLify%E5%BB%BA%E7%AB%8B%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99.html">【Blog.04.分享.白嫖.教程】利用GitHub和NetLify建立一个网站</a>
 </p>
 </li> 
 <li>
 <p>
 <a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.03.%E7%A7%91%E6%99%AE%E3%80%91%E8%BF%99%E7%B3%BB%E7%BB%9F%E7%AB%9F%E8%AF%A5%E6%AD%BB%E7%9A%84%E5%A5%BD%E7%8E%A9.html">【Blog.03.科普】这系统竟该死的好玩</a>
 </p>
 </li> 
 <li>
 <p>
 <a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.02.%E5%88%86%E4%BA%AB%E3%80%91%E5%A2%99%E5%A4%96.html">【Blog.02.分享】墙外
 </a>
 </p>
 </li> 
 <li>
 <p>
 <a href="https://jimmy0w0.me/content/blog/article/%E3%80%90Blog.01.%E5%AE%89%E5%88%A9%E3%80%91%E8%B5%B0%E8%BF%9B%E4%B8%80%E5%9C%BA%E4%BB%8E%E6%9C%AA%E5%8F%91%E7%94%9F%E8%BF%87%E7%9A%84%E9%9F%B3%E4%B9%90%E4%BC%9A.html">【Blog.01.安利】走进一场从未发生过的音乐会</a>
 </p>
 </li>
 </ul> 
 <hr>
 </div>

我们想要的文章标题+链接分别包含在

1
2
3
<li></li>
<a></a>
<p></p>

这三个标签中。

所以我们需要写入以下规则

rule

1
<li><p><a href="%">%</a></p></li>

把那些会变动的信息，例如标题和链接用 % 替换掉，然后点击Extract按钮就可以得到我们想要的东西了

Extract

接下来到第三步，主要设置的是

  • 订阅源标题

  • 链接 (极其重要，之后Feed43的服务器会自动根据你给的规则抓取信息并添加到RSS中)

  • 订阅源说明 (选填)

  • 标题模板

  • 链接模板

  • 简介内容模板

Output format

现在主要来讲一下模板输出 (RSS item properties) 的内容

第二步系统自动输出的数据中，你可以发现 %1 和 %2 这样的字符，在这一设置中就会派上用场。

第二步里，%1 和 %2 分别是 链接 和 标题

所以第一项的标题模板我们只需要填入 %2 即可，标题填入 %1 即可；文章简介没有，所以爱填啥填啥，或者不填。大概是这样的结果

finish

点击Preview就可以预览了

Preview

接下来在下面会有两个连接

  • Feed URL (RSS订阅链接)

  • Edit URL (RSS编辑链接)

把RSS订阅链接加入阅读器的订阅列表中即可。