Managing Disqus comments with Ghost Internal Tags

Ghost 0.9.0 (released on the 26th of July) comes with this awesome feature called Internal Tags. Internal Tags allow you to structure your posts and workflow using Ghost tags. They’re slightly different from normal tags given they don’t show on the front end via the /tag/<tag> slug and when using the tags helper they also don’t get printed. You can read more information about them on the feature issue #6165 here.

As you can see below I use Disqus for the comments on my blog, although I’d like to switch to Discourse one day. The issue is on pages, like my About page for example, I don’t want to include comments. At the moment I just use separate page templates for every page that has comments on and include the partial disqus-comments.

The handlebars template I use for pages that need comments looks something like this:

<snip>
    {{#post}}
        <h1 class="post-title text-center hyper lighter">{{{title}}}</h1>
        <div class="col-md-8 col-md-offset-2 post-body">
            <section class="post-content">
                {{content}}
            </section>
        </div>
        {{>disqus-comments}}
    {{/post}}
<snip>

And a normal page looks like this:

<snip>
    {{#post}}
        <h1 class="post-title text-center hyper lighter">{{{title}}}</h1>
        <div class="col-md-8 col-md-offset-2 post-body">
            <section class="post-content">
                {{content}}
            </section>
        </div>
    {{/post}}
<snip>

As you can see the only difference is that disqus-comments partial is included. What you end up with is several page-<slug>.hbs files in your themes root which makes everything a bit hard to manage.

Enter Internal Tags. The game changer.

Internal Tags replaces all this functionality with 2 extra lines of code:

{{#has tag="#has-comments"}}
    {{>disqus-comments}}
{{/has}}

Thats it. All I need to do now is add the tag #has-comments and a page gets Disqus embedded! So simple!