Learning to be Giant.

Preview and comment functionality for jekyll


Jekyll is a static blog-aware website generator used by Github. For the reason I mentioned in the previous blog, I moved my website to Github, and unsurprisingly, hosted using jekyll. Despite some defects such as lacking good templates(since I am really not an expert at UI design), lacking comment system, etc., jekyll is a pretty easy to use web builder. The liquid templating language is quite easy to pick up and markdown, from my perspective, is also elegant for typesetting.

However, I really want my blog to have a comment system and preview index. I used Disqus in my previous blog, which is quite satisfying. Therefore, I want to move it here. Fortunately, Disqus has some universal supported embedded codes, which works fine in jekyll. Meanwhile, the preview things can also be dealt with some small tricks.

Preview Index

Enable Pagination in Subdirectory

I don’t want to use the default index.html as my blog index. Instead, I created a directory named /blog and had another index.html in there, which I want to use as my blog index. But pagination in jekyll only supports the default index.html. We should manually resolve this.

  1. Open _config.yml to add <pre>paginate_path: ‘/blog/page:num’</pre> right under <pre>paginate</pre>, this will enable the subdirectory pagination.
    NOTICE: This also disabled the home page pagination.
  2. Modify /blog/index.html to enable pagination. Be careful when specifying referenced link. It should be like: /blog/page{{ paginator.next_page }}.

Add Preview

  1. When listing your contents, try to use

     {{ post.content | truncatewords:100 }}

    This will truncate your content to only 100 words.

  2. After that, you may encounter problems when you have some codes in your post. If the generator truncate the content right in the code block, you may find your page looks weird. Right now, I use a small trick to resolve this:

     {% if post.content contains "<!-- more -->" %}
     {{ post.content | split:"<!-- more -->" | first % }}
     {% else %}
     {{ post.content | truncatewords:100 }}
     {% endif %}

    So, when you have codes in your post which in the beginning, you can manually specify the <!--more--> to make the content above the mark display on the index page.

Comment System

I made use of Disqus. The instructions are clearly stated by Disqus Official, which can be found here

Disclaimer: This is a personal weblog. The opinions expressed here represent my own and not those of any entity with which I have been, am now, or will be affiliated.