Displaying Secondary Tags in Ghost's Source Theme

I like how Ghost's default theme Source prominently displays the primary tag for each post. However, secondary tags were completely absent. The following steps will enable displaying all tags right after the post content.

1. In the theme file /post.hbs, add the following code immediately after the {{content}} helper:

{{#if tags}}
    <h3 class="tag-title">Tags</h3>
    <ul class="tag-list">
    {{#foreach tags}}
        <li>
            <a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}">{{name}}</a>
        </li>
    {{/foreach}}
    </ul>
{{/if}}

2. In the site header, inject the following CSS:

.tag-title {
  display: none;
}
  
.tag-list {
  padding-left: 0px !important;
}
  
.tag-list li {
  list-style-type: none;
  display: inline;
}

.tag {
  padding: 0.5em 1em;
  margin: 0.25em;
  border-radius: .25em;
  border: 1px solid var(--ghost-accent-color);
  outline: none;
  cursor: pointer;
    
}

.tag:not(.pill--selected):hover {
  background: var(--ghost-accent-color);
  color: #ffffff;
}

.tag {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ghost-accent-color);
}

a.tag {
  text-decoration: none;
}

If you successfully complete the above changes, you should see a list of tags displayed like the following. Each tag will display using your site's accent color.

Tags

• Ghost