Advanced Template Techniques

Using STE Filters Effectively

LiteNode's STE provides many powerful filters. Here are practical examples:

<!-- Date formatting with different styles -->
<time datetime="{{metadata.createdAt}}">{{metadata.createdAt | dateFormat("MMMM D, YYYY")}}</time>
<span class="time-ago">{{metadata.createdAt | timeAgo}}</span>

<!-- Creating SEO-friendly URLs -->
<a href="/tag/{{tagName | slugify}}">{{tagName}}</a>
<a href="/category/{{metadata.category | slugify}}">{{metadata.category}}</a>

<!-- Formatting and displaying numbers -->
<span class="price">{{product.price | currency("$")}}</span>
<span class="file-size">{{attachment.size | fileSize}}</span>
<span class="view-count">{{post.views | numberFormat}}</span>

<!-- Content manipulation -->
<p class="summary">{{post.content | truncateWords(30)}}</p>
<p class="teaser">{{post.excerpt | truncate(120)}}</p>
<div class="formatted-content">{{post.content | preserveSpaces}}</div>

<!-- Working with arrays and collections -->
{{#set sortedPosts = posts | sortByDate("metadata.createdAt", "desc")}}
<!---->
{{#set featuredPosts = posts | where("metadata.featured", true)}}
<!---->
{{#set publishedPosts = posts | where("metadata.status", "published")}}

<!-- Grouping content for display -->
{{#set postsByCategory = posts | groupBy("metadata.category")}}
<!---->
{{#each postsByCategory}}
<section class="category-section">
    <h2>{{@key}}</h2>
    {{#each this}}
    <h3><a href="/post/{{metadata.slug}}">{{metadata.title}}</a></h3>
    {{/each}}
</section>
{{/each}}

<!-- String manipulation -->
<h1>{{title | capitalize}}</h1>
<p class="uppercase-text">{{metadata.category | uppercase}}</p>
<span class="word-count">{{content | wordCount}} words</span>

<!-- Creating HTML links safely -->
<p>{{externalUrl | toLink("Visit Website", true, true)}}</p>

<!-- Safe content handling -->
<pre class="debug">{{complexObject | safeStringify}}</pre>
<p class="fallback">{{user.name | defaults("Anonymous User")}}</p>

Creating Reusable Partials

Organize your theme with reusable components in the partials directory:

<!-- partials/post-card.html -->
<article class="post-card">
    <header>
        <h3 class="card-title">
            <a href="/post/{{metadata.slug}}">{{metadata.title}}</a>
        </h3>
        {{#if metadata.subtitle}}
        <h4 class="card-subtitle">{{metadata.subtitle}}</h4>
        {{/if}}
    </header>

    {{#if metadata.featuredImage}}
    <div class="card-image">
        <a href="/post/{{metadata.slug}}">
            <img
                src="/content/uploads{{metadata.featuredImage.url}}"
                alt="{{metadata.featuredImage.alt | defaults(metadata.title)}}"
            />
        </a>
    </div>
    {{/if}}

    <div class="card-content">
        <div class="card-excerpt">
            {{#if metadata.excerpt}} {{metadata.excerpt | truncate(120)}} {{#else}} {{content | truncateWords(20)}}
            {{/if}}
        </div>

        <div class="card-meta">
            <time datetime="{{metadata.createdAt}}">{{metadata.createdAt | dateFormat("MMM D, YYYY")}}</time>
            {{#if metadata.author}}
            <span class="author">by {{metadata.author}}</span>
            {{/if}}
        </div>

        <a href="/post/{{metadata.slug}}" class="read-more">Read More</a>
    </div>
</article>

<!-- partials/pagination.html -->
<nav class="pagination" aria-label="Pagination Navigation">
    {{#if pagination.totalPages > 1}} {{#if pagination.prevPage}}
    <a href="{{pagination.urls.prev}}" class="pagination-prev" rel="prev">&laquo; Previous</a>
    {{/if}}

    <span class="pagination-info">
        Page {{pagination.currentPage}} of {{pagination.totalPages}} ({{pagination.totalItems}} total items)
    </span>

    {{#if pagination.nextPage}}
    <a href="{{pagination.urls.next}}" class="pagination-next" rel="next">Next &raquo;</a>
    {{/if}} {{/if}}
</nav>

<!-- Usage in templates -->
<div class="posts-grid">{{#each posts}} {{#include("partials/post-card.html")}} {{/each}}</div>

{{#include("partials/pagination.html")}}

Advanced Conditional Logic

Use STE's powerful conditional system for complex template logic:

<!-- Complex conditional styling -->
<body
    class=" {{#if homeRoute}}home-page{{/if}} {{#if contentRoute}}content-page {{fileType}}-page{{/if}} {{#if
taxonomyRoute}}taxonomy-page {{taxonomyType}}-archive{{/if}} {{#if isCustomPage}}custom-page{{/if}} {{#if
editable}}editable{{/if}} {{currentUser.role == `admin` ? `admin-user` : ``}} "
>
    <!-- Nested conditionals for complex logic -->
    {{#if metadata.featuredImage}}
    <div class="featured-image">
        <img
            src="/content/uploads{{metadata.featuredImage.url}}"
            alt="{{metadata.featuredImage.alt |
        defaults(metadata.title)}}"
            width="{{metadata.featuredImage.width}}"
            height="{{metadata.featuredImage.height}}"
        />
        <!---->
        {{#if metadata.featuredImage.caption}}
        <figcaption>{{metadata.featuredImage.caption}}</figcaption>
        {{/if}}
    </div>
    {{/if}}

    <!-- Using ternary operators -->
    <span class="status">{{metadata.status == "published" ? "Live" : "Draft"}}</span>

    <!-- Complex boolean logic -->
    {{#if (metadata.featured == true && metadata.status == "published") || currentUser.role == "admin"}}
    <div class="special-content">
        <!-- Content for featured published posts or admin users -->
    </div>
    {{/if}}

    <!-- Using the 'not' tag -->
    {{#not metadata.hideComments}}
    <section class="comments">
        <!-- Comment section -->
    </section>
    {{/not}}
</body>

Working with Nested Custom Pages

Handle hierarchical custom pages with breadcrumbs and navigation:

<!-- For nested custom pages like /docs/api/examples -->
{{#if breadcrumbs}}
<nav class="breadcrumbs" aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        {{#each breadcrumbs}}
        <li aria-current="{{active ? `page` : ``}}">
            {{#if active}}
            <span>{{title}}</span>
            {{#else}}
            <a href="{{slug}}">{{title}}</a>
            {{/if}}
        </li>
        {{/each}}
    </ol>
</nav>
{{/if}}

<!---->

{{#if siblingNavigation}}
<nav class="sibling-navigation">
    <h3>{{siblingNavigation.parentTitle}}</h3>
    <ul>
        {{#each siblingNavigation.siblings}}
        <li class="{{active ? `current` : ``}}">
            <a href="{{url}}" aria-current="{{active ? `page` : ``}}">{{title}}</a>
        </li>
        {{/each}}
    </ul>

    <div class="page-navigation">
        {{#if siblingNavigation.prev}}
        <a href="{{siblingNavigation.prev.url}}" class="nav-prev">&laquo; {{siblingNavigation.prev.title}}</a>
        {{/if}}
        <!---->
        {{#if siblingNavigation.next}}
        <a href="{{siblingNavigation.next.url}}" class="nav-next">{{siblingNavigation.next.title}} &raquo;</a>
        {{/if}}
    </div>
</nav>
{{/if}}