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

2024-08-22 09:18

本文主要是介绍添加轻量的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(){});这种方式,其区别详见 这里。

嵌入到页面中的效果

alt

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

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



😒 留下您对该文章的评价 😄


这篇关于添加轻量的RSS订阅内容阅读展示支持的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1095863

相关文章

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod

SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)

《SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)》本文介绍了如何在SpringBoot项目中使用Jasypt对application.yml文件中的敏感信息(如数... 目录SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)前言一、J

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

定价129元!支持双频 Wi-Fi 5的华为AX1路由器发布

《定价129元!支持双频Wi-Fi5的华为AX1路由器发布》华为上周推出了其最新的入门级Wi-Fi5路由器——华为路由AX1,建议零售价129元,这款路由器配置如何?详细请看下文介... 华为 Wi-Fi 5 路由 AX1 已正式开售,新品支持双频 1200 兆、配有四个千兆网口、提供可视化智能诊断功能,建

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

C#比较两个List集合内容是否相同的几种方法

《C#比较两个List集合内容是否相同的几种方法》本文详细介绍了在C#中比较两个List集合内容是否相同的方法,包括非自定义类和自定义类的元素比较,对于非自定义类,可以使用SequenceEqual、... 目录 一、非自定义类的元素比较1. 使用 SequenceEqual 方法(顺序和内容都相等)2.

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听