Conditional Templating Tutorial
Goal
In this lesson we will add some conditional logic to our layout template and learn how to show or hide content based on template data.
What is conditional templating?
The ability to show or hide content based on some condition becomes more important as a website grows over time. As new pages are added there will inevitably be some minor differences between pages that otherwise share the same basic structure and style. Without the ability to conditionally show or hide some portion of the layout based on the page contents, we would need multiple layout templates for very similar page types to accomodate the various differences that naturally occur from one page to another. This is the problem that conditional templating solves.
Most HTML templating systems are based on a more traditional programming language than HTML.
The added complexity introduced by having to learn a new language in order to write simple HTML temlpates is a tradeoff for access to features like if...else, for...in, and for...of logic.
Let's see how HyperTemplates handles conditional templating with the ht-if attribute.
Exercises
- EXERCISE 1: Add template conditions
- Use the
ht-ifattribute to show a<header>and<footer>if thetitleandcopyrightproperties are present in the template data.layouts/default.html 1<html lang='en-US'> 2 <head> 3 <meta charset='utf-8'> 4 <title ht-content='title'>Learn HyperTemplates</title> 5 <meta name='description' ht-attrs='content:description'> 6 </head> 7 <body> 8 <header ht-if='title'> 9 <h1 ht-content='title'></h1> 10 </header> 11 <main> 12 <article ht-content='markdown:content'> 13 <h2>Hello, world</h2> 14 <p> 15 This is an <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>HTML</a> layout! 16 </p> 17 </article> 18 </main> 19 <footer ht-if='copyright'> 20 © <span ht-content='copyright'>2024</span> • Powered by HyperTemplates™ 21 </footer> 22 </body> 23</html>We've added two new content sectioning elements:
<header>and<footer>. We've also added some conditional logic to our template by configure theht-ifattribute on both of these elements. Theht-ifattribute retains HTML elements if the configured condition is true. If the condition is false, the entire element – including any child elements – will be removed from the page. Let's take a closer look at the two conditionals we added:<header ht-if="title">: retain if a property namedtitleis provided<footer ht-if="copyright">: retain if a property namedfooteris provided
Let's render the page again, then refresh the browser or view the updated
index.htmlfile to see what changed.1hyperctl render -d content/index.md -l layouts/default.html > index.htmlDid you notice? The
<header>element was retained in the rendered HTML, but the<footer>element was removed! That's because our template data (content/index.md) only hastitle,description, andcontentproperties. - EXERCISE 2: Show conditional content
- Let's add a
copyrightproperty to our page to show the conditional<footer>element from step 1 above.content/index.md 1--- 2title: Introduction to HTML templating 3description: My first HyperTemplates page! 4coyright: 2025 Acme Inc 5--- 6 7## Hello, world 8 9This is my first HyperTemplates content!Now let's render the page again, then refresh the browser or view the updated
index.htmlfile to see what changed.1hyperctl render -d content/index.md -l layouts/default.html > index.htmlIf you see the footer then you're ready to move on to the next lesson. 🙌
Discussion
In this lesson, we added a <header> and <footer> to our layout and we learned how to dynamically show or hide content using the ht-if attribute.
Adding conditional logic facilitates template reuse ♻️ and makes our websites easier to reason about.
Our example layout template is already well on its way to becoming something we could actually use for a real website. As we continue to improve our layout it will naturally become more complex. It would be great if we could break it up into smaller pieces, and that's exactly what we'll cover in the next lesson. 👟
Core Concepts
Learn more about the concepts in this lesson:
Do you have any questions and/or feedback about ht-if 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 4. 👉
Lesson 2: Introducing ht-attrs
Lesson 4: Introducing ht-include