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/
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
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>
<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’>// số bài viết sẽ lấyconst recent_posts_count = 10;// độ dài tiêu đề của mỗi bài viết (plus 3 for …)const truncate_length = 70;// start a div for the recent posts, you can add any ul,etc, formatting here alsovar recentPostsHtml = “<div>”;// loop around and proess recent_post_count number of recent postsfor (var i = 0; i < recent_posts_count; i++) {// get a postvar post = tumblr_api_read.posts[i];// we need to extract different fields for different kinds of postvar extract_field = “”;// we may wish to truncate some (or all, or none) of themvar truncate = false;// we may wish to add a prefix to indictae (for example) the kind of postvar prefix = “”;// In order for this to work really properly, we need to cater for all// the different post types that are available …// regular ‘text’ postif( post.type == “regular”){prefix = “”;truncate = false;extract_field = “regular-title”;}// link postif( post.type == “link”){prefix = “[Link] “;truncate = true;extract_field = “link-text”;}// quote postif( post.type == “quote”){prefix = “[Quote] “;truncate = true;extract_field = “quote-text”;}// photo postif( 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 formattingextract_field = “slug”;}// Video postif( post.type == “video”){prefix = “[Video] “;truncate = true;// slug again, see note aboveextract_field = “slug”;}// Audio postif( post.type == “audio”){prefix = “[Audio] “;truncate = true;// slug again, see note aboveextract_field = “slug”;}// Conversation postif( post.type == “conversation”){prefix = “[Chat] “;truncate = true;extract_field = “conversation-title”;}// Ask/Answer postif( post.type == “answer”){prefix = “[Answer] “;truncate = true;// might need to be ‘slug’ as wellextract_field = “answer”;}// get the post’s urlvar url = post.url;// get the field we’re going to use as the titlevar title_field = $.trim( post[extract_field] );// truncate and add elipses if desiredif( title_field.length > truncate_length ){title_field = title_field.substring( 0, truncate_length ) + “…”;}// add the prefix is there is onevar title = prefix + title_field;// add it into the html stringrecentPostsHtml += ‘<p><a href=”‘ + url + ‘”>’ + title + ‘</a></p>’;}recentPostsHtml += ‘</div>’;$(“#recentPosts”).append(recentPostsHtml);</script>
