The OctopressThemes Blog

news and articles from octopress themes

Adding a Related Posts Section to Your Post

A related posts section helps your readers to discover posts that they may like. It is very effective for increasing readership. In Octopress, it is very easy to add a related posts section. Jekyll already has a related posts plugin. All we need to do is to enable it. We have installed related posts for this blog. Take a look at the bottom of the post to see it.

What we’re showing is very similar to what Jimmy Tang has posted. However, we’re placing the related posts section at the bottom of each post instead of the sidebar. The reader will be able to find the related posts when he has finished reading. If the article is long, readers won’t be able to see the related posts section as it is hidden by the scrolling.

Installation of dependencies

Much of this information is available from Jimmy Tang’s post. I’ll only provide a summary.

First add the following line to your _config.yml.

_config.yml
1
lsi: true

Next we need to add the GSL ruby gem to help hasten the computation. Before that, you probably need to add the dependencies for the GSL gem.

GSL OS X fix

Run the following shell commands to install GSL on Mac OS X.

1
2
brew tap homebrew/versions
brew install gsl114

GSL Linux fix

Run the following shell commands to install GSL on Linux.

1
2
3
4
5
6
7
curl -O http://mirror.aarnet.edu.au/pub/gnu/gsl/gsl-1.14.tar.gz
tar xfz gsl-1.14.tar.gz
cd gsl-1.14
./configure
make clean
make
sudo make install

Installing the GSL ruby gem

Now, add the gem to your Gemfile.

Gemfile
1
gem 'gsl'

To install it, run this on your shell

1
bundle install

Finally we just need to run the generate command to generate the related posts.

1
rake generate

That is it! Your related posts should be ready.

Installation of related posts

I’ve created a related posts snippet here. Copy the code and add it as a new file at source/_includes/post/related_posts.html. This checks if the site has any related posts and adds 3 links. You may change the number of related posts to show by changing the limit.

source/_includes/post/related_posts.html
1
2
3
4
5
6
7
8
9
10
11
12

{% if site.related_posts %}
  <h3>Related posts</h3>
  <ul class="posts">
  {% for post in site.related_posts limit:3 %}
    <li class="related">
      <a href="{{ root_url }}{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
  </ul>
{% endif %}

Next we need to add it to the footer of the article. We have included it by adding the location of the related posts snippet in source/_layouts/post.html. Below is the diff for the file.

source/_layouts/post.html
1
2
3
4
5
6
7
8
9
10

--- a/source/_layouts/post.html
+++ b/source/_layouts/post.html
@@ -11,6 +11,7 @@ single: true
       {% include post/author.html %}
       {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
       {% include post/categories.html %}
+      {% include post/related_posts.html %}
     </p>

Once added, we need to run generate to create the related posts section.

1
rake generate

And that concludes our post on adding a related post section to your Octopress blog.

Comments