Conditionals

LiteNode's template engine supports {{#if}}, {{#else}}, {{#elseif}}, and {{#not}} directives. They let you show or hide markup based on values in the data object.

How it works

Each route passes a data object to res.render(). Any truthy property in that object can drive a conditional in the template.

For example, if the homepage route passes entryRoute: true, the template can check for it:

{{#if entryRoute}}
  <p>You're on the homepage.</p>
{{#else}}
  <p>You're somewhere else.</p>
{{/if}}

A property that's truthy for one route is simply absent (falsy) for all others — you don't need to explicitly set it to false on every other route.

Tag each route

Add a route identifier to each res.render() call:

// Entry route
res.render("layouts/index.html", {
    title,
    description,
    html_content,
    entryRoute: true, // ← identifies this route
})

// Tutorial route
res.render("layouts/index.html", {
    title,
    description,
    html_content,
    tutorialRoute: true, // ← identifies this route
})

Use conditionals in templates

Load assets only where needed

The highlight.js stylesheet is only useful on pages that display code. Load it conditionally:

{{#if tutorialRoute}}
    <link rel="stylesheet" href="/static/css/a11y-dark.min.css" />
{{/if}}

Or use {{#not}} to express the inverse:

{{#not entryRoute}}
    <link rel="stylesheet" href="/static/css/a11y-dark.min.css" />
{{/not}}

Both are equivalent if you only have two routes. Use whichever reads more clearly.

Render different main content

The main layout can switch between entirely different content blocks:

{{#if entryRoute}}
  {{#include("components/main-homepage.html")}}
{{#elseif notFoundRoute}}
  {{#include("components/main-not-found.html")}}
{{#else}}
  {{#include("components/main-tutorial.html")}}
{{/if}}

Supported operators

Conditions support comparison operators:

{{#if html_toc}}
  {{html_toc}}
{{/if}}

{{#if role == "admin"}}
  <a href="/admin">Admin panel</a>
{{/if}}

{{#if score >= 90 && attempts < 3}}
  <p>Excellent!</p>
{{/if}}

Available operators: ==, !=, >, <, >=, <=, &&, ||.

The result

With conditionals you have one layout file that adapts to every route. The homepage gets its hero section. Tutorial pages get the sidebar and TOC. The 404 page gets a simple message. All from the same index.html.