Jekyll - "Read more" links

I just implemented a new feature on the blog: read more links! After writing my first post, I realized that it was rather long and took up a lot of space in the post timeline (home page). I needed some way to cut-off part of the material in the preview and only include it in the whole article. After some searching I came upon Trần Trường's article, which detailed the code for something similar to what I desired.

The implementation

I can now add a "read more" link using a simple tag <!-- more --> in any of my post markdown files!

Previously, content was simply displayed using {{post.content}}. Now I check to see if the <!-- more --> tag is included in the content, and add a link after the split. I did this by adding the following to my index.html file.

<div class="post-content-truncate">
  {% if post.content contains "<!-- more -->" %}
    {{ post.content | split:"<!-- more -->" | first % }}
    <a href="{{ site.baseurl }}{{ post.url }}">
      Read more...
    </a>
  {% else %}
    {{post.content}}
  {% endif %}
</div>

Hope this can help someone else who's trying to get their github.io blog up and running on Jekyll!


Comments