Documentation › Themes

Themes

Guide Tutorial

Themes

Themes control how your blog looks. Simple folder-based system with HTML templates and CSS.

Using Themes

Set theme in zeno.config.json:

{
  "title": "My Blog",
  "theme": "classy"
}

Build and your theme is applied automatically.

Built-in Themes

default

Clean, minimal theme for blogs

{ "theme": "default" }

classy

Modern, elegant theme with dark mode

{ "theme": "classy" }

docs

Documentation-focused with sidebar and TOC

{ "theme": "docs" }

Theme Structure

themes/my-theme/
├── index.html       # Homepage template
├── post.html        # Single post template
├── style.css        # Theme styles
└── components/      # Reusable parts
    ├── navbar.html
    ├── footer.html
    └── posts.html

Templates

Homepage (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  %navbar%
  <main>
    %posts%
  </main>
  %footer%
</body>
</html>

Post Page (post.html)

<!DOCTYPE html>
<html>
<head>
  <title>{{post_title}} - {{title}}</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
  %navbar%
  <article>
    <h1>{{post_title}}</h1>
    <time>{{date}}</time>
    <div class="content">
      {{content}}
    </div>
  </article>
  %footer%
</body>
</html>

Placeholders

Placeholder Description Where
{{title}} Site title Any template
{{post_title}} Post title Post template
{{date}} Post date Post template
{{content}} Post HTML Post template
{{excerpt}} Post preview Posts component
{{slug}} Post URL slug Posts component

Components

Components are reusable HTML snippets:

Posts List (components/posts.html)

<article class="post-preview">
  <h2><a href="/post/{{slug}}">{{post_title}}</a></h2>
  <time>{{date}}</time>
  <p>{{excerpt}}</p>
</article>

Navigation (components/navbar.html)

<nav>
  <a href="/">{{title}}</a>
  <div class="nav-links">
    <a href="/">Home</a>
    <a href="/about.html">About</a>
  </div>
</nav>

Use components with %component-name%:

%navbar%    <!-- Includes navbar.html -->
%posts%     <!-- Includes posts.html -->
%footer%    <!-- Includes footer.html -->

Creating a Theme

  1. Create theme folder:
mkdir themes/my-theme
  1. Add required files:
themes/my-theme/
├── index.html
├── post.html
└── style.css
  1. Use in config:
{ "theme": "my-theme" }
  1. Build and test:
zeno build
zeno serve

Theme Tips

  • Start simple - Copy default theme and modify
  • Test locally - Use zeno serve for live preview
  • Mobile first - Design for small screens
  • Use components - Keep templates DRY
  • CSS in style.css - Keep styles organized
✏️ Edit this page