JavaScript >> Javascript 文檔 >  >> jQuery

如何製作由 Tumblr 驅動的新聞收錄器

Tumblr 是一種博客服務,具有用於創建和發佈內容的優雅界面。在本教程中,我們將使用它作為新聞發布系統的基礎。我們將開發一個簡單的小部件,它可以循環瀏覽 Tumblr 博客上的最新帖子,並將它們作為新聞項目呈現給您的用戶。添加新聞將通過在您的 Tumblr 儀表板中創建新的博客文章來完成。

HTML

我們正在編寫的代碼將被組織為一個 jQuery 插件,這將使其可移植並易於嵌入到現有網站中。當插件運行時,它將使用 AJAX 從您的博客中請求最新的帖子,並生成以下標記:

生成的代碼

  <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 Showcase
        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>

        <!-- More news items here -->

      </ul>
    </div>

    <div class="tn-footer"></div>
  </div>

無序列表包含新聞項目,但一次只顯示 5 個。帶有 tn 的元素 類由插件的樣式表設置樣式,您可以自定義它們以匹配您網站的設計。

JavaScript/jQuery 代碼

首先,讓我們看看我們從 Tumblr 獲得的響應,以便您更好地了解我們可以使用哪些數據。

每個 Tumblr 博客都帶有一個公共 JSON API。您只需添加 /api/read/json 在您的博客 URL 結束後獲取包含您最近帖子的 JSON 對象。與 Facebook 和 Twitter 採用其 API 的方向相比,這是一股新鮮空氣,即使是最簡單的用例也需要訪問令牌和註冊。

示例響應

{
    "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 .."
    }

    // More posts here

    ]
});

你會得到 ID、日期、標題和正文、標籤、照片等等。在這個例子中我們將只使用標題和日期,但您可以通過添加更多數據來增強它。

這是處理 AJAX 請求、生成標記和循環響應的插件:

assets/js/jquery.tumblrNewsTicker.js

(function($) {

    var defaults = {
        time:   5000,
        title:  'Tumblr News Ticker',
        blog:   'http://tzinenewsdemo.tumblr.com'
    };

    $.fn.tumblrNewsTicker = function(options) {

        // Handle the default settings
        var settings = $.extend({}, defaults, options);

        // Remove trailing slashes and assemble the Tumblr API URL
        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');

        //Get the posts as json
        $.getJSON(url, function(data) {
            $.each(data.posts, function(i,posts){ 

                // Remove any HTML tags
                var title = posts['regular-title'].replace(/<\/?[^>]+>/gi, '');

                // Calculate the human-readable relative time
                var time = $.timeago( new Date( posts['unix-timestamp'] * 1000 ) );

                postList.append('<li class="tn-post">\
                                    <a href="' + posts.url + '" target="_blank">'+title+' </a>\
                                    <span>' + time + '</span>\
                                </li>');
            });

            // Show the first 5 news items

            postList.find('li')
                    .slice(0,5)
                    .show()
                    .last()
                    .addClass('no-border');

            // Rotate posts every settings.time ms
            // (only if they are more than the limit)

            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() {

    // Call the plugin

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

});

所有這些參數都是可選的,但您肯定希望傳遞不同的博客網址。

我不打算在這裡展示 CSS,但是您可以在 assets/css/ 中找到它 文件夾。

完成!

有了這個,我們的新聞代碼就完成了!您可以修改此小部件並將其嵌入您的管理面板或博客側邊欄中。通過更多的編碼,您可以將它與上個月的迷你幫助系統教程結合起來,並通過實時搜索獲得功能齊全且易於更新的幫助系統。


Tutorial JavaScript 教程
  1. IDE 擴展會傷害年輕的開發人員嗎?

  2. 使用 Axios 和 Web API 反應 Typescript 示例項目

  3. 使用 React.Js 克隆 Instagram

  4. 帶有 React 的無頭 WordPress

  5. 在 Node.js 中寫入文件

  6. 驗證數字範圍

  7. 關於我——內文·卡茨

  1. 如何創建自定義多選下拉菜單

  2. Promise Cancellation 及其背後的語義

  3. JavaScript 用戶輸入控制台

  4. 📚 libgen 下載器,一個從 libgen 搜索和下載電子書的命令行工具

  5. Val - 強大的靜態和動態編程語言

  6. 如何過濾元素然後設置條件

  7. VueJs 類型提示導入支持

  1. 5 個令人印象深刻的反應組件

  2. 為什麼 removeEventListener 在我的 Nuxt 應用程序中無法正常工作?

  3. 模塊與類 - 如何在 JS 中管理隱私

  4. Web 性能優化-I