Disqus, Utterances and Giscus comments widgets are supported out of box. This article shows how to configure them and even customize your own comment widgets.

Disqus#

Disqus comments widget is supported by Hugo.

1disqusShortname = "yourdiscussshortname"

Please keep in mind that disqusShortname is a site’s configuration, not a parameter. Put it in the params won’t work.

Utterances#

Utterances is a lightweight comments widget built on GitHub issues.

1[utterances]
2  repo = "user/repo"
3  #issueTerm = "pathname" # pathname, url, title, og:title.
4  #label = "comment" # Optional.
5  #theme = ""

Unlike Disqus, Utterances is a parameter. You should put it in the params.

Parameters#

Name Type Default Description
utterances.repo String - GitHub repository.
utterances.issueTerm String pathname The mapping between blog posts and GitHub issues: pathname
utterances.label String - The label that will be assigned to issues created by Utterances.
utterances.theme String - github-light and github-dark will be used in light and dark mode respectively if not set. Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue and photon-dark.

Troubleshooting#

  • Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
  • Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
  • If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.

Giscus#

Giscus is a lightweight comments widget built on GitHub discussions.

1[giscus]
2  repo = "user/repo"
3  repoId = ""
4  category = ""
5  categoryId = ""

Parameters#

Name Type Default Description
giscus.repo String - GitHub repository. Required.
giscus.repoId String - GitHub repository ID. Required.
giscus.category String - Discussions category. Required.
giscus.categoryId String - Discussions category ID. Required.
giscus.theme String - Left it empty if you want to follow the theme mode.
giscus.mapping String pathname The mapping between blog posts and GitHub discussions: pathname, url, title and og:title.
giscus.inputPosition String top The input position: top or bottom.
giscus.reactions Boolean true Turn on/off the reactions.
giscus.metadata Boolean false Emit discussion metadata.
giscus.lang String - Specify language, default to site language.
giscus.lazyLoading Boolean true Enable lazy loading.

Custom Comments Widget#

We don’t intend to support all comments widgets, but don’t worry, you can customize your own comments widget.

You will need to disable the others before creating your own comments widget.

1mkdir -p layouts/partials/post/comments
2echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html

In the meantime, you may need to introduce third-party assets, which can be solved by customizing assets or Hooks easily.