BoostScopeNest

Why Use Jekyll Collections for Documentation Jekyll collections allow you to group content beyond standard posts and pages. They’re perfect for structured documentation because you can control order, metadata, and navigation more easily. Combining this with multilingual support creates an elegant and scalable system. Core Benefits Organized content structure (e.g. tutorials, changelogs, API docs) Supports language segmentation Enables dynamic TOC, related items, and search Step 1: Define the Collection Edit your _config.yml to define your multilingual documentation collections: collections: docs: output: true permalink: /:collection/:path/ defaults: - scope: path: "" type: docs values: layout: doc lang: en Now create folders for each language under _docs : _docs/ ├── en/ │ ├── getting-started.md │ └── advanced-features.md ├── id/ │ ├── mulai.md │ └── fitur-lanjutan.md Each file includes front matt...

Now that your related post system supports multiple languages, let’s boost the user experience even further by allowing multilingual search that only shows results in the same language. This approach ensures both search and related posts remain contextual. Why Use Client-Side Search in Jekyll GitHub Pages is a static hosting platform. It doesn’t support server-side scripts like PHP or databases. So if you want search functionality, you need a static search engine — and Lunr.js or ElasticLunr are perfect for this. Step 1: Add Lunr or ElasticLunr to Your Project First, include the JavaScript library in your layout, usually in _layouts/default.html : <script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.9/lunr.min.js"></script> If you need multilingual support (e.g., Indonesian), ElasticLunr or Lunr with language plugins may be better. <script src="https://unpkg.com/[email protected]/elasticlunr.min.js"></script> St...

For multilingual Jekyll sites, showing related posts in the same language improves user experience significantly. Without it, readers might see content in a language they don’t understand — hurting engagement and bounce rate. Step 1: Use Language Codes in Front Matter Make sure each post includes a language key in its front matter, typically based on the folder structure or filename prefix: --- title: "Membangun Halaman FAQ Interaktif" tags: [faq, liquid] categories: [panduan] lang: id --- This lang key will be used to filter posts that match the current page’s language. Step 2: Build a Language-Aware Related Post Block We combine the logic from previous examples (tag/category filtering) and add a filter for lang . {% assign current_tags = page.tags %} {% assign current_lang = page.lang %} {% assign related = site.posts | where_exp: "p", "p.url != page.url and p.lang == current_lang" %} {% assign filtered = "" | split: "...

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 != ...

Why Skip YAML for Related Posts Maintaining related posts manually in _data can be tedious, especially for large sites. Many beginners prefer a system that automatically suggests posts based on tags or categories. In this article, we’ll build a YAML-free, auto-related-posts setup using only front matter metadata and Liquid filters. What You'll Get: Automatic related post suggestions based on tags Dynamic filtering using Liquid Easy fallback logic to avoid empty results No need for maintaining external YAML Step 1: Tag Your Posts Properly Ensure your posts have tags in the front matter: --- title: "Optimizing Liquid Performance" tags: [performance, liquid, optimization] --- Tags are the most reliable and flexible metadata for content grouping in Jekyll. You can also add categories as an additional filter layer. Step 2: Add Related Posts Block to Layout Insert the following code inside your post layout (e.g., _layouts/post.html ) or in an i...

Why Use Centralized YAML for Related Posts? Previously, we used series or pillar fields in post front matter. While effective, managing related content through front matter can get messy as your site grows. A centralized YAML file provides: Cleaner control over relationships Faster content updates without editing individual posts Support for non-linear or manual groupings Step 1: Create a Data File for Related Posts Create a file _data/related.yml with structure like: template-performance: title: "Template Optimization Series" posts: - /jekyll/template-basics/ - /jekyll/layout-optimizations/ - /jekyll/template-performance/ - /jekyll/minification/ jekyll-site-structure: title: "Jekyll Site Structure Guide" posts: - /jekyll/navigation-overview/ - /jekyll/building-sidebar/ - /jekyll/smart-related-posts/ - /jekyll/yaml-based-relationships/ Each group contains a title and a list of post URLs. This gives ...

Why Multilingual Related Posts Matter For multilingual Jekyll sites, simply reusing the same related post data across all languages leads to a poor UX. Users might click related links that aren’t in their preferred language. This breaks immersion, especially in knowledge bases or documentation. ✅ Goal: Only show related posts that match the current post's language Support shared related post groups across languages Optional: Fallback if translation is missing Step 1: Add Language to Post Front Matter Add lang to each post: --- title: "Optimisasi Template di Jekyll" lang: id related_group: template-performance --- And its English version: --- title: "Template Optimization in Jekyll" lang: en related_group: template-performance --- Step 2: Update YAML Related Group File Reuse same group keys for all languages, keeping just URLs: template-performance: title: en: "Template Optimization Series" id: "Seri Opti...