三步给Jekyll添加RSS订阅

本篇为手动添加 RSS 订阅, 更简单添加订阅可以使用 plugin(插件). 见 Jekyll巧用plugin插件

我目前使用的模板最初是由 HTML5 UP 制作的初代模板( 原版 demo ), 后经 Chris Bobbe 和其他的参与者共同制作了 Jekyll 版本. 我也就本篇提到的 RSS 订阅的部分提出 Pull Request. 因此, 严格来说我也是Jekyll版 prologue 模板的贡献者(Contributor)之一. 下面, 我将以此模板为例, 简单讲解一下如何给 Jekyll 添加订阅. 实际情况因人而异, 在此只是讲解大致方法.

如果你还不知道如何使用 Jekyll搭建网页并架设到服务器, 可以看看我前几周发的文章.

在这里就附几张图. 感兴趣的可以点击上方查看原版demo. 该模板对于手机 / 平板 / 电脑端的使用都有优化.

使用 Jekyll 模板的一大优点就是, 只要修改 _config.yml 文件后的参数, 就可以客制化网页的一些信息. 只需要掌握 Markdown 文法, 就可以向网站中注入内容. Markdown 文法简单好学, 很容易入门, 尤其适合博客类网站. 这点在 Jekyll搭建网页并架设到服务器一文内也有所提及, 感兴趣可以去看看.

prologue 模板提供的很多的客制化内容. 在 _config.yml 文件中, 就提供了 twitter, facebook, googleplus, instagram, linkedin, github, stackoverflow, pinterest, slack, dribbble 等社交账号, 还有 google analysis 功能. 但是唯独缺少了 RSS 一栏. 说明这个模板并没有内建 RSS 模块. 如何在 Jekyll 中加入订阅功能就成了接下来的问题. 因为添加 google analysis 模块并不会很复杂, 因此我猜想加入 RSS 应该也不太困难. 在查询了后发现了个比较好的方案, 即使用 jekyll-rss-feeds .

此方案提出了很多年, 并且 Jekyll 也不是一个新兴产物, 因此网上有大量各式各样的教程. 本篇前半部分来源为 Joel Glovier - RSS for Jekyll blogs , 后半部分为延伸内容.

config文件中至少包含以下内容如果没有这些内容请添加, 如果有请看步骤2 这些值会被用来生成你的 feed 信息. 他们会替换 feed.xml 中的 DolorHunter, DolorHunter - Developer & Independent Blogger 和 https://dolorhunter.com 信息.

name:         Your Blog's Name
description:  A description for your blog
url:          http://your-blog-url.example.com

在根目录加入 feed.xml 文件 jekyll-rss-feeds 项目提供了很多的 feeds 选项, 但是我们只做最简单的设置. 此模板会生成一个包含 10 篇最近的发布的博客的表格, 我们在根目录新建一个 feed.xml 文件, 然后把下面的模板粘贴进去.

  代码直接被 Jekyll 解析了?? 王德发??

放个地址好了 snaptortoise/jekyll-rss-feeds

在一个适当的地方放置订阅不要忘记在页面布局中放置订阅的链接. 对于内置支持 RSS feed 阅读器的浏览器, 最好在 <head> 中添加 <link> 元素. e.g. <link href ='http：//joelglovier.com/feed.xml'rel ='alternate'type ='application / atom + xml'>

原文结束, 延伸开始.

通常, 我们会在网页的最下方或是社交栏找到 RSS 的身影, 因此为了保持网站整体风格, 我会建议把订阅放在社交栏的其他图标的边上, 而不建议开一个新的区域专门放置 RSS. 如果网页的结构没有分块, 通常在页面的最底部(版权信息附近); 如果网页有分块, 则处在较小的一块上. 然后以同样的风格加入 RSS 订阅按钮. 然后就大功告成了.

我们进入 /_include 目录, 找到社交栏所在的文件. 文件大概长这样. e.g. social_icons.html

  代码又被解析了.. 七七七七七. 还是放链接👆

我们如果想让 RSS 订阅的图标出现在这里, 就参照类似格式, 在 <ul>中写入以下内容. 保存后关闭.

  <li><a href="" class="icon fa-rss"><span class="label">RSS</span></a></li>

我们可以在本地测试一下. 如果一切顺利就可以看到修改后的效果了.

$ bundle exec jekyll serve

附一张效果图:

参考资料:

三步给Jekyll添加RSS订阅

Join Newsletter

Written by DolorHunter