专栏首页三言两语添加轻量的RSS订阅内容阅读展示支持

添加轻量的RSS订阅内容阅读展示支持

大部分资讯类的网站都提供RSS订阅功能,其一般是是XML格式的网页信息,目的是为了能够方便第三方站点轻松的获取本站的最新内容,在Hexo博客中一般也会包含seed这一插件,即可以直接将你的网站内容生成RSS订阅,这对于一些独立站点,尤其是一些SEO欠佳(搜索引擎排名靠后)但内容却十分高质量的博客来说,就可以利用RSS订阅跟进其内容的更新。

曾经一度认为RSS订阅是一种落后的阅读方式,那时还没有真正体会到其正确应用场景,直到随着接触技术网站、个人博客越来越多,慢慢发现了许许多多的高质量站点,先前感叹完之后能做的也只能是将其收藏到浏览器的书签中,但没过几天就会发现早就忘记了,而且,重要的是,你无法跟踪其站点内容的更新,这部分站点又大多都不具有推送功能,只是高冷的存在在那里等待别人的访问,那么真的就无法跟踪到最新的内容了吗,RSS订阅的出现就完美的解决了这一问题,如果把文章推送内容站的主动推送,那么RSS订阅其实更像一种用户端向内容站发起的主动拉取。

RSS阅读器

现在,我们只需要一个RSS阅读器和各站点的rss订阅路径,就可以随时获取到各个站点的最新内容(通常是文章),回到一开始的问题,想象一个场景,如果你收藏了几十个干货技术博客,并想看看最近他们都更新了哪些新文章,那么如果不适用RSS阅读器,难道要每一个网站都打开看一遍吗,这是难以想象的。

RSS阅读器极大地方便了我们获取各站点的最新资源,但是这是否就是最精简的操作方式?是否就是最终的RSS使用场景?答案是否定的,其实真正的应用场景更多偏向于对各站点资源的‘整合’,比如新闻聚合网站等。对于我们自己而言,当然也可以对我们收藏的一些订阅进行整合,并且内嵌到我们自己的站点中来分享我们的订阅。上述场景完全可以自己实现,但其实已经存在很多类似的开源项目,不过很多是需要服务端解析的,所以有些许局限。这里介绍的FeedEk特点就是基于JQuery的轻量实现,完全可以胜任上述场景。

注意:RSS、ATOM 本质差别不大,都是具有相似的基于XML的格式,基本结构是相同的,只在节点的表达式上有点区别,所以对于 ATOM 处理基本没有差别。

FeedEk的使用

Github地址:点击这里

对于日期格式参数,如果需要使用,则必须添加Moment.js,如果想本地化日期格式(日期名称,月份名称),则必须将Moment.js与langs一起包含。Moment.js地址

注意FeedEK.js的引入,源代码非常简单,所以后期可以十分方便的改写,查看源代码可知,其实现原理其实是利用了 Yahoo 的API,将解析路径封装进字符串,然后调用 Yahoo 的API对其解析并返回json串,然后就是对其解析和拼接,整体上逻辑很简单。

核心代码:

var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + def.FeedUrl + '" LIMIT ' + def.MaxCount;
$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
    dataType: "json",
    success: function (data) {
        $("#" + id).empty();
        if (!(data.query.results.rss instanceof Array)) {
            data.query.results.rss = [data.query.results.rss];
        }
        $.each(data.query.results.rss, function (e, itm) {
            //... ...
        });
        //$("#" + id).append('<ul class="feedEkList">' + s + '</ul>');
        //注意:源码中上述语句少了一个</li>标签
        $("#" + id).append('<ul class="feedEkList">' + s + '</li></ul>');
    }
});

这段代码的引入注意两个地方,第一个是源代码中有个错误,缺少一个标签,第二个是源代码采用的是(function(){})(jQuery);这种形式的加载方式,测试时没有执行,偷懒给改为$(document).ready(function(){});这种方式,其区别详见 这里

嵌入到页面中的效果

这里由于罗列了多个订阅信息,所以必然的需要对解析进行触发而不是直接全部解析(这样加载时间会非常慢),点击展开时就调用一次API,并且解析内容生成html代码更新到指定div即可。

具体效果可移步 此页面 查看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python的一些注意事项

    ZONGLYN
  • Python的控制流

    ZONGLYN
  • Python的函数

    ZONGLYN
  • PageAdmin Cms安装教程:IIS站点的添加及管理

    PageAdmin的运行环境和目前权限配置完毕后,接下来就是给Iis添加站点,这样网站就可以正常运行了,下面小熊seo的小编就给大家讲解一下IIs站点的添加和管...

    用户4831957
  • kube-controller-manager最佳配置

    kubernetes version: 1.6.2 Kube-controller-manager Configuration kube-controller-...

    Walton
  • 为什么算法这么难?

    来自:刘未鹏 | MIND HACKS 链接:http://mindhacks.cn/2011/07/10/the-importance-of-knowing-...

    智能算法
  • SCCM2012之部署安装

    继续上面一篇文章,当准备好了DC与SCCM服务器的环境之后,我们开始进入主题,SCCM 2012的安装。

    李珣
  • KNN(k-NearestNeighbor)识别minist数据集

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    GavinZhou
  • 想进入互联网公司,怎能不知道互联网的技术架构!

    本文探讨了互联网公司的技术架构,涉及 DNS、负载均衡、长连接、API 网关、PUSH 推送、微服务、分布式事务以及相关支撑的基础服务。主要是为了学习,希望可以...

    黄泽杰
  • 不得不吐槽的Android PopupWindow的几个痛点(实现带箭头的上下文菜单遇到的坑)

      说到PopupWindow,我个人感觉是又爱又恨,没有深入使用之前总觉得这个东西应该很简单,很好用,但是真正使用PopupWindow实现一些效果的时候总会...

    用户1155943

扫码关注云+社区

领取腾讯云代金券