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

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/

Tumblr Recent Post

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

edit tumblrBướ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>
<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ấy
const 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 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

Nhận thêm bí quyết mới

Đăng ký nhận bản tin qua email, bạn sẽ không bao giờ bỏ lỡ những chia sẻ tuyệt vời từ Tú Cao.

Leave a Reply

Thư điện tử của bạn sẽ không được hiện thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký để nhận
Tuyệt chiêu Marketing

Khi nào có bí quyết mới, bạn luôn là người biết đầu tiên.