添加轻量的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

相关文章

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象(BLOB)数据类型,用于存储大量的二进制数据,:本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十

Java使用正则提取字符串中的内容的详细步骤

《Java使用正则提取字符串中的内容的详细步骤》:本文主要介绍Java中使用正则表达式提取字符串内容的方法,通过Pattern和Matcher类实现,涵盖编译正则、查找匹配、分组捕获、数字与邮箱提... 目录1. 基础流程2. 关键方法说明3. 常见场景示例场景1:提取所有数字场景2:提取邮箱地址4. 高级

C#高效实现Word文档内容查找与替换的6种方法

《C#高效实现Word文档内容查找与替换的6种方法》在日常文档处理工作中,尤其是面对大型Word文档时,手动查找、替换文本往往既耗时又容易出错,本文整理了C#查找与替换Word内容的6种方法,大家可以... 目录环境准备方法一:查找文本并替换为新文本方法二:使用正则表达式查找并替换文本方法三:将文本替换为图

Linux从文件中提取特定内容的实用技巧分享

《Linux从文件中提取特定内容的实用技巧分享》在日常数据处理和配置文件管理中,我们经常需要从大型文件中提取特定内容,本文介绍的提取特定行技术正是这些高级操作的基础,以提取含有1的简单需求为例,我们可... 目录引言1、方法一:使用 grep 命令1.1 grep 命令基础1.2 命令详解1.3 高级用法2

破茧 JDBC:MyBatis 在 Spring Boot 中的轻量实践指南

《破茧JDBC:MyBatis在SpringBoot中的轻量实践指南》MyBatis是持久层框架,简化JDBC开发,通过接口+XML/注解实现数据访问,动态代理生成实现类,支持增删改查及参数... 目录一、什么是 MyBATis二、 MyBatis 入门2.1、创建项目2.2、配置数据库连接字符串2.3、入

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,