Templates

Creating a template, or modifying an existing template will require an understanding of HTML, CSS and Mustache. Blot will be familiar to those who have worked with templates on other blogging platforms.

The best way to learn how to use Blot's template is to clone an existing template and look at its source. Please don't hestitate to contact me if you have any questions.

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.

Blog variables

Blot uses these variables to render Mustache templates.

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
{{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
{{cacheID}}	a unix time stamp for the last change you made to your blog
{{roundAvatar}}	true if you’ve indicated your avatar is round, false if not
{{hideDates}}	true if you’ve chosen to hide the dates on your blog, false if not

Entry variables

Note that some of the variables, like {{{html}}} have three handlebars rather than two. Mustache escapes variables with two handlebars.

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 title and the first few items in the entry. You can specify the end of the teaser by inserting the special tag {{more}} into your blog post's file. Everything before {{more}} will be included in the teaser.
{{{teaserBody}}}	{{{teaser}}} without the 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:

• small which has a width and height under 160px.
• medium the default, which has a width under 640px.
• large which has a width and height under 1060px.
• square which has a width and height of 160px.

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.