Layouts

Overview


A HyperTemplates layout is an HTML document. Generally speaking, a HyperTemplates layout is an HTML document template with at least one HyperTemplates attribute, but this is not a hard requirement.

HyperTemplates layouts are the most important building block in the HyperTemplates templating system.

Example


This example shows a simple HyperTemplates layout.

layouts/default.html
 1<!DOCTYPE html>
 2<html lang='en-US'>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title ht-apply>${ page.title, site.title }</title>
 6        <meta ht-apply name='description' content='${ page.description, site.description }'>
 7    </head>
 8    <body>
 9        <header>
10            <h1 ht-apply>${ page.title, "Placeholder title" }</h1>
11        </header>
12        <article ht-apply id='article'>${ markdown(page.content) }</article>
13        <footer>
14            <p>&copy; 2024 HyperTemplates</p>
15        </footer>
16    </body>
17</html>

Specification


Valid HTML


Layouts must be valid HTML documents. That's technically the entire specification. From a practical perspective a HyperTemplates layout is a valid HTML document with at least one template attribute. To learn more about how to develop HyperTemplates layouts, please visit the HyperTemplates attribute reference.

💬 Join the community

Stay up-to-date with the latest releases and other news from the Team behind HyperTemplates. Ask the developers questions, get help from the community, and share your creations! 🎨