Задача отобразить RSS на странице через JavaScript.
Для этого можно воспользоваться готовой JavaScript библиотекой для загрузки RSS:
https://github.com/sdepold/jquery-rss
На странице в секцию head нужно добавить следующие ссылки на скрипты:
Для того, чтобы не сохранять скрипты локально они загружаются из CDN.
Далее в секции body нужно разместить тег, где будет отображаться загружаемая лента и скрипт, который будет выполнять загрузку. Например:
Преимущество такого подхода заключается в том, что отображением RSS ленты можно гибко управлять, указывая различные опции:
Для этого можно воспользоваться готовой JavaScript библиотекой для загрузки RSS:
https://github.com/sdepold/jquery-rss
На странице в секцию head нужно добавить следующие ссылки на скрипты:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://raw.githubusercontent.com/sdepold/jquery-rss/gh-pages/src/jquery.rss.js"></script>
Для того, чтобы не сохранять скрипты локально они загружаются из CDN.
Далее в секции body нужно разместить тег, где будет отображаться загружаемая лента и скрипт, который будет выполнять загрузку. Например:
<script>
jQuery(function($) {
$("#rss-feeds").rss("http://feeds.feedburner.com/premiumpixels")
})
</script>
<div id="rss-feeds"></div>RSS лента будет загружена и отображена в нужном разделе.
Преимущество такого подхода заключается в том, что отображением RSS ленты можно гибко управлять, указывая различные опции:
$("#rss-feeds").rss( "http://feeds.feedburner.com/premiumpixels", { // Сколько записей отображать // по умолчанию: 4 // тип: integer limit: 10, // смещение отображения результата //
по умолчанию
: false //
тип
: integer offsetStart: false, // начальаная точка смещения offsetEnd: false, // конечная точка смещения // выполнять запрос через https //
по умолчанию
: false //
тип
: false, true ssl: true, // через какой сервис парсить RSS // сервис реализован здесь: https://github.com/sdepold/feedr //
по умолчанию
: feedrapp.info //
тип
: string host: 'my-own-feedr-instance.com', // внешний шаблон html //
по умолчанию
: "<ul>{entries}</ul>" //
тип
: string layoutTemplate: "<div class='feed-container'>{entries}</div>", // внутренний шаблон для каждой записи //
по умолчанию
: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>' //
тип
: string entryTemplate: '<p>{title}</p>', // additional token definition for in-template-usage //
по умолчанию
: {} //
тип
: object/hash tokens: { foo: 'bar', bar: function(entry, tokens) { return entry.title } }, // форматировать дату с помощью moment.js (необязательно) //
по умолчанию
: 'dddd MMM Do' //
тип
: смотри справку http://momentjs.com/docs/#/displaying/ dateFormat: 'MMMM Do, YYYY', // форматировать дату на свой выбор. (необязательно) // эта функция возвращает форматированную дату. // применяется, если нужно форматировать дату без moment.js. // без использования moment.js и dateFormatFunction дата не будет форматироваться // и будет появляться как в RSS dateFormatFunction: function(date){}, // эффект, используемый для отображения записей ленты //
по умолчанию
: 'show' //
тип
: 'show', 'slide', 'slideFast', 'slideSynced', 'slideFastSynced' effect: 'slideFastSynced', // функция обратного вызова при ошибках //
по умолчанию
: function() { throw new Error("jQuery RSS: url don't link to RSS-Feed") } error: function(){}, // функция обратного вызова при успешной загрузке //
по умолчанию
: function(){} success: function(){}, // функция обратного вызова, которая срабатывает, когда данные были загружены, но до отображения // полезно для отображения индикатора загрузки onData: function(){} }, //
функция обратного вызова, которая
срабатывает, после успешной загрузки и выполнения анимации function callback() {} )
Комментариев нет :
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.