Liquid Examples

To learn the structure and capabilities of Liquid Templating Language, we will look at two examples. Before looking at the solution, try to develop them using the content of this workshop and Jekyll Variables.

Estimated reading time

Some publishing platforms, such as Medium and some personal blogs show an estimated reading time for each story or article. Readers can decide if they want to commit the estimated reading time to finish the article. It is very easy to calculate the estimated reading time using Liquid capabilities.

We start with a simple layout for posts. The following layout is from Jekyll Now:

---
layout: default
---

<article class="post">
  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    Written on {{ page.date | date: "%B %e, %Y" }}
  </div>

  {% include disqus.html %}
</article>

After the title of the post, {{ page.title }} , we can put an HTML tag using the same date class and print the estimated reading time. Assuming that the average reading speed of an adult is roughly 180 words per minute, we use if and divided_by operators to calculate reading time.

{% assign words = content | number_of_words %}
        {% if words < 180 %}
          1 min
        {% else %}
        {{ words | divided_by:180 }} mins
        {% endif %}
        Read

We used {% if words < 360 %} to show 1 minute even for very short stories.

Finally, the new layout looks like this:

---
layout: default
---

<article class="post">
  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    {% assign words = content | number_of_words %}
    {% if words < 180 %}
    1 min
    {% else %}
    {{ words | divided_by:180 }} mins
    {% endif %}
    Read
  </div>

  <div class="date">
    Written on {{ page.date | date: "%B %e, %Y" }}
  </div>

  {% include disqus.html %}
</article>

Showing Tags of a post

Many websites use a Related Stories section to show other articles that might be interesting to a reader based on the article they are currently reading. Jekyll has a built-in variable, site.related_posts, that contains a list of up to ten related Posts. By default, there are the top ten most recent posts. You can populate this array using other methods to make it more intelligent.

You can also use tags or categories to show related posts. Tags or categories for a post are defined in the post’s front matter. The key tag should be used for a single entry and tags for multiple entries. Jekyll expects multiple items mapped to tags and will automatically split a string entry if it contains whitespace. Before moving to the next paragraph, add some tags to the Front matter of your post.

---
layout: default
title: Example Post with Tags
tags: workshop Jekyll learning
---

Let’s start with a simple layout for posts. The following layout is from Jekyll Now:

---
layout: default
---

<article class="post">
  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    Written on {{ page.date | date: "%B %e, %Y" }}
  </div>

  {% include disqus.html %}
</article>

Jekyll stores tags in page.tags. First, we check if the variable is not empty. Then, we write each tag and create a hyperlink to a webpage. The webpages are not created by Jekyll, so the hyperlinks would not work right now.

<div class="date">
{% if page.tags.size >= 1 %}
      {% for tag in page.tags %}
      <a href="{{ site.baseurl }}/tag/{{ tag }}" class="post-tags__tag">{{ tag }}</a>
      {% endfor %}
{% endif %}
</div>

Now, we will add a section to the post layout to show post tags. We use the date class to set the style of this section:

---
layout: default
---

<article class="post">
  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    Written on {{ page.date | date: "%B %e, %Y" }}
  </div>

  <div class="date">
    {% if page.tags.size >= 1 %}
      {% for tag in page.tags %}
      <a href="{{ site.baseurl }}/tag/{{ tag }}" class="post-tags__tag">{{ tag }}</a>
      {% endfor %}
    {% endif %}
  </div>

  {% include disqus.html %}
</article>

You can later build one webpage per tag and list all posts with the same tag in them. This is above the level of this workshop, but you can use the Jekyll Tagging plugin or Jekyll Tags on Github Pages to add this capability to your website. Note that the Jekyll Tagging plugin is not supported on Github Pages.