Following Carl Schwann’s post, I have now enabled comments on my blog, starting with this post. It’s surprisingly simple for someone who has not done much mucking around with Hugo before!

If you’re also using Hugo, here’s how I did mine:

  • Refer to Carl’s commit
  • Copy your theme’s relevant template, preserving the same path, to override its behavior. I use a slightly modified hello-friend-ng so I copied themes/hello-friend-ng/layouts/posts/single.html to layouts/posts/single.html
  • Create a new partial layout (mine is layouts/partials/mastodon_comments.html) based on Carl’s change to his article.html
  • Check in purify.min.js to your static/js folder

In my case, my theme already has optional Disqus support, so I reworked the single.html template a bit:

    {{ if .Params.comments }}
      {{ if .Site.DisqusShortname }}
        <div id="comments">
          {{ template "_internal/disqus.html" . }}
        </div>
      {{ end }}
      {{ if .Params.mastodon }}
        <div id="comments">
          {{ partial "mastodon_comments.html" . }}
        </div>
      {{ end }}
    {{ end }}

The original template, for some reason, matches against the string "false" instead of the boolean false, so I also took the chance to fix it (plus I was already using booleans when I was using the Academic theme).

You can now enable comments by setting comments to a truthy value (e.g. the boolean true, or any non-empty string) - by default, having it unset would disable comments - and by setting a mastodon section. e.g. this post has (in TOML):

comments = true
[mastodon]
host = "floss.social"
username = "michel_slm"
id = "105489572021795386"

Next steps is are to fix how comments are displayed by porting the SCSS changes, and to link Mastodon threads to previous posts!

Thanks Carl for this neat hack.

This post is day 10 of my #100DaysToOffload challenge. Visit https://100daystooffload.com to get more info, or to get involved.

Have a comment on one of my posts? Start a discussion in my public inbox by sending an email to ~michel-slm/public-inbox@lists.sr.ht [mailing list etiquette]

Posts are also tooted to @michel_slm@floss.social