Rearrange Blogger Template Related Post & Add New Features ~ 竹部落

Today i spent few time to modify Blogger template like:

Rearrange related posts code.
prettyprint code syntax highlight.
Adding FancyBox lightBox and modify new.

I will keep on arranging my Blogger template and help it can more friendly. There had three parts on the above list. Second list is google code pretttify. I change my code syntax from syntaxhighligher to google-code-prettify. Google-code-prettify is using easier than syntaxhighlighter. You can just include two file(prettify.js & prettify.css) add function to execute prettify. Done!! Third list is FancyBox lightBox jQuery plugin. If you are familiar with jQuery. I think it's easy to add that plugin to your web page. About first list is what i want to share how do i arrange the Related Posts.

Until now, Blogger haven't support related posts in your blogger template. If you want to add that feature, you have to modify some template code and add few javascript function to do that.

Scenario

How does related posts work? The scenario is easy to understand. When you want to write new post, you will add Labels for this post on the bottom of Blogger editor. You add tags for the post you wrote. When web user visit your blog, related posts feature will list other relation posts following post content by specific tag. (you have three types can show related posts on your blog depending Blogger template pageType: 'item', 'archive', or 'index').[1]

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
    type='text/javascript'>
    </script>
</b:if>

I want to show related posts in user view specific page. So, i assign pageType is 'item'. As you can see. you can receive specific tag post content by callback function using Google Data Protocol[2]. Following is complete code to get all tage you add.

<b:loop values='data:post.labels' var='label'>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10&quot;'
  type='text/javascript'>
  </script>
</b:if>
</b:loop>

Finial, you need to render those data to web page. You can have simple function to do that like this.

After solving how receive data from Blogger template Layout data and render to web page. The key point of Related posts is parse data you need.

We receive Blogger template Layout data by callback function and return JSON data. The render data include post url, post title and post date (depending what you need). It's better to keep value in an object. Object is easier to understand and manipulate.

function RelatedLabels(json) {
var entries = json.feed.entry;
for (var key in entries) {
if (entries[key]) {
var item = {};
item.title = entries[key].title.$t;
item.url = entries[key].link[4].href;
item.date = entries[key].published.$t.substr(0, 10);
relatedPosts.push(item);
}
}
}

You might add multiple tags in different posts, and therefore might receive the same post in different tag by loop. There are many solutions to solve duplicate post in an object.

I push related post in one object. We can extend Array.prototype.push() function to detect should we add this post to our object. If you are familiar with Javascript syntax. It's simple to manipulate DOM using Javascript like document.write(). If you concern web page performance, you should decrease manipulate DOM directly[3]. Following is complete code.

var relatedPosts = [];
relatedPosts.push = function (data) {
 var _push = true;
 var length = this.length;
 for (var i = 0; i < length; i++) {
     if (this[i].url == data.url) _push = false;
 }
 if (_push) return Array.prototype.push.call(this, data);
 else return this;
}

function RelatedLabels(json) {
 var entries = json.feed.entry;
 for (var key in entries) {
     if (entries[key]) {
         var item = {};
         item.title = entries[key].title.$t;
         item.url = entries[key].link[4].href;
         item.date = entries[key].published.$t.substr(0, 10);
         relatedPosts.push(item);
     }
 }
}

function ShowRelatedPosts(PostUrl) {
 var count = 0;
 var eleLi, link, date, fragment = document.createDocumentFragment();
 for (var key in relatedPosts) {
     if (typeof(relatedPosts[key].url) != 'undefined' && relatedPosts[key].url != PostUrl && count < 5) {
         eleLi = document.createElement('li');
         link = document.createElement('a');
         date = document.createTextNode(' (' + relatedPosts[key].date + ')');
         link.setAttribute('href', relatedPosts[key].url);
         link.innerHTML = relatedPosts[key].title;
         eleLi.appendChild(link);
         eleLi.appendChild(date);
         fragment.appendChild(eleLi);

         count++;
     }
 }
 var eleOl = document.createElement('ol');
 eleOl.appendChild(fragment);
 document.getElementById('relatedPosts').appendChild(eleOl);
}

reference

竹部落

My studying notebook

2009/11/07

Rearrange Blogger Template Related Post & Add New Features

1 comment: