October 16, 2013

Themeing in Ghost blogging platform

Once you installed Ghost in my previous post guide, open up the ghost folder location, you will see a folder name "themes" in ghost/content/themes there is where contains all themes in your ghost app which is similar to wordpress which is wordpress/wp-content/themes/themeName.

Go ahead copy the default theme casper and paste with any name you like,
either keep or delete the 2 text files which is the LICENSE.txt and README.md (by the way if you need visual Markdown editor check out my previous post on Mou)
As you can see there are 3 main files and a assets folder here for now,
  • assets(Folder)
  • default.hbs
  • index.hbs
  • post.hbs
.hbs is handbars.js template, I am not super familiar with handlebar which basically allow you to write dynamic html code inside html, which means you can add an variable in javascript which means Gohst(node.js) and insert them into your html template by using these mustache braces {{code}}, well is abit confusing for beginner and I prefer jade template instead, I might try to take a look see if there is a way to use jade instead of handlebar in Ghost template. But for we just remember that these are jus some template engines that we could use variables provided by Ghost, example {{meta_title}} where these data are from your admin panel->settings->Blog Title and some syntax like {{#foreach posts}} // some code {{/foreach}} as the each loop. Ok cool!.
Ok before you can switch to your template from setting, you need to restart your node server, npm start is to start the program, click Control+C to quit and do npm start again o start again. ok now switch to new template folder
Ok lets get start to talk about theming in Ghost, the 2 main file,  Index.hbs and post.hbs
Index is to be used for home page of your Ghost and post is for each post in Ghost
well you can define everything include header, footer metas or titles in each of these two files but is better to extend with another file that contains all these defaults settings, thats when we have another file call default.hbs where you set your titles, metas, footers and extending these css or javascipts.  The reason that we are doing this is because if we are doing code maintaining or change of some codes, we do not want to busy our time by changing multiple times from different files, we just want to head over to default.hbs, change one for all.
First open up your default.hbs, as you can see there are still your familiar html tags, except there are some mustache codes which is called from Ghost {{meta_title}} as example.
of course you still can include your css or javascript files in there and it will be called in all index or post files from Ghost.
In default.hbs you can wrap a body tag and extends these to index or post files, with the the default handlebar expression


so what happened is that if you want to call this template from another file and anything that inside that template will be in the body tag itself

<!-- here if the place where your extended template code goes -->

Ok brilliant html template engine, Ghost also come with class tags for us for easy themeing, you will see a class tag called {{body_class}} in <body class=", thats pretty cool because we can use it to specific our page targeted css, especially if you are doing SASS/ Less or other css compiler(by the way who doesn't write css now days with an compiler). so you can defined your specific target like below:

.post-template {

there is an class target for each post too {{post_class}}
Now go ahead and open up your index.hbs where is the template for homepage.
you can see that there is an extended comment {{!< default}} this is to called the default.hbs and everything you wrote below will be in the body tag as I mentioned earlier.
if you default.hbs is a different name then you call it with the name that you use. {{!< other_default_name}}. So again you see some html code and no big deal, you already know html, except there are some again handlebar code {{#if @blog.cover}} and {{#foreach post}}… These are the helper code that provided by Ghost, and there are global settings such as:

{{@blog.url}} – the url specified for this env in config.js
{{@blog.title}} – the blog title from the settings page
{{@blog.description}} – the blog description from the settings page
{{@blog.logo}} – the blog logo from the settings page

which means with helpers, you can do like this {{#if @blog.url}} some html here {{/if}}
which means if there is blog url defined then add  some html like the one in index.hbs.
{{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}
which is saying if there is a blog cover defined then add in the background image.
Ok great, the rest are the rest on this page.
Now lets head over the post.hbs, again you will see that its pretty much html, and there is a helper which is {{#post}} which calls everything from your post.
I will be starting to create the template this weaken from scratch and might do a post on this.