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-content='page.title'></title>
 6        <meta name='description' ht-attrs='content:page.description,site.description'>
 7    </head>
 8    <body>
 9        <header>
10            <h1 ht-content='page.title'>Placeholder title</h1>
11        </header>
12        <article id='article' ht-content='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.

Edit this page on GitHub

💬 Join the community

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