A photo of Max Glenister Max Glenister

Adding support for <!-- more --> tag to Jekyll without plugins

Here’s a quick tip for an approach I’ve started using to split post content at a given point for displaying in an archive page, without using a plugin.

Until recently the approach I took to creating a snippet of a post for my archive page just trimming the post.content to 300 characters in the following way:

{{ post.content | strip_html | truncate:300 }}
{% if post.content | size > 300 %}
    <strong>Read more</strong>
{% endif %}

This worked well at first, but when I wrote posts that had very little text before a block of code at the start of the post, the post snippets didn’t look very good:

There are plugins to allow you to specify where to cut off the content for an excerpt, such as this plugin.

But that won’t work as Jekyll runs with safe: true on GitHub Pages.

So a solution… Well, Jekyll supports the liquid filters split and first, so we can do the following:

{{ post.content | split:"<!-- more -->" | first | strip_html | truncate:300 }}
{% if post.content | size > 300 %}
    <strong>Read more</strong>
{% endif %}

And then if we include a <!-- more --> in our post at the point that we want to split, we’ll get the post to cut off the content at that point.

So how does it work?

The split filter

The first step is to split the content at the <!-- more --> marker using the split filter. When we use split filter, it turns out post.content in to an array with two (or more) parts.

{% post.content | split:"<!-- more -->" %}

So we go from:

post.content =>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero nibh, semper quis libero sed, molestie molestie nulla.

<!-- more -->

In in augue enim. Aenean fringilla accumsan augue, at convallis quam consequat nec."

To this (an array with two items):

post.content =>

["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero nibh, semper quis libero sed, molestie molestie nulla.",
"In in augue enim. Aenean fringilla accumsan augue, at convallis quam consequat nec.]

Then the second step is to use the first filter to just select the part of post.content that came before the <!-- more --> marker:

{% post.content | split:"<!-- more -->" | first %}

Which gives us:

post.content =>

["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero nibh, semper quis libero sed, molestie molestie nulla."]

I also take the steps to strip_html and trim the text to 300 characters.

Update: You can use Jekyll’s built in “excerpt” feature these days, by doing the following:

  1. Define your excerpt_separator in your _config.yml: excerpt_separator: "<!-- more -->"
  2. Update the examples I provided before, to use post.excerpt: {% post.excerpt %}

This post was written way back in 2013. There's a chance that it's no-longer correct, or it has been superseded by a newer post. I commend you for making it this far through my archive! I made some updates to this post on 10 August 2014. You can look at the edit history on GitHub.

Take a look in the Archive to see if I've written a newer post on the subject.

About the author

A photo of Max Glenister

Max Glenister is a Front-end Developer based in Oxfordshire. For work he spends his time designing, validating and implementing user interfaces. For fun he tinkers with Virtual Reality, 3D printing, embedded systems, game development and many other things.

You can keep up with Max on Github, Twitter and Reddit

Comments

    There are no comments yet! You can add a comment using Github issues.