精选文章 使用jFeed(jQuery)导入RSS feed

使用jFeed(jQuery)导入RSS feed

作者:cukeoumuqian0413 时间: 2020-08-05 11:41:42
cukeoumuqian0413 2020-08-05 11:41:42
使用jFeed(jQuery)导入RSS feed1
使用jFeed(jQuery)导入RSS feed2

RSS feed – using jFeed (jQuery) to aggregate RSS This simple tutorial will show you how to Import rss feeds of any site into your own custom area/block of website. It can be used as news imported from yahoo, bbc etc. As we know, RSS feeds are usually used to trasnfer some news for people. Today I’ll tell you about RSS feeds and show you how to make an own RSS aggregator. In the result, you will be able to display various RSS feeds on your website with nite and modern design.

RSS feed –使用jFeed(jQuery)聚合RSS此简单教程将向您展示如何将任何站点的rss feed导入到您自己的自定义区域/网站块中。 它可以用作从yahoo,bbc等导入的新闻。众所周知,RSS提要通常用于为人们传递一些新闻。 今天,我将向您介绍RSS源,并向您展示如何制作自己的RSS聚合器。 结果,您将能够在网站上以精巧和现代的设计显示各种RSS源。

Here is the sample:

这是示例:

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Well, download the source files and let’s start coding !

好了,下载源文件,让我们开始编码!

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML.

和往常一样,我们从HTML开始。

This is our main page code (with 2 RSS blocks). Pay heed at RSSAggrCont elements. Param ‘rssnum’ means – how many rss elements will be displayed at the page. ‘rss_url’ – is RSS url. I hope that you will be able to change these params easily.

这是我们的主页代码(带有2个RSS块)。 注意RSSAggrCont元素。 参数'rssnum'表示–页面上将显示多少个rss元素。 'rss_url'–是RSS网址。 我希望您能够轻松更改这些参数。

template / rss_page.html (templates/rss_page.html)






使用jFeed(jQuery)导入RSS feed3
使用jFeed(jQuery)导入RSS feed4





使用jFeed(jQuery)导入RSS feed5
使用jFeed(jQuery)导入RSS feed6

步骤2. CSS (Step 2. CSS)

Here are CSS styles.

这是CSS样式。

template / css / styles.css (templates/css/styles.css)


