Tạo danh sách bài viết mới (Recent Post) trên Tumblr

Thảo luận trong 'Share Code' bắt đầu bởi administrator, 23 Tháng mười hai 2013.

  1. administrator

    administrator Administrator

    Tham gia ngày:
    2 Tháng mười một 2008
    Bài viết:
    8,010
    Đã được thích:
    1,983
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Web:
    Trong vài ngày gầy đây vì công việc nên mình phải làm được tính năng này, ở TUMBLR không như Blogspot việc thêm Wiget hiển thị trên slibar và các tính năng cũng phức tạp hơn. Danh sách bài viết mới sẽ giúp người dùng thuận tiện hơn trong việc theo dõi nội dung từ WEBSITE của bạn. Như chúng ta đã biết thì ở bất kỳ POST nào cũng có thể thấy danh sách, và người dùng sẽ sử dụng chúng để di chuyển qua lại giữa các trang được tốt hơn.

    TUMBLR mặc định không hỗ trợ tính năng Recent Post này, mình đã test qua rất nhiều cách nhưng trong đó việc lấy qua JSON dùng chính API do tumblr cấp là thuận tiện, dễ làm và nhanh hơn cả.

    DEMO: http://caotu16.tumblr.com/

    [​IMG]

    Tạo danh sách bài viết mới trên Tumblr
    Bước 1: Đầu tiên bạn vào phần Customize trên địa chỉ của BLOG (Sau khi đăng nhập ở góc bên phải)–> Chọn Edit HTML

    [​IMG]Bước 2: Bạn thêm đoạn mã khai báo JQUERY lên đầu, hoặc chắn chắn thư viện Jquery cũ (nếu có) hoạt động. Bên trong thẻ TAG <HEAD>

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
    Bước 3: Tới vị trí bạn cần hiển thị danh sách bài viết mới, bạn PASTE đoạn mã HTML và SCRIPT này vào vị trí. (Nằm trong thẻ TAG BODY>
    HTML:
    <!-- need jquery for this, this line should really go in your theme html
    just after the <head> marker, might work OK here if you aren't already using jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!-- Mimic the style of the tumblr headers from your theme -->
    <div class="heading">Recent Posts</div>
    <!-- The javascript below will insert your recent posts lists in here -->
    <div id="recentPosts"></div>
    <!-- // when this script is run, it sets a variable named tumblr_api_read to the result -->
    <script type="text/javascript" src="http://caotu16.tumblr.com/api/read/json"></script>
    <!-- // this is the script that builds the html to go in the div above -->
    <script type='text/javascript'>
    // number of posts to fetch
    const recent_posts_count = 10;
    // maximum length of titles for truncation (plus 3 for ...)
    const truncate_length = 70;
    // start a div for the recent posts, you can add any ul,etc, formatting here also
    var recentPostsHtml = "<div>";
    // loop around and proess recent_post_count number of recent posts
    for (var i = 0; i < recent_posts_count; i++) {
    // get a post
    var post = tumblr_api_read.posts[i];
    // we need to extract different fields for different kinds of post
    var extract_field = "";
    // we may wish to truncate some (or all, or none) of them
    var truncate = false;
    // we may wish to add a prefix to indictae (for example) the kind of post
    var prefix = "";
    // In order for this to work really properly, we need to cater for all
    // the different post types that are available ...
    // regular 'text' post
    if( post.type == "regular")
    {
    prefix = "";
    truncate = false;
    extract_field = "regular-title";
    }
    // link post
    if( post.type == "link")
    {
    prefix = "[Link] ";
    truncate = true;
    extract_field = "link-text";
    }
    // quote post
    if( post.type == "quote")
    {
    prefix = "[Quote] ";
    truncate = true;
    extract_field = "quote-text";
    }
    // photo post
    if( post.type == "photo")
    {
    prefix ="[Photo] ";
    truncate = true;
    // note we use 'slug' as the field here, because tumblr provides us with
    // a nice truncated short clean summary. whereas the captions have html in them
    // html like div an p, which will muck up the formatting
    extract_field = "slug";
    }
    // Video post
    if( post.type == "video")
    {
    prefix = "[Video] ";
    truncate = true;
    // slug again, see note above
    extract_field = "slug";
    }
    // Audio post
    if( post.type == "audio")
    {
    prefix = "[Audio] ";
    truncate = true;
    // slug again, see note above
    extract_field = "slug";
    }
    // Conversation post
    if( post.type == "conversation")
    {
    prefix = "[Chat] ";
    truncate = true;
    extract_field = "conversation-title";
    }
    // Ask/Answer post
    if( post.type == "answer")
    {
    prefix = "[Answer] ";
    truncate = true;
    // might need to be 'slug' as well
    extract_field = "answer";
    }
    // get the post's url
    var url = post.url;
    // get the field we're going to use as the title
    var title_field = $.trim( post[extract_field] );
    // truncate and add elipses if desired
    if( title_field.length > truncate_length )
    {
    title_field = title_field.substring( 0, truncate_length ) + "...";
    }
    // add the prefix is there is one
    var title = prefix + title_field;
    // add it into the html string
    recentPostsHtml += '<p><a href="' + url + '">' + title + '</a></p>';
    }
    recentPostsHtml += '</div>';
    $("#recentPosts").append(recentPostsHtml);
    </script>
    Bước 4: Bạn phải thay caotu16.tumblr.com bằng địa chỉ Tumblr của bạn cho chính xác, có thể thư truy cập vào http://caotu16.tumblr.com/api/read/json xem có được hay không trước khi nhấn Preview và SAVE.Mặc định ở bên trên là sẽ lấy 10 bài viết “const recent_posts_count = 10;” nếu muốn lấy ít hơn hoặc nhiều hơn bạn có thể sửa lại nếu muốn.
    Nguồn: https://gist.github.com/blindcyclistsunion/1011001
     
    bsbdonganh thích bài này.

Chia sẻ trang này