Related posts in Jekyll

Related posts in Jekyll

link related posts by tag or category

Web Notes

2018.12.16

0 #jekyll #snippet

Jekyll features a simple “related posts” variable per post page with site.related_posts, which contains the 10 most recent posts in default. However, it only works perfectly when lsi (latent semantic indexing) option was enabled.1 As explained in Jekyll documents, with lsi features enabled, the build process will slow down. What’s more, it’s not supported by GitHub Pages.

So I find a post that solved this issue by using only Liquid tags to generate the related posts with tags or categories. It works by going through the related posts collection and selecting the posts that contain any tags (or categories) in common with the current post, up to a self-defined limit number. If there are enough posts to fill that limit, fine, it stops there. Otherwise, it goes again through the most recent, possibly unrelated posts, and outputs them until the limit is finally reached.

The full snippet is presented below.2 Simply adapt the HTML format using your styles.

{% assign RELATED_POSTS_THRESHOLD = 3 %}

<ul>
  {% assign related_post_count = 0 %}
  {% for post in site.related_posts %}
    {% if related_post_count == RELATED_POSTS_THRESHOLD %}
      {% break %}
    {% endif %}
    {% for tag in post.tags %}
      {% if page.tags contains tag %}
        <li>
          <h3>
            <a href="{{ site.url }}{{ post.url }}">
              {{ post.title }}
              <small>{{ post.date | date_to_string }}</small>
            </a>
          </h3>
        </li>
        {% assign related_post_count = related_post_count | plus: 1 %}
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}

  {% assign posts_left = RELATED_POSTS_THRESHOLD | minus: related_post_count %}
  {% unless posts_left == 0 %}
    {% for post in site.related_posts %}
      {% if posts_left == 0 %}
        {% break %}
      {% endif %}

      {% assign already_related = false %}
      {% for tag in post.tags %}
        {% if page.tags contains tag %}
          {% assign already_related = true %}
          {% break %}
        {% endif %}
      {% endfor %}
      {% unless already_related %}
        {% assign posts_left = posts_left | minus: 1 %}
        <li>
          <h3>
            <a href="{{ site.url }}{{ post.url }}">
              {{ post.title }}
              <small>{{ post.date | date_to_string }}</small>
            </a>
          </h3>
        </li>
      {% endunless %}
    {% endfor %}
  {% endunless %}
</ul>

You can also replace the site.related_posts with site.posts if you want more posts beyond the ten recent posts.

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple templating language that Jekyll uses to process pages on your site. With Liquid you can output an modify variables, have logic statements inside your pages and loop over content.

Syntax highlight with Rouge in Jekyll

Tutorials

2017.03.18

Syntax highlight with Rouge in Jekyll

By default, Jekyll 3 and above versions integrated with Rouge, a pure Ruby syntax highlighter which supports over 100 languages. Since Rouge themes are compatible with Pygments’s stylesheets, it’s nice for us to choose a favourable style.

TRENDING