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.