Lecaw

Учимся создавать Web-сайты

Создаем ленту новостей Tumblr

January 31, 2013 250hits

Tumblr - служба блоггинга с изящным интерфейсом для создания и публикации контента. В этом учебном руководстве мы будем использовать его в качестве основы системы публикации новостей. Мы разработаем простой виджет ленты новостей Tumblr и представим их в виде текстовых сообщений для Ваших пользователей. Добавление новостей будет происходить за счет создания новых сообщений в блоге Tumblr.

ДЕМО Исходные файлы

 

HTML

Код, который мы напишем, будет в виде jQuery плагина, благодаря которому можно будет с лёгкостью встроить виджет в существующий сайт. Когда плагин будет готов, он отобразит последние сообщения из Вашего блога и сгенерирует следующую разметку:

<div class="tn-container">
  <h2  class="tn-header">Tumblr News Ticker</h2>
  <div  class="tn-data">
  <ul>
  <li  class="tn-post"><a href=
  "http://tzinenewsdemo.tumblr.com/post/41782608890"  target="_blank">HTML5 Showcas
  for Web Developers: The Wow and  the How</a> <span>about 20 hours ago</span></li>
      <li  class="tn-post" style="display: list-item;"><a href=
  "http://tzinenewsdemo.tumblr.com/post/41782593600"  target="_blank">The New jQuery
  Plugins Site is Live!</a>  <span>about 20 hours ago</span></li>
      <li  class="tn-post" style="display: list-item;"><a href=
  "http://tzinenewsdemo.tumblr.com/post/41782522976" target="_blank">Parsley.js  - A
  Small JavaScript Forms  Validation Library</a> <span>about 20 hours
  ago</span></li>
    </ul>
  </div>
  <div  class="tn-footer"></div>
  </div>

Все сообщения будут размещены в виде неупорядоченного списка, мы будем показывать 5 сообщений за раз. Элементы с классами tn разработаны при помощи таблицы стилей плагина, Вы можете настроить их так, чтобы они соответствовали дизайну Вашего сайта (Убедитесь что работаете на веб-сервере или на localhost)

JavaScript/jQuery

Каждый блог Tumblr предоставляет общедоступный JSON API. Просто добавьте /api/read/json вконец URL вашего блога, чтобы получить JSON объект с Вашими последними сообщениями.

{
    "tumblelog": {
        "title": "A web development news site",
        "description": "",
        "name": "tzinenewsdemo",
        "timezone": "US\/Eastern",
        "cname": false,
        "feeds": []
    },
    "posts-start": 0,
    "posts-total": 11,
    "posts-type": "regular",
    "posts": [{
        "id": "41782723088",
        "url": "http:\/\/tzinenewsdemo.tumblr.com\/post\/41782723088",
        "url-with-slug": "http:\/\/tzinenewsdemo.tumblr.com\/ ..",
        "type": "regular",
        "date-gmt": "2013-01-29 13:49:36 GMT",
        "date": "Tue, 29 Jan 2013 08:49:36",
        "bookmarklet": 0,
        "mobile": 0,
        "feed-item": "",
        "from-feed-id": 0,
        "unix-timestamp": 1359467376,
        "format": "html",
        "reblog-key": "zEQ0b5OB",
        "slug": "image-picker-jquery-plugin-that-turns-a-select",
        "regular-title": "Image Picker - jQuery plugin that turns a ..",
        "regular-body": "<p><a href=\"http:\/\/rvera.github.com\/image-picke  .."
    }
    ]
});

Здесь мы получили идентификаторы, даты, заголовок, теги, фотографии и другое. В этом примере мы будем использовать только заголовок и дату, но Вы можете улучшить его, добавив дополнительные данные.

Плагин обработает запросы AJAX, генерирует разметку и цикл посредством ответов:

assets/js/jquery.tumblrNewsTicker.js

(function($) {
    var defaults = {
        time:   5000,
        title:  'Tumblr News Ticker',
        blog:   'http://tzinenewsdemo.tumblr.com'
    };
    $.fn.tumblrNewsTicker = function(options) {
        var settings = $.extend({}, defaults, options);
        var url = settings.blog.replace(/\/$/,'') +
                  "/api/read/json?num=20&type=text&callback=?";
        this.append('<div class="tn-container">\
                        <h2 class="tn-header">'+ settings.title +'</h2>\
                        <div class="tn-data"><ul></ul></div>\
                        <div class="tn-footer"></div>\
                    </div>');
        var postList = this.find('.tn-data ul');
        $.getJSON(url, function(data) {
            $.each(data.posts, function(i,posts){ 
                var title = posts['regular-title'].replace(/<\/?[^>]+>/gi, '');
                var time = $.timeago( new Date( posts['unix-timestamp'] * 1000 ) );
                postList.append('<li class="tn-post">\
                                    <a href="#" target="_blank">'+title+' </a>\
                                    <span>' + time + '</span>\
                                </li>');
            });
            postList.find('li')
                    .slice(0,5)
                    .show()
                    .last()
                    .addClass('no-border');
            if(data.posts.length > 5) {
                setInterval(function() {
                    var posts =  postList.find('li');
                    posts.first().slideUp('slow', function() {
                        $(this).appendTo(postList);
                    })
                    posts.eq(4).removeClass('no-border');
                    posts.eq(5).slideDown('slow').addClass('no-border');
                }, settings.time);
            }
        });
        return this;
    };
})(jQuery);

Сначала происходит генерация API URL. Обратите внимание, что я выбираю только текстовые сообщения. Если Вы публикуете фотографии, видео или другие типы контента, они не будут отображаться. Однако, Вы в состоянии изменить эту настройку, удалив параметр type=text, чтобы выбрать все типы контента.

Чтобы вычислить строку времени, я использую плагин timeago. Он возвращает форму переданного времени в обычном формате. Чтобы создать объект даты, я умножаю возвращенную метку времени Unix на 1000, чтобы получить число миллисекунд (как требуется для объекта даты).

Вызов плагина:

assets/js/script.js

$(function() {
	$('#main').tumblrNewsTicker({
		time: 5000,
		title:  'Tumblr News Ticker',
		blog: 'http://tzinenewsdemo.tumblr.com/'
	});	
});

Я не буду расписывать здесь весь CSS код, Вы сможете найти его в папке assets/css/.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий