I recently switched to using Jekyll to maintain my blog instead of Drupal. I wanted to maintain the front page as headings along with the initial excerpt of the post with a “read more” link at the bottom of the excerpt. In Drupal, this was achieved by adding the snippet <!-- more --> where you wanted to define the boundary between the excerpt and the full post. Here are a couple of ways you can achieve the same with Jekyll.
Jekyll does not come with this feature being supported out of the box. However, you
can’t just simply forget about all your carefully planned out excerpt boundaries. The
good news is that you don’t have to. Here are two ways of achieving this. Method one
is a simple snippet of how to do this using a simple liquid markup, which is github
friendly. Method two uses a custom plugin to achieve a more generic and flexible approach.
Method One – Liquid Markup
This the method that I use because it’s github pages friendly. Github pages
do not allow custom plugins. Hence, the only thing that you can use is what the liquid
template engine provides out of the box. Here is a snippet of the markdown based Jekyll
page for this site that generates the post excerpts with “continue reading >>” link to
go an read the full post.
This works with github
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{% raw %} {% for post in paginator.posts %} <div class="author">{{ post.date | date_to_string }}</div> <h3><a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></h3> <div class="content"> {{ post.content | split:"<!-- more -->" | first }} </div> <b><a href="{{ BASE_PATH }}{{ post.url }}">continue reading >></a></b> <hr/> {% endfor %} {% endraw %} |
This snippet will either show the excerpt or the whole post! You wold have to make sure
that all your posts contain <!-- more -->.
Method Two – Custom Plugin
The full credit for this method goes to Jacques Fortier. This solution is taken from his blog post here. I like this approach because it creates a generic plugin that can be re-used wherever you like. I personally preferred this approach
but was not able to use it due to github pages restrictions.
Basically, you need to create a new plugin called postmore.rb in your _plugins folder
with the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
module PostMore def postmorefilter(input, url, text) if input.include? "<!--more-->" input.split("<!--more-->").first + "<p class='more'><a href='#{url}'>#{text}</a></p>" else input end end end Liquid::Template.register_filter(PostMore) |
Once you have that, you can use it in your Jekyll page like this:
|
1 2 3 4 5 6 |
{% highlight html %} {% raw %} {{ page.content | postmorefilter: page.url, "continue reading >>" }} {% endraw %} {% endhighlight %} |
I like the idea that this becomes a filter that can be generically used anywhere and the logic
on how to split and how to display the read more text is centralized. With method one, if you
had to do this at multiple places e.g. in archive pages, you would have to copy/paste.
However, at the end, the ability to use github pages was more important to me. Hence, I stuck with
method one.