Editing themes

You can either use the built-in HTML/CSS theme editor in settings or download your site, edit it on your computer, and re-import it from the settings page.

Haunty themes are basically just two files, template.html and theme-style.css with no partials or anything like that. Just some fiddly Handlebars template logic (more on that below).

The built-in editor currently doesn't support file uploads so if you want to add any files, your best bet is to do it locally and reupload.

File structure

Themes go in the /themes/ folder, each with its own folder. To add a new theme, just make a new folder in /themes/ with the name of your theme and a template.html in it.

Here's an example file structure of a theme:

site folder/
  themes/
    Your theme name/
      template.html
      static/
        [any other files/folders you want to include as part of the theme, like:]
        css/
          theme-style.css

Caveats about file structure:

1. The built-in HTML/CSS editor expects there to be a [theme-name]/static/css/theme-style.css file and will throw an error if there isn't one.
2. The site generator copies everything from [theme-name]/static/ to the base directory of your exported site, so [theme-name]/static/js/app.js will resolve to /public/js/app.js. Note that it excluded the /static/ folder.
3. If you modify one of the default themes and want to revert to the original, you'll have to redownload the starter site template and copy it over manually.

Template structure basics:

I'm not sure it was a good idea, but Haunty uses a single template file for rendering everything--your site's home page, post list pages, and individual post pages.

To do so, it checks a the following variables to determine what sort of stuff to display:

• home - true when visitors are on / that you can use with {{#if home}} home-only content {{/if}}

• posts - true when on / or subsequent paginated pages like /page/2

• content - true when viewing an individual post or page, like /about or /2023/06/example-post

You can see examples of how that all works in the default themes.

More variables:

Handlebars variables are used inside {{ }} tags.

• siteTitle - site's title from config/settings

• siteDescription - site's description from config/settings

• tagAndPage - currently just returns strings like page [page number]. When support for listing posts by tag is added, it could look like - [tag] or - [tag] page [page number].

• pages - holds a list of posts marked as pages (e.g. an /about or /portfolio page). You can display these dynamically but you'll likely end up handwriting the links as HTML to get the order you want.

  Dynamically list pages:

  {{#if pages}}
    <ul>
      {{#each pages}}<li><a href="{{url}}">{{page}}</a></li>{{/each}}
    </ul>
  {{/if}}
  

• posts - each item in posts has attributes like:
  • content
  • url
  • title
  • description
  • preview
  • prettyDate
  • image (path to meta image)
  • year
  • month
  • hasMore

Using post variables

{{#if posts}}
  {{#each posts}}
    <h2>{{title}}</h2>
    <a href="{{url}}">{{prettyDate}}</a>
    {{{content}}}
  {{/each}}
{{else if content}}
  <h2>{{title}}</h2>
  <a href="{{url}}">{{prettyDate}}</a>
  {{{content}}}
{{/if}}

Note the triple brackets around content. That keeps it unescaped, allowing HTML within it to be rendered properly.

Also note the {{else if content}} block. If you're on an individual post page, that will return true and the attributes of the post item are accessible directly (instead of within the {{#each posts}}{{/each}} block).

How to work with post previews:

There's support for post previews in post lists. A preview will either take the first 50 words of your post or everything above a <!--more--> tag in the body of your post markdown.

Example post markdown content:

This is example post content! Everything up here will be in `preview`

<!--more-->

Everything down here will not be in `preview` but will be shown in `content`

How to use previews:

{{#each posts}}
  <a href="{{url}}">{{title}}</a>
  {{{preview}}}
{{/each}}

There's also a "hasMore" variable that == true if a <!--more--> tag is present in a post's markdown. This might be useful if you generally want to show full posts on your home page but not if they're really long:

{{#each posts}}
  <a href="{{url}}">{{title}}</a>
  {{#if hasMore}}
    {{{preview}}}
    <a href="{{url}}">Continue reading</a>
  {{else}}
    {{{content}}}
  {{/if}}
{{/each}}