A related post section that’s both informative and visually engaging increases user engagement. Instead of just showing a list of titles, you can include post thumbnails, excerpts, and even categories to provide context.
Step 1: Add Thumbnail and Excerpt to Your Posts
In each post’s front matter, define a thumbnail image and (optionally) a custom excerpt:
---
title: "Creating Interactive FAQ Pages"
tags: [faq, liquid, interactivity]
categories: [jekyll]
thumbnail: "/assets/images/faq-cover.png"
excerpt: "Learn how to build interactive FAQ pages in Jekyll using collapsible sections and Liquid."
---If excerpt isn’t provided, Jekyll will auto-generate one from the post’s content using the first paragraph.
Step 2: Update the Related Post Block to Display Visual Elements
{% assign current_tags = page.tags %}
{% assign current_categories = page.categories %}
{% assign related_posts = site.posts | where_exp: "post", "post.url != page.url" %}
{% assign filtered = "" | split: "" %}
{% for post in related_posts %}
{% assign intersect = post.tags | where_exp: "tag", "current_tags contains tag" %}
{% if intersect != empty %}
{% assign filtered = filtered | push: post %}
{% endif %}
{% endfor %}
{% if filtered.size == 0 %}
{% assign fallback = site.posts | where_exp: "post", "post.url != page.url and post.categories contains current_categories[0]" %}
{% assign filtered = fallback %}
{% endif %}
{% if filtered.size > 0 %}
<div class="related-posts visual">
<h3>Related Posts You Might Like</h3>
<div class="related-grid">
{% for post in filtered limit:4 %}
<a href="{{ post.url }}" class="related-card">
<img src="{{ post.thumbnail | default: '/assets/images/default-thumb.png' }}" alt="{{ post.title }}">
<div class="related-content">
<h4>{{ post.title }}</h4>
<p>{{ post.excerpt | strip_html | truncate: 100 }}</p>
</div>
</a>
{% endfor %}
</div>
</div>
{% endif %}Step 3: Style the Visual Related Post Section
.related-posts.visual {
margin-top: 3em;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.2em;
}
.related-card {
display: block;
text-decoration: none;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.3s;
}
.related-card:hover {
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.related-card img {
width: 100%;
height: 120px;
object-fit: cover;
}
.related-content {
padding: 0.8em;
}
.related-content h4 {
font-size: 1em;
margin-bottom: 0.5em;
color: #333;
}
.related-content p {
font-size: 0.9em;
color: #666;
}Why This Approach is Ideal for Beginners
- No external plugins — everything is done with native Jekyll and Liquid
- Progressive enhancement — fallbacks are provided if thumbnails or excerpts are missing
- Flexible filtering — starts with tags, then uses categories as backup
- Responsive design — uses CSS Grid for layout that works on all devices
Going Beyond: Weighted Matching for Better Accuracy
If you want more accurate related posts, consider weighting your filters:
- +2 points if a tag matches
- +1 point if in the same category
- +0.5 point if the titles share words (advanced)
This approach requires more complex Liquid logic or even a pre-processing script in Ruby or Node.js, but the tag/category hybrid system already works great for many blogs.
Conclusion
You’ve now learned how to build a flexible, beginner-friendly related post system in Jekyll that adapts automatically using tags and categories. You’ve also seen how to upgrade it into a rich visual experience with thumbnails and excerpts, without needing plugins or YAML complexity.
In the next article, kita akan membahas pembuatan related post multilingual yang mempertimbangkan bahasa pengguna secara otomatis, cocok untuk proyek Jekyll multilingual dengan data-driven layout dan folder i18n seperti /en/, /id/, atau /de/.