GHOST 0.3: A Themes Structure

The theme structure in GHOST is something I’ve been really waiting to take a look at, mainly because I build websites and run blogs. The default theme casper is built using the handlebars template engine and we’re going to have a quick look at how everything is set up. Firstly I have to notice a resemblense to WordPress, which I personally like.Update: Official Theme Documentation has been released!

This is how the front page looks with the casper theme right now:

Looking at the file structure, we see that there is really not a lot of files dealing with actually displaying content:

[ghost-0.3.0]$ ls -R content/themes/casper/
content/themes/casper/:
LICENSE.txt  README.md  assets  default.hbs  index.hbs  post.hbs

content/themes/casper/assets:
css  fonts  img  js

content/themes/casper/assets/css:
normalize.css  screen.css

content/themes/casper/assets/fonts:
icons.dev.svg  icons.eot  icons.svg  icons.ttf  icons.woff

content/themes/casper/assets/img:
loading.gif  user.png

content/themes/casper/assets/js:
index.js

The only files that I consider template files here are: default.hbs, index.hbs and post.hbs using the handlebars.js engine. Apart from that it’s only an icon font, css and some images, including one piece of frontend JavaScript. The license for this theme, as for Ghost is MIT.

Ghost Theming

Having a look at the post.hbs file, which represents something close to the WordPress loop, it’s really not that different. You just have to forget about PHP tags and use {{variable}} instead!

<span><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{#if tags}}on {{tags separator=" | "}}{{/if}}</span>

<h1>{{title}}</h1>

<section>
{{content}}
</section>

The default.hbs file has the doctype and is basically a shell for other template files whiche are injected into the {{body}} placeholder. Index.hbs unsurprisingly shows the front page and a list of already published posts.