.RSSAggrCont {
    border:1px solid #AAA;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    width:500px;
    padding:10px;
    background:#f3f3f3;
    margin:15px;
    float:left;
}
/* RSS Feeds */
.rss_item_wrapper {
    padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
    padding-bottom: 0px;
}
.rss_item_header {
    font-size:12px;
    font-weight:bold;
    padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
    font-size:12px;
    font-weight:bold;
    color:#33c;
}
.rss_item_info {
    color:#999;
    font-size:9px;
}
.rss_item_desc {
    text-align:justify;
    font-size: 11px;
}
.rss_read_more {
    background-color:#EDEDED;
    font-size:11px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    vertical-align: middle;
    margin-top:2px;
    padding:0 9px;
    text-align:left;
    text-decoration:none;
    text-transform:capitalize;
}
.loading_rss {
    text-align:center;
    width:89px;
    height:64px;
    background-image:url(../images/loading_bg.png);
    z-index: 10;
    margin: 10px auto;
}
.loading_rss img {
    margin-top: 16px;
}
.loading_rss div {
    width:89px;
    height:64px;
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

.RSSAggrCont {
    border:1px solid #AAA;
    -moz-box-shadow:0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    width:500px;
    padding:10px;
    background:#f3f3f3;
    margin:15px;
    float:left;
}
/* RSS Feeds */
.rss_item_wrapper {
    padding-bottom: 8px;
}
.rss_item_wrapper:last-child {
    padding-bottom: 0px;
}
.rss_item_header {
    font-size:12px;
    font-weight:bold;
    padding-bottom:0px;
}
.rss_item_header a,
.rss_item_header a:link,
.rss_item_header a:visited,
.rss_item_header a:hover,
.rss_item_header a:active {
    font-size:12px;
    font-weight:bold;
    color:#33c;
}
.rss_item_info {
    color:#999;
    font-size:9px;
}
.rss_item_desc {
    text-align:justify;
    font-size: 11px;
}
.rss_read_more {
    background-color:#EDEDED;
    font-size:11px;
    font-weight:normal;
    height:30px;
    line-height:30px;
    vertical-align: middle;
    margin-top:2px;
    padding:0 9px;
    text-align:left;
    text-decoration:none;
    text-transform:capitalize;
}
.loading_rss {
    text-align:center;
    width:89px;
    height:64px;
    background-image:url(../images/loading_bg.png);
    z-index: 10;
    margin: 10px auto;
}
.loading_rss img {
    margin-top: 16px;
}
.loading_rss div {
    width:89px;
    height:64px;
    background-image:url(../images/loading.gif);
    background-position:center center;
    background-repeat:no-repeat;
}

步骤3. JS (Step 3. JS)

Here are few necessary JS files for our project:

以下是我们项目的一些必要JS文件:

js / jquery.aRSSFeed.js (js/jquery.aRSSFeed.js)


// jQuery plugin - Dolphin RSS Aggregator
(function($){
    $.fn.aRSSFeed = function() {
        return this.each( function(){
            var $Cont = $(this);
            var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
            var sFeedURL = $Cont.attr('rss_url');
            if (sFeedURL == undefined)
                return false;
            $.getFeed ({
                url: 'get_rss_feed.php?url=' + escape(sFeedURL),
                success: function(feed) {
                    if (feed != undefined && feed.items) {
                        var sCode =
                            '
'; var iCount = 0; for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) { var item = feed.items[iItemId]; var sDate; var a; var oDate if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/))) oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0); else oDate = new Date(item.updated); sDate = oDate.toLocaleString(); sCode += '
' + '' + '
' + '使用jFeed(jQuery)导入RSS feed7 ' + sDate + '' + '
' + '
' + item.description + '
' + '
'; iCount ++; if (iCount == iMaxNum) break; } sCode += '
' + '
' + '使用jFeed(jQuery)导入RSS feed8' + '' + feed.title + '' + '
' + '
'; $Cont.html(sCode); } } } ); } ); }; })(jQuery);

// jQuery plugin - Dolphin RSS Aggregator
(function($){
    $.fn.aRSSFeed = function() {
        return this.each( function(){
            var $Cont = $(this);
            var iMaxNum = parseInt($Cont.attr( 'rssnum' ) || 0);
            var sFeedURL = $Cont.attr('rss_url');
            if (sFeedURL == undefined)
                return false;
            $.getFeed ({
                url: 'get_rss_feed.php?url=' + escape(sFeedURL),
                success: function(feed) {
                    if (feed != undefined && feed.items) {
                        var sCode =
                            '
'; var iCount = 0; for (var iItemId = 0; iItemId < feed.items.length; iItemId ++) { var item = feed.items[iItemId]; var sDate; var a; var oDate if (null != (a = item.updated.match(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)Z/))) oDate = new Date(a[1], a[2]-1, a[3], a[4], a[5], a[6], 0); else oDate = new Date(item.updated); sDate = oDate.toLocaleString(); sCode += '
' + '' + '
' + '使用jFeed(jQuery)导入RSS feed9 ' + sDate + '' + '
' + '
' + item.description + '
' + '
'; iCount ++; if (iCount == iMaxNum) break; } sCode += '
' + '
' + '使用jFeed(jQuery)导入RSS feed10' + '' + feed.title + '' + '
' + '
'; $Cont.html(sCode); } } } ); } ); }; })(jQuery);

js / jquery-1.4.2.min.js和js / jquery.jfeed.js (js/jquery-1.4.2.min.js and js/jquery.jfeed.js)

This are common files – jQuery library with jFeed library. It is to no purpose to publish full codes of these files here (they are pretty huge). Both are available in our download package

这是常见文件–带有jFeed库的jQuery库。 在这里发布这些文件的完整代码是没有目的的(它们非常大)。 两者都可以在我们的下载包中找到

步骤4. PHP (Step 4. PHP)

Finally – PHP sources, I think that everything should be easy to understand:

最后– PHP资料,我认为一切都应该易于理解:

index.php (index.php)






get_rss_feed.php (get_rss_feed.php)






步骤5.图片 (Step 5. Images)

Several images are required for our project:

我们的项目需要几个图像:

使用jFeed(jQuery)导入RSS feed11
使用jFeed(jQuery)导入RSS feed12
使用jFeed(jQuery)导入RSS feed13
使用jFeed(jQuery)导入RSS feed14
使用jFeed(jQuery)导入RSS feed15
使用jFeed(jQuery)导入RSS feed16
使用jFeed(jQuery)导入RSS feed17
使用jFeed(jQuery)导入RSS feed18
现场演示

结论 (Conclusion)

Today I’ve described you how to create own RSS aggregator using jQuery library – jFeed. You are welcome to use it in your projects. Good luck!

今天,我已经向您介绍了如何使用jQuery库jFeed创建自己的RSS聚合器。 欢迎您在项目中使用它。 祝好运!

翻译自: https://www.script-tutorials.com/import-rss-feeds-using-jfeed-jquery/

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:SpringBoot之定时任务三种实现方法详解

下一篇:Set和multiset容器中常用函数的使用

您可能感兴趣

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。