Erik Yuzwa

Fullstack web developer with a touch of PC game development for good measure

13 August 2021

Create a Read More link on your Jekyll blog in 2 easy steps

by erikyuzwa

A common design practice for most Jekyll templates, is to have a page (or main index) that displays a listing of your recent blog posts.

Assuming this blog post page is supporting proper pagination, what if you want to list just a small portion of your blog post – such as the first few lines – then display a “Read More” link to encourage the reader to dig into the article properly?

Introducing post.excerpt

Similar to WordPress software, Jekyll supports an excerpt seperator. By default, this is usually the first paragraph of the content in a post, but it CAN be customized (as with most things Jekyll), either in the posts frontmatter or in the _config.yml file.

We don’t want to define anything different at the moment.

By default, the excerpt separator is defined as <!--more-->, which can be put into your post content wherever you want to create a natural break in your content.

Step 1 - use the separator in your content

From within any of your posts, drop in the separator wherever you want. Here’s a small sample to help illustrate.


---
layout: post
title: "This is a sample post"
date: 2021-08-13 14:00:00

---

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. 

<!--more-->

It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.


The next step is to update your Jekyll’s blog listing markup to make use of the post.excerpt hash.

Let’s take a sample blog listing that you might find your index.html:


    <ul class="posts no-list">
        {%- for post in paginator.posts -%}
        <li>
            <span class="date">{{ post.date | date: '%B %d, %Y' }}</span>
            <h3><a class="post-link" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
        </li>
        {%- endfor -%}
    </ul>

It’s some pretty standard Jekyll markup. All we’re doing is looping through our paginator.posts content and then displaying the post.title to link to the actual post content.

It gets the job done, but it’s a little “boring” - definitely not that enticing for a reader.

Let’s update the markup to take advantage of the post.excerpt, and display the excerpt content along with a “Read More” link that we can style.


    <ul class="posts no-list">
        {%- for post in paginator.posts -%}
        <li>
            <span class="date">{{ post.date | date: '%B %d, %Y' }}</span>
            <h3><a class="post-link" href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
            <p>{{ post.excerpt }}</p>
            {% if post.excerpt != post.content %}
              <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>
            {% endif %}
        </li>
        {%- endfor -%}
    </ul>

Pretty cool right?!

This will definitely help your blog out in terms of looking a bit more attractive, and gives your site in general a nice “feel”.

Give it a shot and see how it works for you!

tags: