hayley 365

home

how to change the Ghost ghostwriter theme

15 Oct 2013

2013-10-15 22:06:41 -0500

I dig the typography and styling in the ghostwriter theme, but what I don't like is the unintuitive displaying of a single article on the main page. As far as I can tell, this:

where to click in this ghost template to get the index

is the only way to get to the index of articles.

I don't find that intuitive at all.

At the very least, there should be a previous/next article at the bottom of the article. Or preferably at the top. Or hey, just make it way more obvious how you're supposed to get a list of articles.

Plus, I'm kind of a fan of the simple list as a blog main page. At least, I feel it makes sense for blogs like mine where the topics seem to be all over the place instead of carrying any sort of consistent theme.

how to change ghostwriter to show the index by default

As far as I can tell, you only need to change things in two places in order to make this work.

First, you'll be changing some Javascript code to hide the first article and show the index instead.

Next, you'll be modifying a link so that when you go back to the main page it shows the index.

modifying the javascript show/hide code

You'll need to edit two files:

  1. content/themes/ghostwriter/assets/js/scripts.js
  2. content/themes/ghostwriter/default.hbs

scripts.js

Look for the first occurrence of this:

$latestPost.show();
$postIndex.hide();

For this, all you need is switch the show to hide and vice versa (e.g. $postIndex.show();).

Once this is changed, now when someone hits the main page, they should see the article list instead of the first post.

However, if they visit an article and then click your text "logo", it will still show them just the first article. So you'll need to fix another file.

default.hbs

In the default.hbs file, look for a line like this: <h1 class="site-title"><a class="js-ajax-link" title="" href=""></a></h1>

Change the class to add js-show-index. It will then look something like this: <h1 class="site-title"><a class="js-ajax-link js-show-index" title="" href=""></a></h1>

Now when you click on something (in my site's case "HAYLEY 365"), it should now show the index as well instead of just the first post.