How To Disable Any HTML Section With the Hugo Front Matter

In his post on using giscus in Hugo, Justin Bird explained how he set up a front matter parameter in his Hugo site that allowed him to disable the giscus in certain posts.

I wanted to set up my own version of this. And this process can work for any HTML section you want to disable too.

Now the front matter of my blog posts looks something like this:

---
title: Cats Are Great
slug: cats-great
date: 2024-07-28T07:09:16.620Z
description: Cats are great.
tags:
    - cats
keywords:
    - cats
draft: false
comments: true
type: posts
---

The important thing is that I added the comments parameter to my front matter, so I can disable the comments if I want to.

In my HTML, I just added several conditions that check for the state of the comments parameter. This is what I wrote in the single.html file for my blog posts (which is the single template I use for them):

{{ if or (not (isset .Params "comments")) (and (isset .Params "comments") (eq .Params.comments true)) }}
  <div id="giscus-comments">
    {{ partial "giscus-comments.html" . }}
  </div>
{{ end }}

My giscus-specific HTML is in the giscus-comments.html partial.

This is what the conditional means: if I don’t specify a comments parameter, or if comments is true, the comment section appears. However, if comments is false, the comments section disappears.

Hence, I can now disable comments in certain blog posts if I want to! I don’t think fights will break out on this blog, but it’s nice to have the option to disable comments if anything gets messy.