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