Working with Templates
On this page
Basic Layout Template
Here's a starter template for templates/layout.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{metadata.title}} | {{site.siteTitle}}</title>
<meta name="description" content="{{metadata.description}}" />
<link rel="stylesheet" href="/content/themes/{{theme.name}}/assets/css/style.css" />
</head>
<body
class="
{{#if homeRoute}}home-page{{/if}}
{{#if contentRoute}}content-page {{fileType}}-page{{/if}}
{{#if taxonomyRoute}}taxonomy-page {{taxonomyType}}-archive{{/if}}
{{#if isCustomPage}}custom-page{{/if}}
"
>
<header>
<div class="container">
<a href="/" class="logo">{{site.siteTitle}}</a>
<nav>
<!-- Using the generated menu HTML -->
{{html_menu}}
</nav>
</div>
</header>
<main class="container">{{content}}</main>
<footer>
<div class="container">
<p>© {{year}} {{site.siteTitle}}. All rights reserved.</p>
{{#if site.footerCode}}
<p>{{site.footerCode}}</p>
{{/if}}
</div>
</footer>
<!-- Aether Bar for logged-in users -->
{{html_aetherBar}}
</body>
</html>
Post Template
Here's an example templates/post.html:
{{#include("partials/head.html")}}
<article class="post">
<header class="post-header">
<h1>{{metadata.title}}</h1>
{{#if metadata.subtitle}}
<h2 class="subtitle">{{metadata.subtitle}}</h2>
{{/if}}
<div class="post-meta">
<time datetime="{{metadata.createdAt}}" class="date">
{{metadata.createdAt | dateFormat("MMMM D, YYYY")}}
</time>
{{#if metadata.author}}
<span class="author">by {{metadata.author}}</span>
{{/if}}
<!---->
{{#if metadata.category}}
<span class="category">
<!-- Showing slugify filter usage (not needed here since metadata.category is already slugified) -->
<a href="/category/{{metadata.category | slugify}}">{{metadata.category}}</a>
</span>
{{/if}}
</div>
</header>
{{#if metadata.featuredImage}}
<div class="featured-image">
<img
src="/content/uploads{{metadata.featuredImage.url}}"
alt="{{metadata.featuredImage.alt |
defaults(metadata.title)}}"
title="{{metadata.featuredImage.caption ? metadata.featuredImage.caption : ``}}"
/>
{{#if metadata.featuredImage.caption}}
<figcaption>{{metadata.featuredImage.caption}}</figcaption>
{{/if}}
</div>
{{/if}}
<div class="post-content">{{content}}</div>
{{#if metadata.tags}}
<div class="post-tags">
<h3>Tags:</h3>
<div class="tags-list">
{{#each metadata.tags}}
<a href="/tag/{{this | slugify}}" class="tag">{{this}}</a>
{{/each}}
</div>
</div>
{{/if}}
<!---->
{{#if metadata.relatedPostsData}}
<section class="related-posts">
<h3>Related Posts</h3>
<div class="posts-grid">
{{#each metadata.relatedPostsData}}
<article class="post-card">
<h4><a href="/post/{{slug}}">{{title}}</a></h4>
{{#if subtitle}}
<p class="subtitle">{{subtitle}}</p>
{{/if}}
<!---->
{{#if featuredImage}}
<div class="card-image">
<img src="/content/uploads{{featuredImage.url}}" alt="{{featuredImage.alt | defaults(title)}}" />
</div>
{{/if}}
<!---->
{{#if excerpt}}
<p class="excerpt">{{excerpt}}</p>
{{/if}}
<a href="/post/{{slug}}" class="read-more">Read More</a>
</article>
{{/each}}
</div>
</section>
{{/if}}
<nav class="post-navigation">
{{#if prevPost}}
<div class="nav-prev">
<span class="nav-label">Previous Post</span>
<a href="/post/{{prevPost.slug}}" class="nav-link">{{prevPost.title}}</a>
</div>
{{/if}}
<!---->
{{#if nextPost}}
<div class="nav-next">
<span class="nav-label">Next Post</span>
<a href="/post/{{nextPost.slug}}" class="nav-link">{{nextPost.title}}</a>
</div>
{{/if}}
</nav>
</article>
{{#include("partials/footer.html")}}
Page Template
Here's an example templates/page.html:
{{#include("partials/head.html")}}
<article class="page">
<header class="page-header">
<h1>{{metadata.title}}</h1>
{{#if metadata.subtitle}}
<h2 class="subtitle">{{metadata.subtitle}}</h2>
{{/if}}
</header>
{{#if metadata.featuredImage}}
<div class="featured-image">
<img
src="/content/uploads{{metadata.featuredImage.url}}"
alt="{{metadata.featuredImage.alt | defaults(metadata.title)}}"
/>
</div>
{{/if}}
<div class="page-content">{{content}}</div>
{{#if metadata.updatedAt}}
<div class="page-meta">
<p class="last-updated">Last updated: {{metadata.updatedAt | dateFormat("MMMM D, YYYY")}}</p>
</div>
{{/if}}
</article>
{{#include("partials/footer.html")}}
Category/Tag Archive Template
Example templates/taxonomy.html for category/tag archives:
{{#include("partials/head.html")}}
<div class="taxonomy-archive">
<header class="archive-header">
<h1>{{metadata.title | defaults(taxonomyType - taxonomyTerm )}}</h1>
{{#if metadata.subtitle}}
<p class="subtitle">{{metadata.subtitle}}</p>
{{#elseif taxonomyType == "category"}}
<p class="subtitle">Posts in the {{taxonomyTerm}} category</p>
{{#elseif taxonomyType == "tag"}}
<p class="subtitle">Posts tagged with {{taxonomyTerm}}</p>
{{/if}}
<!---->
{{#if metadata.description}}
<div class="archive-description">{{metadata.description}}</div>
{{/if}}
</header>
{{#if content}}
<div class="archive-content">{{content}}</div>
{{/if}}
<!---->
{{#if posts}}
<div class="posts-grid">
{{#each posts}}
<article class="post-card">
{{#if metadata.featuredImage}}
<div class="card-image">
<a href="/post/{{metadata.slug}}">
<img
src="/content/uploads{{metadata.featuredImage.url}}"
alt="{{metadata.featuredImage.alt | defaults(metadata.title)}}"
/>
</a>
</div>
{{/if}}
<div class="card-content">
<h2 class="card-title">
<a href="/post/{{metadata.slug}}">{{metadata.title}}</a>
</h2>
{{#if metadata.subtitle}}
<h3 class="card-subtitle">{{metadata.subtitle}}</h3>
{{/if}}
<div class="card-excerpt">
{{#if metadata.excerpt}} {{metadata.excerpt | truncate(150)}} {{#else}} {{content | truncate(150)}}
{{/if}}
</div>
<div class="card-meta">
<time datetime="{{metadata.createdAt}}">{{metadata.createdAt | dateFormat("MMM D, YYYY")}}</time>
{{#if metadata.author}}
<span class="author">by {{metadata.author}}</span>
{{/if}}
</div>
<a href="/post/{{metadata.slug}}" class="read-more">Read More</a>
</div>
</article>
{{/each}}
</div>
{{#if pagination}}
<nav class="pagination" aria-label="Pagination Navigation">
{{#if pagination.prevPage}}
<a href="{{pagination.urls.prev}}" class="pagination-prev" rel="prev">« Previous</a>
{{/if}}
<span class="pagination-info">Page {{pagination.currentPage}} of {{pagination.totalPages}}</span>
{{#if pagination.nextPage}}
<a href="{{pagination.urls.next}}" class="pagination-next" rel="next">Next »</a>
{{/if}}
</nav>
{{/if}}
<!---->
{{#else}}
<div class="no-posts">
<p>No posts found in this {{taxonomyType}}.</p>
</div>
{{/if}}
</div>
{{#include("partials/footer.html")}}
Custom Homepage Template
Example custom/homepage.html:
{{#include("partials/head.html")}}
<div class="homepage">
<section class="hero">
<div class="container">
<h1>{{site.siteTitle}}</h1>
{{#if site.siteDescription}}
<p class="tagline">{{site.siteDescription}}</p>
{{/if}}
</div>
</section>
{{#if content}}
<section class="intro">
<div class="container">{{content}}</div>
</section>
{{/if}}
<!---->
{{#if posts}}
<section class="latest-posts">
<div class="container">
<h2>Latest Posts</h2>
<div class="posts-grid">
{{#each posts}}
<article class="post-card">
{{#if metadata.featuredImage}}
<div class="card-image">
<a href="/post/{{metadata.slug}}">
<img
src="/content/uploads{{metadata.featuredImage.url}}"
alt="{{metadata.featuredImage.alt | defaults(metadata.title)}}"
/>
</a>
</div>
{{/if}}
<div class="card-content">
<h3 class="card-title">
<a href="/post/{{metadata.slug}}">{{metadata.title}}</a>
</h3>
<div class="card-excerpt">
{{#if metadata.excerpt}} {{metadata.excerpt}} {{#else}} {{content | truncateWords(25)}}
{{/if}}
</div>
<div class="card-meta">
<time datetime="{{metadata.createdAt}}">
{{metadata.createdAt | dateFormat("MMM D, YYYY")}}
</time>
</div>
<a href="/post/{{metadata.slug}}" class="read-more">Read More</a>
</div>
</article>
{{/each}}
</div>
<div class="view-all">
<a href="/blog" class="btn-primary">View All Posts</a>
</div>
</div>
</section>
{{/if}}
</div>
{{#include("partials/footer.html")}}
Custom Blog Template with Pagination
Example custom/blog.html for paginated blog listing:
{{#include("partials/head.html")}}
<div class="blog-page">
<header class="page-header">
<div class="container">
<h1>{{metadata.title | defaults("Blog")}}</h1>
{{#if metadata.subtitle}}
<p class="subtitle">{{metadata.subtitle}}</p>
{{/if}}
</div>
</header>
{{#if content}}
<section class="page-intro">
<div class="container">{{content}}</div>
</section>
{{/if}}
<section class="blog-posts">
<div class="container">
{{#if posts}}
<div class="posts-list">
{{#each posts}}
<article class="post-summary">
<div class="post-content">
<header>
<h2 class="post-title">
<a href="/post/{{metadata.slug}}">{{metadata.title}}</a>
</h2>
{{#if metadata.subtitle}}
<h3 class="post-subtitle">{{metadata.subtitle}}</h3>
{{/if}}
</header>
<div class="post-meta">
<time datetime="{{metadata.createdAt}}">
{{metadata.createdAt | dateFormat("MMMM D, YYYY")}}
</time>
{{#if metadata.author}}
<span class="author">by {{metadata.author}}</span>
{{/if}}
<!---->
{{#if metadata.category}}
<span class="category">
in
<a href="/category/{{metadata.category | slugify}}">{{metadata.category}}</a>
</span>
{{/if}}
</div>
<div class="post-excerpt">
{{#if metadata.excerpt}} {{metadata.excerpt}} {{#else}} {{content | truncateWords(50)}}
{{/if}}
</div>
{{#if metadata.tags}}
<div class="post-tags">
{{#each metadata.tags}}
<a href="/tag/{{this | slugify}}" class="tag">{{this}}</a>
{{/each}}
</div>
{{/if}}
<a href="/post/{{metadata.slug}}" class="read-more">Continue Reading</a>
</div>
{{#if metadata.featuredImage}}
<div class="post-image">
<a href="/post/{{metadata.slug}}">
<img
src="/content/uploads{{metadata.featuredImage.url}}"
alt="{{metadata.featuredImage.alt | defaults(metadata.title)}}"
/>
</a>
</div>
{{/if}}
</article>
{{/each}}
</div>
{{#if pagination}} {{#include("partials/pagination.html")}} {{/if}}
<!---->
{{#else}}
<div class="no-posts">
<p>No blog posts have been published yet.</p>
</div>
{{/if}}
</div>
</section>
</div>
{{#include("partials/footer.html")}}