Layouts
By Amr
Create and customize page layouts in the Zer0-Mistakes Jekyll theme.
Estimated reading time: 43 minutes
Table of Contents
Layouts
Layouts define the structure and appearance of your pages. The Zer0-Mistakes theme includes several built-in layouts.
Available Layouts
| Layout | Purpose | Use Case |
|---|---|---|
default |
Standard page with sidebar | Documentation, general pages |
journals |
Blog post layout | Blog posts with metadata |
home |
Homepage layout | Site homepage |
collection |
Collection index | Listing pages for collections |
landing |
Full-width page | Marketing/landing pages |
root |
Base HTML | Don’t use directly |
Using Layouts
Specify a layout in your page’s front matter:
---
title: "My Page"
layout: default
---
Layout Hierarchy
Layouts inherit from each other:
root.html
└── default.html
├── home.html
├── journals.html
├── collection.html
└── landing.html
Creating Custom Layouts
Step 1: Create the Layout File
Create a file in _layouts/:
---
layout: default
---
<!-- _layouts/tutorial.html -->
<article class="tutorial">
<header class="tutorial-header">
<h1>Layouts</h1>
<div class="meta">
<span class="difficulty">intermediate</span>
<span class="time">15 minutes</span>
</div>
</header>
<div class="tutorial-content">
<!--
===================================================================
DEFAULT LAYOUT - Standard content layout with sidebars
===================================================================
File: default.html
Path: _layouts/default.html
Inherits: root.html
Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
1. Container wrapper with Bootstrap responsive classes
2. Left sidebar (bd-sidebar) - Navigation and outline
3. Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling
===================================================================
-->
<!-- ================================================ -->
<!-- MAIN LAYOUT CONTAINER -->
<!-- Bootstrap responsive container with custom grid -->
<!-- ================================================ -->
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
<!-- ================================ -->
<!-- LEFT SIDEBAR - Navigation -->
<!-- ================================ -->
<!-- Site navigation, content outline, and offcanvas menu for mobile -->
<!-- Sidebar visibility controlled by page.sidebar front matter -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar navigation with three standardized content modes
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Three navigation modes based on page.sidebar.nav:
* "auto": Auto-generated folder structure from collection documents
* "tree": YAML-defined hierarchical navigation from _data/navigation/
* "categories": Category-based navigation from site categories
Dependencies:
- sidebar-folders.html: Dynamic folder structure generation (auto mode)
- sidebar-categories.html: Category-based navigation (categories mode)
- nav-tree.html: YAML-based hierarchical tree (tree mode)
- Bootstrap 5 offcanvas component
Navigation Modes:
1. auto: Scans collection documents to build folder structure
2. tree: Uses predefined YAML navigation from _data/navigation/*.yml
3. categories: Groups content by Jekyll categories
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
<!-- ========================== -->
<!-- SIDEBAR HEADER -->
<!-- ========================== -->
<!-- Mobile-only header with close button -->
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<!-- ========================== -->
<!-- AUTO MODE: Collection Docs -->
<!-- ========================== -->
<!-- Auto-generates folder structure from collection documents -->
<nav class="w-100 nav-tree" data-nav-tree>
<!--
===================================================================
NAV TREE - Flat YAML Navigation Renderer
===================================================================
File: nav-tree.html
Path: _includes/navigation/nav-tree.html
Purpose: Render hierarchical navigation from YAML data files
Parameters:
- nav: Name of navigation file in _data/navigation/ (e.g., "docs", "main")
Data Schema (expected in _data/navigation/*.yml):
- title: string (required) - Display text
- url: string (optional) - Link URL
- icon: string (optional) - Bootstrap Icons class (e.g., "bi-folder")
- expanded: boolean (optional) - Default expanded state (default: false)
- children: array (optional) - Nested navigation items (max 2 levels)
Note: This implementation supports 2 levels of nesting to avoid Jekyll's
include depth limit. For deeper nesting, consider a plugin approach.
Dependencies:
- site.data.navigation[nav]: Navigation YAML data
- Bootstrap 5 collapse component
- Bootstrap Icons for visual indicators
Usage:
include navigation/nav-tree.html nav="docs"
===================================================================
-->
<ul class="list-unstyled fw-normal pb-2 small nav-tree-root">
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-rocket-takeoff me-2"></i>
<span>Getting Started</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-getting-started"
aria-expanded="true"
aria-controls="nav-getting-started"
aria-label="Toggle Getting Started submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse show" id="nav-getting-started">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Documentation Home</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/installation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Installation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/quick-start/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Quick Start</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/getting-started/theme-guide/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Theme Guide</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/front-matter/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Front Matter</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/features/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-stars me-2"></i>
<span>Features</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-features"
aria-expanded="false"
aria-controls="nav-features"
aria-label="Toggle Features submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-features">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Features Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mermaid-diagrams/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Mermaid Diagrams</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/mathjax-math/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>MathJax Math</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/giscus-comments/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Giscus Comments</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/posthog-analytics/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>PostHog Analytics</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/keyboard-navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Keyboard Navigation</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/features/preview-image-generator/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Preview Images</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/customization/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-palette me-2"></i>
<span>Customization</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-customization"
aria-expanded="false"
aria-controls="nav-customization"
aria-label="Toggle Customization submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-customization">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Customization Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/layouts/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Layouts</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/styles/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Styles</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/customization/navigation/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Navigation</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/deployment/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-cloud-upload me-2"></i>
<span>Deployment</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-deployment"
aria-expanded="false"
aria-controls="nav-deployment"
aria-label="Toggle Deployment submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-deployment">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Deployment Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/github-pages/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>GitHub Pages</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/netlify/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Netlify</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/custom-domain/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Custom Domain</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/jekyll/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-journal-code me-2"></i>
<span>Jekyll</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-jekyll"
aria-expanded="false"
aria-controls="nav-jekyll"
aria-label="Toggle Jekyll submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-jekyll">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Jekyll Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-config/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Configuration</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Liquid Templating</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/code-highlighting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Code Highlighting</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/pagination/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Pagination</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-performance-optimization/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Performance</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/jekyll/jekyll-security/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Security</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/ruby/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-gem me-2"></i>
<span>Ruby & Bundler</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-ruby-bundler"
aria-expanded="false"
aria-controls="nav-ruby-bundler"
aria-label="Toggle Ruby & Bundler submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-ruby-bundler">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Ruby Overview</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/ruby-101/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Ruby 101</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/liquid/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-droplet me-2"></i>
<span>Liquid</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-liquid"
aria-expanded="false"
aria-controls="nav-liquid"
aria-label="Toggle Liquid submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-liquid">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/liquid/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Liquid Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/docker/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-box-seam me-2"></i>
<span>Docker</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-docker"
aria-expanded="false"
aria-controls="nav-docker"
aria-label="Toggle Docker submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-docker">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/docker/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Docker Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/bootstrap/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-bootstrap me-2"></i>
<span>Bootstrap</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-bootstrap"
aria-expanded="false"
aria-controls="nav-bootstrap"
aria-label="Toggle Bootstrap submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-bootstrap">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/bootstrap/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Bootstrap Overview</span>
</a>
</li>
</ul>
</div>
</li>
<li class="mb-1 nav-tree-item" data-depth="0">
<!-- Parent item with children - collapsible -->
<div class="d-flex align-items-center">
<a href="/docs/troubleshooting/"
class="nav-tree-link flex-grow-1 d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<i class="bi-question-circle me-2"></i>
<span>Help</span>
</a>
<button class="btn btn-sm btn-link nav-tree-toggle p-1 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#nav-help"
aria-expanded="false"
aria-controls="nav-help"
aria-label="Toggle Help submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-help">
<ul class="list-unstyled fw-normal ps-3 nav-tree-children">
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/troubleshooting/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Troubleshooting</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation -->
<main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!-- Page introduction: title, breadcrumbs, metadata -->
<!--
file: _includes/intro.html
description: Enhanced intro section with improved share functionality and better button alignment
path: _includes/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Properly aligned action buttons at bottom right
- Improved accessibility with icons and labels
- Clean button grouping with consistent spacing
-->
<!-- Intro Section -->
<div class="bd-intro pt-5 ps-lg-2 position-relative" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/info-banner-mountain-wizard.png') no-repeat center center / cover;
color: #fff;">
<br>
<h1>Customization</h1>
<p>By Amr</p>
<p>Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.</p>
<p>Estimated reading time: 1 minutes</p>
<!-- Action Buttons Group -->
<div class="position-absolute bottom-0 end-0 m-3 d-flex gap-2">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share"></i>
<span class="d-none d-sm-inline ms-1">Share</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="shareDropdownBottom">
<li>
<a class="dropdown-item" href="https://reddit.com/submit?url=https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F&title=Customization" target="_blank">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F" target="_blank">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F&text=Customization" target="_blank">
<i class="bi bi-twitter me-2"></i>Share on Twitter
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button class="dropdown-item" onclick='navigator.clipboard.writeText("https://zer0-mistakes.com/docs/customization/"); alert("Link copied to clipboard!");'>
<i class="bi bi-clipboard me-2"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Edit on Github Button -->
<a href="https://github.com/bamr87/zer0-mistakes/blob/master/pages/_docs/customization/index.md" class="btn btn-dark">
<i class="bi bi-github"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<!-- Right sidebar visibility also controlled by page.sidebar -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
-->
<!-- TOC button in mobile view - Floating Action Button pattern -->
<!-- Positioned above back-to-top button to prevent overlap -->
<div class="d-lg-none position-fixed bd-toc-fab" style="bottom: 90px; right: 20px; z-index: 1030;">
<button class="btn btn-primary rounded-circle shadow-lg bd-toc-toggle"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#tocContents"
aria-controls="tocContents"
aria-label="Toggle Table of Contents"
style="width: 56px; height: 56px;">
<i class="bi bi-list-ul fs-5"></i>
</button>
</div>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="tocLabel">Table of Contents</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#tocContents"></button>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3">
<strong class="d-flex align-items-center">
<i class="bi bi-file-text me-2"></i>
On this page
</strong>
</div>
<!-- TOC list -->
<!-- TOC list -->
<ul class="list-group-flush"><li class="list-group-item"><a href="#customization" class="">Customization</a><ul><li class="list-group-item"><a href="#customization-areas" class="">Customization Areas</a></li><li class="list-group-item"><a href="#quick-customizations" class="">Quick Customizations</a><ul><li class="list-group-item"><a href="#site-identity" class="">Site Identity</a></li><li class="list-group-item"><a href="#colors-and-branding" class="">Colors and Branding</a></li><li class="list-group-item"><a href="#navigation" class="">Navigation</a></li></ul></li><li class="list-group-item"><a href="#guides-in-this-section" class="">Guides in This Section</a></li><li class="list-group-item"><a href="#layout-hierarchy" class="">Layout Hierarchy</a></li><li class="list-group-item"><a href="#override-theme-files" class="">Override Theme Files</a></li><li class="list-group-item"><a href="#next-steps" class="">Next Steps</a></li></ul></li></ul>
</nav>
</div>
</div>
</div>
<!-- =============================== -->
<!-- MAIN CONTENT BODY -->
<!-- =============================== -->
<!-- Where the actual page content is rendered -->
<div class="bd-content ps-lg-2">
<h1 id="customization">Customization</h1>
<p>Customize the Zer0-Mistakes theme to match your brand and requirements.</p>
<h2 id="customization-areas">Customization Areas</h2>
<table>
<thead>
<tr>
<th>Area</th>
<th>Location</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Layouts</strong></td>
<td><code class="language-plaintext highlighter-rouge">_layouts/</code></td>
<td>Page templates and structure</td>
</tr>
<tr>
<td><strong>Styles</strong></td>
<td><code class="language-plaintext highlighter-rouge">_sass/</code></td>
<td>CSS/SCSS customization</td>
</tr>
<tr>
<td><strong>Navigation</strong></td>
<td><code class="language-plaintext highlighter-rouge">_data/navigation/</code></td>
<td>Menu and sidebar configuration</td>
</tr>
<tr>
<td><strong>Components</strong></td>
<td><code class="language-plaintext highlighter-rouge">_includes/</code></td>
<td>Reusable HTML components</td>
</tr>
</tbody>
</table>
<h2 id="quick-customizations">Quick Customizations</h2>
<h3 id="site-identity">Site Identity</h3>
<p>Update <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Site</span><span class="nv"> </span><span class="s">Title"</span>
<span class="na">subtitle</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">tagline"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Site</span><span class="nv"> </span><span class="s">description</span><span class="nv"> </span><span class="s">for</span><span class="nv"> </span><span class="s">SEO"</span>
<span class="na">author</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Your</span><span class="nv"> </span><span class="s">Name"</span>
<span class="na">email</span><span class="pi">:</span> <span class="s2">"</span><span class="s">you@example.com"</span>
<span class="na">bio</span><span class="pi">:</span> <span class="s2">"</span><span class="s">About</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">author"</span>
<span class="na">logo</span><span class="pi">:</span> <span class="s">/assets/images/logo.png</span>
</code></pre></div></div>
<h3 id="colors-and-branding">Colors and Branding</h3>
<p>Create or edit <code class="language-plaintext highlighter-rouge">_sass/custom.scss</code>:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Override Bootstrap variables</span>
<span class="nv">$primary</span><span class="p">:</span> <span class="mh">#your</span><span class="o">-</span><span class="n">color</span><span class="p">;</span>
<span class="nv">$secondary</span><span class="p">:</span> <span class="mh">#your</span><span class="o">-</span><span class="n">color</span><span class="p">;</span>
<span class="c1">// Custom styles</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s1">'Your Font'</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="navigation">Navigation</h3>
<p>Edit files in <code class="language-plaintext highlighter-rouge">_data/navigation/</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _data/navigation/main.yml</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Home"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Blog"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/blog/</span>
<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Docs"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s">/docs/</span>
</code></pre></div></div>
<h2 id="guides-in-this-section">Guides in This Section</h2>
<ul>
<li><strong><a href="layouts/">Layouts</a></strong> — Create and customize page templates</li>
<li><strong><a href="styles/">Styles</a></strong> — CSS customization and theming</li>
<li><strong><a href="navigation/">Navigation</a></strong> — Configure menus and sidebars</li>
</ul>
<h2 id="layout-hierarchy">Layout Hierarchy</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>root.html ← Base HTML structure
└── default.html ← Main wrapper with navigation
├── home.html ← Homepage layout
├── journals.html ← Blog posts
├── collection.html ← Collection pages
└── landing.html ← Full-width landing pages
</code></pre></div></div>
<h2 id="override-theme-files">Override Theme Files</h2>
<p>To override any theme file:</p>
<ol>
<li>Create the same file path in your site</li>
<li>Jekyll uses your version instead of the theme’s</li>
</ol>
<p>Example: Override the footer by creating <code class="language-plaintext highlighter-rouge">_includes/core/footer.html</code>.</p>
<h2 id="next-steps">Next Steps</h2>
<ul>
<li><a href="layouts/">Layouts Guide</a> — Page templates</li>
<li><a href="styles/">Styles Guide</a> — CSS customization</li>
<li><a href="navigation/">Navigation Guide</a> — Menu configuration</li>
</ul>
</div>
</main>
</div>
</div>
</article>
Step 2: Use the Layout
---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_time: "15 minutes"
next_tutorial: /tutorials/part-2/
---
Layout Variables
Access these variables in your layouts:
| Variable | Description | |———-|————-| | `<!– =================================================================== DEFAULT LAYOUT - Standard content layout with sidebars ===================================================================
File: default.html Path: _layouts/default.html Inherits: root.html Purpose: Primary content layout with sidebar navigation and table of contents
Template Logic:
- Creates a responsive three-column layout using Bootstrap grid
- Left sidebar: Site navigation and content outline (collapsible on mobile)
- Center: Main content area with page title and body content
- Right sidebar: Table of contents and page shortcuts (hidden on mobile)
- Implements scroll spy for navigation highlighting
- Responsive design that stacks vertically on mobile devices
Layout Structure:
- Container wrapper with Bootstrap responsive classes
- Left sidebar (bd-sidebar) - Navigation and outline
- Main content area (bd-main) with:
- Intro section (page title, metadata)
- Right sidebar (bd-toc) - Table of contents
- Content area (bd-content) - Main page content
Dependencies:
- sidebar-left.html: Site navigation and content outline
- intro.html: Page title, breadcrumbs, and metadata
- sidebar-right.html: Table of contents and page shortcuts
Bootstrap Classes Used:
- container-xxl: Extra large responsive container
- bd-gutter: Custom Bootstrap spacing
- bd-layout: Custom layout utility class
- bd-sidebar: Custom sidebar styling
- bd-main: Main content area
- bd-toc: Table of contents styling
- bd-content: Content area styling =================================================================== –>
Customization
By Amr
Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.
Estimated reading time: 1 minutes
Table of Contents
Customization
Customize the Zer0-Mistakes theme to match your brand and requirements.
Customization Areas
| Area | Location | Description |
|---|---|---|
| Layouts | _layouts/ |
Page templates and structure |
| Styles | _sass/ |
CSS/SCSS customization |
| Navigation | _data/navigation/ |
Menu and sidebar configuration |
| Components | _includes/ |
Reusable HTML components |
Quick Customizations
Site Identity
Update _config.yml:
title: "Your Site Title"
subtitle: "Your tagline"
description: "Site description for SEO"
author:
name: "Your Name"
email: "you@example.com"
bio: "About the author"
logo: /assets/images/logo.png
Colors and Branding
Create or edit _sass/custom.scss:
// Override Bootstrap variables
$primary: #your-color;
$secondary: #your-color;
// Custom styles
body {
font-family: 'Your Font', sans-serif;
}
Navigation
Edit files in _data/navigation/:
# _data/navigation/main.yml
- title: "Home"
url: /
- title: "Blog"
url: /blog/
- title: "Docs"
url: /docs/
Guides in This Section
- Layouts — Create and customize page templates
- Styles — CSS customization and theming
- Navigation — Configure menus and sidebars
Layout Hierarchy
root.html ← Base HTML structure
└── default.html ← Main wrapper with navigation
├── home.html ← Homepage layout
├── journals.html ← Blog posts
├── collection.html ← Collection pages
└── landing.html ← Full-width landing pages
Override Theme Files
To override any theme file:
- Create the same file path in your site
- Jekyll uses your version instead of the theme’s
Example: Override the footer by creating _includes/core/footer.html.
Next Steps
- Layouts Guide — Page templates
- Styles Guide — CSS customization
- Navigation Guide — Menu configuration
` | Page content (required) |
| Layouts | Page title |
| Create and customize page layouts in the Zer0-Mistakes Jekyll theme. | Page description |
| default | Current layout name |
| /docs/customization/layouts/ | Page URL |
| zer0-mistakes | Site title |
Overriding Theme Layouts
To customize a theme layout:
- Copy the layout from the theme to your
_layouts/directory - Modify as needed
- Jekyll uses your version instead
Conditional Content
Show content based on layout or page variables:
{% if page.layout == 'journals' %}
<div class="post-meta">
<time>{{ page.date | date: "%B %d, %Y" }}</time>
<span class="author">{{ page.author }}</span>
</div>
{% endif %}
{% if page.sidebar %}
{% include navigation/sidebar.html %}
{% endif %}
Including Components
Use includes for reusable parts:
{% include core/head.html %}
{% include navigation/header.html %}
{% include content/toc.html %}
{% include core/footer.html %}
Best Practices
- Start with
default— Inherit from default for consistency - Keep layouts focused — Each layout should have one purpose
- Use includes — Extract reusable components
- Document custom layouts — Note purpose and required variables
- Test responsiveness — Verify layouts work on all screen sizes