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#

NameTypeDefaultDescription
utterances.repoString-GitHub repository.
utterances.issueTermStringpathnameThe mapping between blog posts and GitHub issues: pathname
utterances.labelString-The label that will be assigned to issues created by Utterances.
utterances.themeString-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#

NameTypeDefaultDescription
giscus.repoString-GitHub repository. Required.
giscus.repoIdString-GitHub repository ID. Required.
giscus.categoryString-Discussions category. Required.
giscus.categoryIdString-Discussions category ID. Required.
giscus.themeString-Left it empty if you want to follow the theme mode.
giscus.mappingStringpathnameThe mapping between blog posts and GitHub discussions: pathname, url, title and og:title.
giscus.inputPositionStringtopThe input position: top or bottom.
giscus.reactionsBooleantrueTurn on/off the reactions.
giscus.metadataBooleanfalseEmit discussion metadata.
giscus.langString-Specify language, default to site language.
giscus.lazyLoadingBooleantrueEnable 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.