Layouts
Create and customize page layouts in the Zer0-Mistakes Jekyll theme.
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"></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)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- 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 -->
<aside class="bd-sidebar">
<!--
===================================================================
SIDEBAR LEFT - Dynamic Navigation Sidebar
===================================================================
File: sidebar-left.html
Path: _includes/navigation/sidebar-left.html
Purpose: Left sidebar panel (responsive offcanvas) around the resolved
sidebar navigation content
Template Logic:
- Responsive offcanvas sidebar for mobile devices
- Mode resolution + rendering are delegated to shared includes:
* navigation/sidebar-config.html — resolves sidebar_nav / title / icon
from page.sidebar → collection `sidebar:` metadata → site.sidebar
* navigation/sidebar-nav.html — renders the resolved mode
Navigation modes (page.sidebar.nav — see sidebar-config.html):
- "auto": best mode for the page's collection (curated data file →
collection folder tree → post categories)
- "collection": live folder tree of the page's (or a named) collection
- "categories" / "tags": posts grouped by taxonomy term
- any other value: _data/navigation/<value>.yml rendered by nav-tree.html
Configuration:
- Heading text/icon: page.sidebar.title/icon → collection metadata →
site.sidebar.title/icon → "Browse docs"
===================================================================
-->
<!-- ================================ -->
<!-- SIDEBAR NAVIGATION CONTAINER -->
<!-- ================================ -->
<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
<script>
try {
if (localStorage.getItem('zer0-nav-sidebar-visible') === 'false') {
document.documentElement.classList.add('bd-sidebar-pref-hidden');
}
} catch (e) {}
</script>
<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">
<h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">Browse docs</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-lg-none px-2"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close documentation sidebar" data-bs-target="#bdSidebar"></button>
</div>
</div>
<!-- ========================== -->
<!-- SIDEBAR CONTENT AREA -->
<!-- ========================== -->
<!-- Scrollable content area with dynamic navigation options -->
<div class="offcanvas-body overflow-auto">
<div class="bd-sidebar-desktop-header mb-3 d-none d-lg-flex align-items-center justify-content-between gap-2 w-100">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-journal-bookmark me-2" aria-hidden="true"></i>
Browse docs
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-sidebar-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Hide documentation sidebar"
title="Hide documentation sidebar">
<i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i>
<span class="visually-hidden">Hide documentation sidebar</span>
</button>
</div>
<!-- Resolved navigation content (see navigation/sidebar-nav.html) -->
<nav class="w-100 nav-tree" id="sidebar-content" data-nav-tree aria-label="Section navigation">
<!--
===================================================================
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/remote-theme-checklist/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Remote-Theme Consumer Checklist</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/deployment/build-overlay/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Safe-Mode Build Overlay</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/development/testing/"
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-tools me-2"></i>
<span>Development</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-development"
aria-expanded="false"
aria-controls="nav-development"
aria-label="Toggle Development submenu">
<i class="bi bi-chevron-down"></i>
</button>
</div>
<!-- Children container (Level 1) -->
<div class="collapse" id="nav-development">
<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/development/testing/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Testing</span>
</a>
</li>
<li class="mb-1 nav-tree-item" data-depth="1">
<!-- Level 1 leaf item -->
<a href="/docs/development/vendor-assets/"
class="nav-tree-link d-inline-flex align-items-center rounded py-1 px-2 text-decoration-none active">
<span>Vendor assets</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>
<div class="position-fixed bd-sidebar-fab d-lg-none" id="sidebarFab">
<button class="btn btn-primary rounded-circle shadow-lg p-0 bd-sidebar-toggle"
type="button"
aria-controls="bdSidebar"
aria-expanded="true"
aria-label="Open documentation sidebar">
<i class="bi bi-journal-bookmark fs-5" aria-hidden="true"></i>
</button>
</div>
<!-- ================================ -->
<!-- MAIN CONTENT AREA -->
<!-- ================================ -->
<!-- Primary content section with scroll spy for table of contents navigation.
Not a <main>: root.html already provides the single <main id="main-content">
landmark; a nested <main> here would duplicate it (issue #299). -->
<div class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
<!--
file: _includes/content/intro.html
description: Enhanced intro section with share, edit, and improve/report buttons
path: _includes/content/intro.html
features:
- Responsive share dropdown with multiple social platforms
- Edit on GitHub quick link
- "Improve" button — opens the page-feedback widget (capture type + description
+ live page context + console logs → GitHub issue). Progressive enhancement:
it is a real link to the issue form, upgraded by assets/js/page-feedback.js.
See _includes/components/page-feedback.html.
- Responsive flex layout: full-width content block, frosted metadata footer with reading time and action buttons
- Balanced padding and typography hierarchy via bd-intro-* classes
- Metadata row: author, dates, category, difficulty, tags, view source
-->
<!-- Intro Section -->
<div class="bd-intro" style="
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/previews/customization.png') no-repeat center center / cover;">
<div class="bd-intro-inner">
<div class="bd-intro-content">
<h1 class="bd-intro-title">Customization</h1>
<p class="bd-intro-description">Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.</p>
</div>
<div class="bd-intro-meta-footer">
<ul class="bd-intro-meta-row list-unstyled" aria-label="Page metadata">
<li class="bd-intro-meta-item">
<i class="bi bi-person-fill bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87" rel="author" itemprop="author">Amr</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-calendar3 bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-07-18T01:42:44+00:00" itemprop="datePublished">
Published Jul 18, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-pencil bd-intro-meta-icon" aria-hidden="true"></i>
<time datetime="2026-06-16T00:00:00+00:00" itemprop="dateModified">
Updated Jun 16, 2026
</time>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-folder2 bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link bd-intro-badge" href="/docs/customization/">Customization</a>
</li>
<li class="bd-intro-meta-item">
<i class="bi bi-bar-chart-steps bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-badge bd-intro-badge--level bd-intro-badge--level-intermediate">Intermediate</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--tags">
<i class="bi bi-tags bd-intro-meta-icon" aria-hidden="true"></i>
<span class="bd-intro-tag-list">
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#customization">customization</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#layouts">layouts</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#styles">styles</a>
<a class="bd-intro-badge bd-intro-badge--tag" href="/tags/#navigation">navigation</a>
</span>
</li>
<li class="bd-intro-meta-item bd-intro-meta-item--source d-none d-md-inline-flex">
<i class="bi bi-file-earmark-code bd-intro-meta-icon" aria-hidden="true"></i>
<a class="bd-intro-meta-link" href="https://github.com/bamr87/zer0-mistakes/blob/main/pages/_docs/customization/index.md" target="_blank" rel="noopener noreferrer">View source</a>
</li>
</ul>
<div class="bd-intro-meta-bottom">
<p class="bd-intro-meta">
<i class="bi bi-clock me-1" aria-hidden="true"></i>
Estimated reading time: 5 minutes
</p>
<!-- Action Buttons Group -->
<div class="bd-intro-actions">
<!-- Share Button -->
<div class="dropdown">
<button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share" aria-hidden="true"></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://zer0-mistakes.com/docs/customization/&title=Customization" target="_blank" rel="noopener noreferrer">
<i class="bi bi-reddit me-2"></i>Share on Reddit
</a>
</li>
<li>
<a class="dropdown-item js-linkedin-share"
href="https://www.linkedin.com/sharing/share-offsite/?url=https://zer0-mistakes.com/docs/customization/"
target="_blank"
rel="noopener noreferrer"
title="Copies a cleaned article summary to your clipboard, then opens LinkedIn sharing"
data-share-url="https://zer0-mistakes.com/docs/customization/"
data-share-title="Customization"
data-share-description="Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.">
<i class="bi bi-linkedin me-2"></i>Share on LinkedIn
</a>
</li>
<li>
<a class="dropdown-item" href="https://x.com/intent/tweet?url=https%3A%2F%2Fzer0-mistakes.com%2Fdocs%2Fcustomization%2F&text=Customization" target="_blank" aria-label="Share on X">
<i class="bi bi-twitter-x me-2"></i>Share on X
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><button class="dropdown-item" type="button" data-copy="https://zer0-mistakes.com/docs/customization/">
<i class="bi bi-clipboard me-2" aria-hidden="true"></i>Copy Link
</button>
</li>
</ul>
</div>
<!-- Improve / Report — opens the page-feedback widget (assets/js/page-feedback.js).
Progressive enhancement: this is a real link to the issue form, so it
works without JavaScript; page-feedback.js intercepts [data-pf-open]
clicks and opens the richer capture modal (context + logs + AI) instead. -->
<a class="btn btn-sm btn-success bd-intro-action-link"
href="https://github.com/bamr87/zer0-mistakes/issues/new?template=page_improvement.yml&labels=page-feedback"
data-pf-open
target="_blank"
rel="noopener noreferrer"
title="Report a problem or suggest an improvement for this page">
<i class="bi bi-megaphone" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Improve</span>
</a>
<!-- Edit on GitHub Button -->
<a href="https://github.com/bamr87/zer0-mistakes/blob/main/pages/_docs/customization/index.md"
class="btn btn-sm btn-dark bd-intro-action-link"
target="_blank"
rel="noopener noreferrer">
<i class="bi bi-github" aria-hidden="true"></i>
<span class="d-none d-sm-inline ms-1">Edit on GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- =============================== -->
<!-- RIGHT SIDEBAR - Table of Contents -->
<!-- =============================== -->
<!-- Page outline, shortcuts, and related links (hidden on mobile) -->
<div class="bd-toc text-body-secondary">
<!--
file: sidebar-right.html
path: _includes/sidebar-right.html
includes: nav_list.html, content/toc.html
--><!-- FOUC guard: apply hidden TOC preference before paint -->
<script>
try {
if (localStorage.getItem('zer0-nav-toc-visible') === 'false') {
document.documentElement.classList.add('bd-toc-pref-hidden');
}
} catch (e) {}
</script>
<!-- Right sidebar container -->
<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
<div class="offcanvas-header">
<h2 class="offcanvas-title h5 mb-0" id="tocLabel">Table of Contents</h2>
<div class="d-flex align-items-center gap-1">
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-lg-none px-2"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents">
<i class="bi bi-eye-slash" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close table of contents" data-bs-target="#tocContents"></button>
</div>
</div>
<div class="offcanvas-body">
<!-- Table of contents -->
<nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
<!-- TOC title -->
<div class="mb-3 d-flex align-items-center justify-content-between gap-2">
<strong class="d-flex align-items-center mb-0">
<i class="bi bi-file-text me-2" aria-hidden="true"></i>
On this page
</strong>
<button type="button"
class="btn btn-sm btn-link text-body-secondary bd-toc-visibility-toggle d-none d-lg-inline-flex flex-shrink-0 px-1"
aria-controls="tocContents"
aria-expanded="true"
aria-label="Hide table of contents"
title="Hide table of contents">
<i class="bi bi-layout-sidebar-inset-reverse" aria-hidden="true"></i>
<span class="visually-hidden">Hide table of contents</span>
</button>
</div>
<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><li class="list-group-item"><a href="#technical-reference" class="">Technical Reference</a></li><li class="list-group-item"><a href="#see-also" class="">See also</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">preview</span><span class="pi">:</span> <span class="s">/images/previews/customization.png</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-text 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>
<h2 id="technical-reference">Technical Reference</h2>
<p>For contributor-level details (SCSS architecture, design token catalog, fork-safe extension patterns):</p>
<ul>
<li><a href="https://github.com/bamr87/zer0-mistakes/blob/main/docs/ui/extending.md">Extending the Theme → docs/ui/extending.md</a></li>
<li><a href="https://github.com/bamr87/zer0-mistakes/blob/main/docs/ui/customization.md">UI Customization → docs/ui/customization.md</a></li>
</ul>
<h2 id="see-also">See also</h2>
<ul>
<li>[[Bootstrap Integration]]</li>
<li>[[Features]]</li>
<li>[[Liquid]]</li>
<li>[[Jekyll]]</li>
</ul>
</div>
</div>
</div>
</div>
</article>
Step 2: Use the Layout
---
title: "Getting Started Tutorial"
layout: tutorial
difficulty: beginner
estimated_reading_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)
- Local graph: Obsidian side panel (rendered at body level via footer.html)
- 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
Customize the Zer0-Mistakes Jekyll theme - layouts, styles, navigation, and more.
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"
preview: /images/previews/customization.png
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
Technical Reference
For contributor-level details (SCSS architecture, design token catalog, fork-safe extension patterns):
See also
- [[Bootstrap Integration]]
- [[Features]]
- [[Liquid]]
- [[Jekyll]]
` | 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
Reference
- Jekyll Layouts Documentation
- Liquid Template Language
- CSS Grid Mastery (tutorial) — build custom two-dimensional layouts with live, in-browser examples
Technical Reference
For contributor-level details (layout hierarchy, Liquid template inheritance, sidebar wiring):
See also
- [[Customization]]
- [[Include Components]]
- [[Liquid]]