Introducing: ht-apply (part 2)

Attribute Templating Tutorial

Goal

In this lesson we will template HTML element attributes using HyperTemplates.

What is attribute templating?

HTML attributes adjust the behavior or display of an HTML element. One of the most well known attributes is the href. It is used to configure the destination for a hyperlink, like this example:

1<a href='https://example.com'>click here</a>

Have you noticed that links on some websites open in a new tab? That's accomplished using the target attribute!

1<a href='https://example.com' target='_blank'>click here</a>

HyperTemplates makes it easy to template HTML element attributes using the ht-apply directive and ${ ... } formatted template variables. Let's see it in action in the following exercises. 🏋️‍♂️

Exercises

EXERCISE 1: Create attribute templates

Create attribute templates.

Let's add a description metadata element to our layout template.

layouts/default.html

 1<html lang='en-US'>
 2    <head>
 3        <meta charset='utf-8'>
 4        <title ht-apply>${ title, "Learn HyperTemplates" }</title>
 5        <meta ht-apply name='description' content='${ description }'>
 6    </head>
 7    <body>
 8        <main>
 9            <article ht-apply>${ markdown(content) }</article>
10        </main>
11    </body>
12</html>

Frontmatter properties in a Markdown document are accessible to HyperTemplates as template data properties. In this example we have templated the <meta> description element using the ht-apply directive and a template variable. The content='${ description } value tells HyperTemplates to set the <meta> element's content attribute to the value of ${ description } property from our template data (index.md).

Small but mighty! 💪

The ht-apply directive can be used to add multiple attributes to a single HTML element. This is really helpful because attributes are the primary interface for configuring HTML element appearance and behavior. 💥

OK, let's move on to step 2 to create a new page that includes a description.

EXERCISE 2: Create a new page

Create a new page with a description.

Let's add a description property to our page:

content/index.md

1---
2title: Introduction to HTML templating
3description: My first HyperTemplates page!
4---
5  
6## Hello, world
7  
8This is my first HyperTemplates content!

Render the page to see the description <meta> tag populated, then refresh your browser to see what changed.

1hyperctl dev render -d content/index.md -l layouts/default.html > index.html

To view the description in a browser, hover over the browser tab, or use "view source" to inspect the rendered HTML. Otherwise, just open index.html in your text editor.

Discussion

In this lesson, we learned how to template HTML element attributes using the small but mighty ht-apply directive. We can already build some pretty interesting templates using only ht-apply!

As you start imaging the more complex layout templates you might build with HyperTemplates, you might start to have questions about how to show or hide some content based on the template data. And that is exactly what we'll cover in the next lesson!

Core Concepts

Learn more about the concepts in this lesson:

Directives reference

ht-apply directive

Template variables

Data reference

Markdown reference

CLI reference

Do you have any questions and/or feedback about ht-apply or this "Learn HyperTemplates" tutorial? Join the @hypertexting.community and visit the "Getting Started" category. 💬

When you're ready, let's go ahead and move on to lesson 3. 👉

← PREV
Lesson 1: Introducing ht-apply (part 1)

NEXT →
Lesson 3: Introducing ht-if

Attribute Templating Tutorial

Goal

What is attribute templating?

Exercises

Discussion

💬 Join the community