Adding a tags page to a Ghost blog

An odd thing about Ghost is though it allows you to tag your posts it doesn't provide an out-of-the-box way to access all the tags as a single view.

It is relatively easy to set one up yourself and give it a reasonably consistent look and feel to the main blog.

To start you need to enable the host public API, you'll find this in the Labs section of your ghost admin. Then, you need to create a static page with a post url of tags.

Now we have to create a special theme file called page-tags.hbs for that tags page. This page will be used to render content for this post instead of the default post.hbs.

{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
{{#post}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
    <div class="inner">
        {{> "site-nav"}}
        <div class="site-header-content">
            <h1 class="site-title">{{title}}</h1>
        </div>
    </div>
</header>

{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <style scoped>
    .inner-page-tags {
        margin-top: inherit;
    }
      
    @media (min-width: 900px) {
      .inner-page-tags {
        margin-top: -8vw;
      }
    }
    </style>
    <div class="inner inner-page-tags">                 
        <div class="post-feed">
            {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
            {{#foreach tags}}
                {{!-- The tag below includes the markup for each tag - partials/tag-card.hbs --}}
                {{> "tag-card"}}
            {{/foreach}}
            {{/get}}
        </div>
    </div>
</main>
{{/post}}

In the partials folder create another theme file called tag-card.hbs, this file will be used to render each tag card so that it has a similar look and feel to the posts when viewed as a collection.

<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
    {{#if feature_image}}
        <a class="post-card-image-link" href="{{url}}">
            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
        </a>
    {{/if}}
    <div class="post-card-content">
        <a class="post-card-content-link" href="{{url}}">
            <header class="post-card-header">
                <h2 class="post-card-title">{{name}}</h2>
            </header>
            <section class="post-card-excerpt">
                <p>{{description}}</p>
                <p>A collection of {{plural count.posts empty='posts' singular='% post' plural='% posts'}}</p>
            </section>
        </a>
    </div>
</article>

Finally add a link to your blog navigation so your visitors can find this new handy page.