Understanding the Templating System

Postalgic uses the Mustache templating engine to generate your static blog sites. This powerful yet simple system allows you to customize every aspect of your blog's appearance and layout while maintaining the clean, fast performance of static sites.

How Templates Work

When you publish your blog, Postalgic takes your posts and blog settings, combines them with your chosen theme's templates, and generates a complete static website. The templates define how your content is structured and styled.

Template Types

Postalgic includes several template types, each serving a specific purpose:

Template Variables

Templates use variables to insert your blog's content and settings. Variables are enclosed in double curly braces like {{blogName}}.

Blog Information Variables

• {{blogName}} - Your blog's title
• {{blogUrl}} - Your blog's URL
• {{blogTagline}} - Your blog's subtitle
• {{blogAuthor}} - Author name
• {{blogAuthorUrl}} - Author website URL
• {{currentYear}} - Current year
• {{buildDate}} - When the site was generated

Color & Style Variables

• {{accentColor}} - Your theme's accent color
• {{backgroundColor}} - Background color
• {{textColor}} - Text color
• {{lightShade}} - Light shade color
• {{mediumShade}} - Medium shade color
• {{darkShade}} - Dark shade color

Post Variables

• {{displayTitle}} - Post title or preview text
• {{contentHtml}} - Post content as HTML
• {{formattedDate}} - Human-readable post date
• {{urlPath}} - Post URL path
• {{hasTitle}} - Whether post has a title
• {{tags}} - Array of post tags
• {{categoryName}} - Post category

Mustache Syntax Basics

Simple Variables

Display a variable's value:

<h1>{{blogName}}</h1>

Conditionals

Show content only if a variable exists or is true:

{{#hasTitle}}
  <h2>{{displayTitle}}</h2>
{{/hasTitle}}

{{^hasTitle}}
  <div class="no-title">{{contentHtml}}</div>
{{/hasTitle}}

Loops

Repeat content for each item in an array:

{{#posts}}
  <article>
    <h2>{{displayTitle}}</h2>
    <div>{{contentHtml}}</div>
  </article>
{{/posts}}

Partials

Include one template inside another:

{{#posts}}
  {{> post}}
{{/posts}}

Customizing Your Theme

Using the Built-in Theme Editor

1. Open the Postalgic iOS app
2. Go to your blog's settings
3. Navigate to Themes
4. Duplicate the default theme to create a custom version
5. Edit individual template files using the built-in editor
6. Apply your custom theme to your blog

CSS Customization

The CSS template uses CSS custom properties for easy theming:

:root {
  --accent-color: {{accentColor}};
  --background-color: {{backgroundColor}};
  --text-color: {{textColor}};
}

Example: Custom Post Layout

Here's how you might customize the post template:

<article class="post">
  {{#hasTitle}}
    <h1 class="post-title">{{displayTitle}}</h1>
  {{/hasTitle}}
  
  <div class="post-meta">
    <time>{{formattedDate}}</time>
    {{#hasCategory}}
      in <a href="{{categoryUrlPath}}">{{categoryName}}</a>
    {{/hasCategory}}
  </div>
  
  <div class="post-content">
    {{contentHtml}}
  </div>
  
  {{#hasTags}}
    <div class="post-tags">
      {{#tags}}
        <a href="{{urlPath}}" class="tag">{{name}}</a>
      {{/tags}}
    </div>
  {{/hasTags}}
</article>

Advanced Features

Responsive Design

The default theme includes mobile-friendly responsive design. You can customize breakpoints and mobile layouts in the CSS template.

SEO Integration

Templates automatically generate SEO-friendly elements:

• Meta descriptions and Open Graph tags
• Twitter Card metadata
• Structured sitemap.xml
• RSS 2.0 compliant feeds

Embed Support

Templates handle embedded content automatically:

• YouTube videos with responsive iframes
• Link previews with metadata
• Image galleries with lightbox functionality

Tips for Template Customization

Remember that Postalgic generates static sites, so your templates should focus on clean HTML, CSS, and minimal JavaScript. The simpler your templates, the faster your site will load for your readers.