Conditionals

Use conditional statements to control what content appears in your templates based on variables and conditions.

Experimental Feature: Conditional statements are currently experimental. The syntax and behavior may change in future versions. Use with caution and check for updates.

Introduction

Hammer's conditional statements allow you to show or hide content based on variables and conditions. This enables you to create dynamic templates that adapt to different contexts.

Conditionals help you:

  • Control content visibility based on variables
  • Create dynamic, context-aware templates
  • Build flexible component systems
  • Conditionally render content without JavaScript

If Statements

Use @if to conditionally show content when a condition is true:

<!-- @var showHeader = true -->
<!-- @if showHeader -->
<header>
    <nav>Navigation</nav>
</header>
<!-- @endif -->

The content between @if and @endif will only be rendered if the condition is true.

Unless Statements

Use @unless to conditionally show content when a condition is false:

<!-- @var hideFooter = false -->
<!-- @unless hideFooter -->
<footer>
    <p>Copyright © 2024</p>
</footer>
<!-- @endunless -->

The content between @unless and @endunless will only be rendered if the condition is false.

Else Blocks

You can use @else to provide alternative content when a condition is not met:

<!-- @var isLoggedIn = true -->
<!-- @if isLoggedIn -->
<p>Welcome back!</p>
<!-- @else -->
<p>Please log in</p>
<!-- @endif -->

The @else block is executed when the condition is false, providing a way to show alternative content.

Examples

Basic Conditional

<!-- @var showHeader = true -->
<!-- @if showHeader -->
<header>
    <h1>My Site</h1>
</header>
<!-- @endif -->

With Else Block

<!-- @var userRole = "admin" -->
<!-- @if userRole == "admin" -->
<div class="admin-panel">
    <!-- Admin content -->
</div>
<!-- @else -->
<div class="user-panel">
    <!-- Regular user content -->
</div>
<!-- @endif -->

Unless Example

<!-- @var isMaintenanceMode = false -->
<!-- @unless isMaintenanceMode -->
<main>
    <!-- Site content -->
</main>
<!-- @endunless -->

Best Practices

Conditional Logic

  • Always close conditional blocks with the appropriate end tag (@@endif or @@endunless)
  • Use descriptive variable names for conditions
  • Keep conditional logic simple and readable
  • Avoid deeply nested conditionals when possible

Variable Management

  • Define variables at the top of your file
  • Use boolean variables for simple true/false conditions
  • Ensure variables are set before being used in conditionals
  • Document complex conditional logic

Performance

  • Conditionals are processed at build time, not runtime
  • Only the selected content is included in the final output
  • Complex conditionals may increase build time
  • Test conditionals thoroughly during development

Next Steps

Now that you understand conditionals, learn about:

  • Variables for dynamic content that works with conditionals
  • Hammer Includes to combine with conditional rendering
  • Todos for tracking conditional improvements