Templates

Creating a template, or modifying an existing template will require an understanding of HTML, CSS and basic templating using Mustache. Blot will be very familiar if you’ve worked with templates on other platforms.

Modify an existing template

To modify an existing template, create a new template on the design page and specify the template you wish to clone from. This will copy of the existing template that you can edit.

Blog variables

When you’re getting started I recommend cloning a template and looking through its source to familiarize yourself with how templates on Blot work.

The tag… is replaced with…
{{name}} your name
{{handle}} your blog's username
{{title}} your blog's title
{{avatar}} the URL to your blog's avatar
{{roundAvatar}} true if you've indicated your avatar is round, false if not
{{cacheID}} a timestamp representing the last time your blog's template was changed
{{hideDates}} true if you've chosen to hide the dates on your blog, false if not
{{blogURL}} the URL to your blog's homepage
{{feedURL}} the URL to your blog's RSS feed
{{cssURL}} the URL to your blog's CSS file
{{scriptURL}} the URL to your blog's JS file
{{sitemapURL}} the URL to your blog's sitemap

Entry variables

Note that some of the variables, like {{{html}}} have three handlebars rather than two. This is because Mustache escapes variables by default, and three handlebars overrides this.

The tag… is replaced with…
{{id}} Number representing the entry's unique ID
{{date}} Human readable publish date for the entry
{{title}} Title of the entry
{{{titleTag}}} HTML of the entry's title
{{{html}}} HTML of the entry, including the title
{{{body}}} HTML of the entry, excluding the title
{{{teaser}}} HTML of the first few items in the entry, including title
{{{teaserBody}}} HTML of the first few items in the entry, excluding title
{{summary}} Text summary of the entry
{{more}} Boolean indicating whether teaser differs from html. This is useful for determining whether or not to show 'read more' links.
{{tags}} List of tags for the entry
{{url}} Relative URL to the entry
{{menu}} "true" if the entry is a page, "false" if not
{{created}} Timestamp
{{updated}} Timestamp

Debugging

If you append the query string ?json=true to a URL on Blot, you can retrieve the view used to render its template. I’d suggest using a browser extension like JSONView to make more sense of it.

Custom metadata

You can specify custom entry metadata:

Author: Eric Blair

Use custom metadata in your template like this:

Posted by {{metadata.author}}

Metadata keys are case insensitive. I’d recommend using conditional blocks to prevent your layout breaking if you don’t consistently specify metadata:

{{#metadata.author}}
  Posted by {{metadata.author}}
{{/metadata.author}}

{{^metadata.author}}
  Posted by the editor
{{/metadata.author}}

Thumbnails

Blot generates four sizes of thumbnails:

Blot will not increase the size of smaller images. The JSON added to each entry looks something like this:

{
    ...
    thumbnail: {
        small: {url: "...", width: 160, height: 103},
        medium: {url: "...", width: 640, height: 411},
        large: {url: "...", width: 1060, height: 681},
        square: {url: "...", width: 160, height: 160 }
    },
    ...
}

You can use them in your template like this:

{{#thumbnail.medium}}
    <img src="{{url}}" width="{{width}}" height="{{height}}">
{{/thumbnail.medium}}

Robots.txt

You can control what search engines index by editing robots.txt. However, this view is overriden by Blot if you use a custom domain. Blot does this to prevent a duplicate content penalty.