The Template File

The master wrapper for your entire site.

The template file is the big boss - it wraps around everything. While layouts wrap individual page content, the template wraps the whole shebang, including the layout.

Think of it as your site's skeleton: the <html>, <head>, and <body> tags that every page shares.

The Basic Template

Create a template.html in your project root:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> | <%= sitename %></title>
</head>
<body>
  <nav>
    <a href="/"><%= sitename %></a>
    <%= nav_links %>
  </nav>

  <main>
    <%= content %>
  </main>

  <footer>
    <p>&copy; 2025 <%= sitename %></p>
  </footer>
</body>
</html>

The <%= content %> placeholder is where all your page content (including layouts) gets inserted.

What Swifty Auto-Injects

You might notice your CSS and JS files magically appear in the built pages. That's because Swifty automatically injects:

All CSS files from your css/ folder (alphabetically sorted)
All JS files from your js/ folder (alphabetically sorted)
Syntax highlighting styles for code blocks
Swifty navigation script (if morphing is enabled in config)
LiveReload script (only during development with swifty start)

These get added just before the closing </head> tag. You don't need to manually link your stylesheets or scripts - just drop files in the right folders and they're included.

Template Variables

Swifty uses Eta with EJS-style syntax for templates:

<%= variable %> - Output a variable (escaped)
<% code %> - Execute JavaScript without output

Variable	Syntax	What it does
`sitename`	`<%= sitename %>`	Your site's name from config
`title`	`<%= title %>`	Current page's title
`content`	`<%= content %>`	The page content (required!)
`nav_links`	`<%= nav_links %>`	Auto-generated navigation
`breadcrumbs`	`<%= breadcrumbs %>`	Breadcrumb trail
`author`	`<%= author %>`	Author from config or page
`og_tags`	`<%= og_tags %>`	Open Graph meta tags for social sharing
`word_count`	`<%= word_count %>`	Number of words in the page content
`reading_time`	`<%= reading_time %>`	Estimated reading time (e.g., "3 min read")
`prev_page`	`<%= prev_page %>`	Link to previous sibling page
`next_page`	`<%= next_page %>`	Link to next sibling page
`pagination`	`<%= pagination %>`	Pagination nav for paginated folders
`data.*`	`<%= data.team %>`	Data from JSON/YAML files in `data/` folder

Using JavaScript in Templates

Since Swifty uses Eta, you can use full JavaScript in your templates:

<!-- Conditionals -->
<% if (tags && tags.length > 0) { %>
  <div class="tags">
    <% for (const tag of tags) { %>
      <span class="tag"><%= tag %></span>
    <% } %>
  </div>
<% } %>

<!-- Expressions -->
<p>Published: <%= new Date(date).toLocaleDateString() %></p>

<!-- Computed values -->
<%= title.toUpperCase() %>

This gives you the power to add conditional content, loops, and dynamic logic right in your templates.

Pro Tips

Name your CSS files strategically: Since they're loaded alphabetically, prefix with numbers for control:

css/
├── 1-reset.css
├── 2-base.css
└── 3-components.css

Keep it lean: The template appears on every page, so keep it minimal. Put section-specific stuff in layouts instead.

Test your template: Since it wraps everything, a broken template breaks your whole site. Start simple and build up.