AdTrailScope🕒😀😀😀

Posts

Showing posts with the label navigation

Combining Tags and Categories for Smart Index Navigation

Why Merge Tags and Categories in Jekyll Most Jekyll sites separate tags and categories into distinct navigation paths. Categories are often shown in sidebars or menus, while tags live in post metadata or isolated tag pages. This division creates friction for users who want to browse content naturally based on relevance or context. By combining both systems in one smart index, we allow visitors to explore both hierarchical and associative relationships between content items. This results in better usability, discoverability, and even SEO improvements due to internal link clustering. Use Case: A Developer Knowledge Base Let’s say we’re building a knowledge base for developers using Jekyll collections. Each resource item belongs to a category like “Performance” or “Theming,” and also has tags such as “includes,” “scss,” or “responsive.” Our goal is to create an index that looks like this: Performance (category) includes (tag) Optimizing I...

Designing Category-Based Navigation for Jekyll Collections

Why Category Navigation Matters for Jekyll Collections For content-heavy Jekyll sites—especially knowledge bases, documentation sets, or niche blogs—clear navigation is crucial. One of the most effective approaches is to organize content into categories and present those categories in a structured, navigable layout. While Jekyll doesn’t provide category navigation out of the box for collections, we can build a flexible system using Liquid logic and YAML front matter. Case Study: Multi-Category Knowledge Base Let’s assume we have a Jekyll collection named _kb representing a knowledge base. Each entry belongs to one or more categories defined in its front matter like this: --- title: How to Use Front Matter categories: [getting-started,configuration] summary: Understand the basics of front matter in Jekyll pages. --- We want to build a sidebar or sectioned layout that groups all entries by category, sorted alphabetically and linked automatically. Step 1: Normalize and Ex...

Designing Custom Layouts and Filters for Jekyll Collections

Why Custom Layouts and Filters Matter in Jekyll Projects Once you start organizing your Jekyll content with collections , the next natural step is controlling how those collections are presented. Instead of using a one-size-fits-all layout, custom layouts tailored to each content type improve usability, design, and structure. In tandem with custom layouts, Liquid filters allow you to sort, group, and transform content dynamically in your templates. This article walks you through real-world examples for combining both techniques to build elegant and flexible sites. Case Study: Creating a Multi-Level Tutorial Platform Imagine you're building a tutorial platform where each tutorial has: A level (beginner, intermediate, advanced) An estimated reading time A difficulty badge and progress bar Your goal is to create a custom layout that highlights this metadata and displays it consistently across the entire _tutorials collection. Step 1: Define Custom Layout for...

Tag-Based Filtering System for Jekyll Collection

Why Use Tags for Navigating Jekyll Collections Unlike categories, which tend to be hierarchical and predefined, tags offer flexible, descriptive labeling. They allow users to discover content based on shared topics, features, or attributes. In knowledge bases, tutorials, or documentation, tags can act as a powerful way to group similar entries without enforcing rigid structure. Jekyll doesn’t natively support tag pages for collections, but we can build this functionality manually using Liquid, includes, and front matter conventions. Case Study: Multi-Tag Learning Resource Library Imagine a collection called _resources containing educational materials. Each resource has tags in its front matter: --- title: Understanding Liquid Filters tags: [liquid,filters,basics] summary: A beginner-friendly explanation of Liquid filters in Jekyll. --- We want to create a tag-based interface that shows: All available tags (sorted) Each tag linking to a filtered view showing relev...

Structuring Your Jekyll Site with Custom Collections

Why Jekyll Collections Are Essential for Structured Content As your static site grows beyond simple blog posts and pages, you’ll eventually need more structure. Maybe you’re building a documentation portal, a changelog, or a showcase of portfolio projects. That’s where Jekyll collections come in. Collections allow you to define and group custom content types—like tutorials, features, case studies, or FAQs—that behave similarly to posts, but with greater control over how they’re organized, rendered, and accessed. What Are Jekyll Collections? A collection is a group of related documents stored in its own folder (prefixed with an underscore, like _tutorials ) and configured in _config.yml . Unlike posts, collections don’t require date-based filenames and can have arbitrary naming, front matter, and permalink structures. This makes them ideal for organizing content that: Isn’t blog-like in nature (no date relevance) Needs its own layout, filters, and structure Shoul...

Streamlining Jekyll Content with Front Matter Defaults

Why Front Matter Defaults Are Game-Changing in Jekyll One of the most tedious parts of managing a growing Jekyll site is the repetitive front matter in every file. Whether you’re writing blog posts, documentation, or product listings, you often find yourself copying the same values like layout , author , category , and permalink again and again. This repetition clutters your files and introduces a greater risk of inconsistencies. Jekyll’s front matter defaults provide an elegant solution. Introduced in Jekyll 3, this feature allows you to define shared front matter properties based on path or type—meaning you can automatically apply values to entire directories of content without repeating them in every file. What Are Front Matter Defaults? Front matter defaults are defined in your Jekyll site’s _config.yml file under the defaults key. They let you assign specific front matter properties to: Files in certain folders Files with specific front matter types (e.g., po...