Hugo Utterances Module

March 28, 2023 2 min read Comment Engine Module Docs Utterances

Donate

Become a backer or sponsor to support our work.

On this page

Module	`github.com/hugomods/utterances`
Stats

Features

Flexible and Configurable.
JS APIs: change theme on the fly, it’s usually used in the case of color(dark/light) changed.

Installation

Requires extended Hugo and Go.

Append the github.com/hugomods/utterances to the module.imports.

1[[module.imports]]
2path = "github.com/hugomods/utterances"

Site Parameters

Name	Type	Required	Default	Description
`endpoint`	String	Y	`https://utteranc.es/`	The client script endpoint.
`repo`	String	Y	-	The GitHub repository, `user/repo`.
`mapping`	String	N	`pathname`	The mapping between blog posts and GitHub issues. Available options: `pathname`, `url`, `title`, `og:title`.
`theme`	String	N	`preferred-color-scheme`	Available options: `github-light`, `github-dark`, `github-dark-orange`, `icy-dark`, `dark-blue`, `photon-dark`, `preferred-color-scheme`, `boxy-light`, `gruvbox-dark`.
`label`	String	N	`comments`	The label that will be assigned to issues created by Utterances.

See the configuration for details.

Usage

See the example site and it’s source code.

Configuration

Firstly, we’ll need to tweak the site parameters listed above.

Import Script

Then place the following partial to your template where you want the comments to appear.

1{{ partial "utterances/script" . }}

Or specify another options than .Site.Params.utterances, it’s used to specify multiple Utterances configurations.

The global options will be merged into the custom options.

1{{ partial "utterances/script-with-options" .Site.Params.blog.utterances }}

JS APIs

You may want to change the Utterances theme on the fly, a common example is changing the Utterances to the corresponding theme when the user switches colors(dark/light).

1import Utterances from 'mods/utterances/js';
2
3const utterances = new Utterances();
4utterances.setTheme('github-dark');

You can find the real example on the example site.

Twikoo

Browse Docs