Modular Pages

Modular/Composite Pages

Modular pages let you compose a single page from multiple content sections, each in its own _-prefixed subdirectory. This is useful for landing pages, feature showcases, and structured layouts.

Directory Structure

content/01.home/
  modular.md              # Parent page (template: modular)
  _hero/default.md        # Hero section module
  _features/default.md    # Features section module
  _cta/default.md         # Call-to-action module

Each _-prefixed directory must contain a recognized index file (default.md, README.md, or index.md). Directories without an index file are ignored.

Module Properties

Each module in page.modules has:

Property	Type	Description
name	string	Module name from directory (e.g., "hero" from _hero)
title	string	Module title from frontmatter
content	string	Rendered HTML content (use | safe to display)
custom	object	Custom frontmatter fields

Module Ordering

Modules are sorted by menu.order (ascending), then alphabetically by name. Use menu.order in module frontmatter to control display order:

---
title: Hero Section
menu:
  order: 1
---

Template Usage

Iterate all modules in order:

{% for module in page.modules %}
<section class="module module-{{ module.name }}">
    <h2>{{ module.title }}</h2>
    {{ module.content | safe }}
</section>
{% endfor %}

Access a specific module by name:

{% for module in page.modules %}
    {% if module.name == "hero" %}
    <div class="hero">{{ module.content | safe }}</div>
    {% endif %}
{% endfor %}

Use custom frontmatter from modules:

{% for module in page.modules %}
    {% if module.custom.background_color is defined %}
    <section style="background: {{ module.custom.background_color }}">
    {% else %}
    <section>
    {% endif %}
        {{ module.content | safe }}
    </section>
{% endfor %}

Key Behaviors

• Modules are not routable – they have no independent URL and do not appear in navigation or all_pages
• Modules and child pages can coexist in the same directory
• _-prefixed files (not directories) remain skipped
• .-prefixed (hidden) directories remain skipped entirely
• Pages without _-prefixed subdirectories work unchanged (backward compatible)

The default theme includes a modular.html.jinja template that demonstrates this feature. Set template: modular in your page frontmatter to use it.