Theme Development Best Practices

1. Performance Optimization

<!-- Optimize images with proper attributes -->
<img
    src="/content/uploads{{featuredImage.url}}"
    alt="{{featuredImage.alt | defaults(title)}}"
    loading="lazy"
    width="{{featuredImage.width}}"
    height="{{featuredImage.height}}"
/>

<!-- Minimize template processing with set variables -->
{{#set currentYear = year}}
<!---->
{{#set siteTitle = site.siteTitle}}
<!---->
{{#set themePath = "/content/themes/" + theme.name}}

<!-- Use efficient conditionals -->
{{#if posts}} {{#set postsExist = true}} {{#else}} {{#set postsExist = false}} {{/if}}

2. Accessibility

<!-- Semantic HTML structure -->
<main role="main" aria-label="Main content">
    <article role="article">
        <header>
            <h1>{{metadata.title}}</h1>
        </header>
        <div class="content" role="region" aria-label="Article content">{{content}}</div>
    </article>
</main>

<!-- Proper navigation landmarks -->
<nav role="navigation" aria-label="Main navigation">{{html_menu}}</nav>

<nav role="navigation" aria-label="Pagination">{{#include("partials/pagination.html")}}</nav>

<!-- Screen reader friendly content -->
<span class="sr-only">Published on</span>
<time datetime="{{metadata.createdAt}}">{{metadata.createdAt | dateFormat("MMMM D, YYYY")}}</time>

3. SEO Optimization

<!-- Dynamic meta tags -->
<title>
    {{#if metadata.seoTitle}} {{metadata.seoTitle}} {{#elseif metadata.title}} {{metadata.title}} | {{site.siteTitle}}
    {{#else}} {{site.siteTitle}} {{/if}}
</title>

<meta name="description" content="{{metadata.seoDescription || metadata.excerpt || site.siteDescription}}" />

<!-- Open Graph tags -->
{{#if metadata.featuredImage}}
<meta property="og:image" content="{{site.siteUrl}}/content/uploads{{metadata.featuredImage.url}}" />
<meta property="og:image:alt" content="{{metadata.featuredImage.alt | defaults(metadata.title)}}" />
{{/if}}

<!-- Structured data -->
{{#if contentRoute && fileType == "post"}}
<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": "{{metadata.title}}",
        "datePublished": "{{metadata.createdAt}}",
        "dateModified": "{{metadata.updatedAt | defaults(metadata.createdAt)}}",
        "author": {
            "@type": "Person",
            "name": "{{metadata.author | defaults('Admin')}}"
        }
    }
</script>
{{/if}}