ht-block attribute reference
Overview
The ht-block attribute progressively enhances a custom element.
PROTIP: the
ht-blockattribute is the only template attribute that is accessible from your content. ✨The
ht-blockattribute was heavily inspired by Hugo Shortcodes and is intended to be used for inserting custom elements into your content. This effectively exposes a subset of HyperTemplates templating capabilities to content management systems (i.e. whereever you edit content that will be rendered using HyperTemplates).
Specification
This example shows the ht-block attribute being used to enhance a Markdown code block.
1### Example
2-----------
3
4This example shows the `ht-content` attribute being used to template the `<title>` and `<h1>` elements.
5
6<code-snippet ht-block filename='layout.html' highlight='5,9' with-line-numbers>
7
8```html
9<!DOCTYPE html>
10<html>
11 <head>
12 <meta charset='utf-8'>
13 <title ht-content='page.title,site.title'>Placeholder Title</title>
14 </head>
15 <body>
16 <header>
17 <h1 ht-content='page.title'>Hello, world.</h1>
18 </header>
19 <article>
20 <p>Lorem ipsum, hipsters get some.</p>
21 </article>
22 </body>
23</html>
24```
25
26</code-snippet>
In fact, this example is an excerpt from the ht-content reference documentation content file.
Supported elements
The ht-block attribute was designed to be used with custom elements.
Attribute syntax
The ht-block attribute is an HTML boolean attribute.
If it it set, HyperTemplates will process the element as a nested layout template.
Custom element include sources
HyperTemplates processes HTML elements with the ht-block attribute as nested layout templates.
In practice, ht-block elements are what you might expect if you combined ht-include and ht-template.
ht-block differs from ht-include in that ht-block tag names are used to lookup external sources.
Example
1<newsletter-signup ht-block></newsletter-signup>
In this example Markdown document, the ht-block attribute will cause HyperTemplates to replace the newsletter-signup element with the rendered contents of elements/newsletter-signup.html.
Custom element template data
HyperTemplates processes HTML elements with the ht-block attribute as nested layout templates.
In practice, ht-block elements are what you might expect if you combined ht-include and ht-template.
ht-block differs from ht-template in how their respective template data objects are constructed.
The ht-block attribute will cause HyperTemplates to construct a template data object using the placeholder element attributes as template data properties, plus a single property called content with the body of the element as its value.
Example
1<pull-quote ht-block cite='Caleb Hailey'>
2
3The HyperTemplates `ht-block` attribute is fun and useful.
4
5</pull-quote>
In this example Markdown document, the ht-block attribute will cause HyperTemplates to render the layout of elements/pull-quote.html with a template data object containing two properties: cite and content.
1{
2 cite: "Caleb Hailey",
3 content: "<p>The HyperTemplates <code>ht-block</code> attribute is fun and useful.</p>"
4}