Custom Templates

Zolastrap's template system is built on Zola's Tera template engine, offering maximum flexibility.

Template Inheritance

All templates extend base.html which provides:

• Bootstrap 5 CSS and JS
• FontAwesome icons
• Theme switcher support
• Color scheme switcher
• Search integration
• Responsive navbar and footer

Available Templates

Creating a New Template

Step 1: Create the Template File

Create templates/portfolio.html:

{% extends "base.html" %}

{% block title %}{{page.title}} | {{config.title}}{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <h1>{{page.title}}</h1>
            <div class="my-4">
                {{page.content | safe}}
            </div>
        </div>
    </div>
</div>
{% endblock %}

Step 2: Use in Content

---
title: "My Portfolio"
template: "portfolio.html"
---

Your portfolio content here...

Reusable Macros

Zolastrap includes reusable macros in templates/macros/:

• post.html - Article card display
• posts.html - Article list
• carousel.html - Image carousel
• paginator.html - Pagination
• authorbox.html - Author bio box
• image.html - Image handling
• info.html - Article metadata
• summary.html - Article excerpt
• header.html - Section headers

Using Macros

{% import "macros/post.html" as post %}
{% import "macros/posts.html" as posts %}

{{post::render(page=page, type="vertical")}}

{{posts::render(pages=section.pages, type="carousel")}}

Template Variables

Page Variables

• page.title - Page title
• page.content - Page content (rendered HTML)
• page.permalink - Full URL
• page.date - Publication date
• page.taxonomies - Tags and authors
• page.extra - Custom frontmatter data

Section Variables

• section.title - Section name
• section.pages - All pages in section
• section.subsections - Child sections

Config Variables

• config.title - Site title
• config.base_url - Base URL
• config.extra - Extra config

Advanced: Custom Post Types

Add new display types in macros/post.html:

{% elif type == "masonry" %}
    <div class="masonry-item">
        {{image::render(src=page.extra.image, alt=page.title)}}
        <div class="masonry-content">
            {{info::render(page=page)}}
        </div>
    </div>

Use in config:

[extra]
home = [
    {section = "articles", type = "masonry"}
]