Hugo Giscus Module

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

Donate

Become a backer or sponsor to support our work.

On this page

Module	`github.com/hugomods/giscus`
Stats

Features

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

Installation

Requires extended Hugo and Go.

Import the github.com/hugomods/giscus into your site configuration.

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/giscus

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/giscus'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/giscus"
6         }
7      ]
8   }
9}

Site Parameters

See how to configure Gisucs.

Name	Type	Required	Default	Description
`endpoint`	String	Y	`https://giscus.app/`	The client script endpoint.
`repo`	String	Y	-	The GitHub repository, `user/repo`.
`repo_id`	String	N	-	The GitHub repository ID.
`category`	String	Y	`General`	Discussion category.
`category_id`	String	Y	-	Discussion category ID.
`mapping`	String	N	`pathname`	The mapping between the embedding page and the embedded discussion.
`strict_matching`	String	N	`true`	Use strict title matching.
`theme`	String	N	`preferred_color_scheme`
`input_position`	String	N	`top`	The input position. Available options: `top` or `bottom`.
`reactions`	String	N	`true`	Enable reactions for the main post.
`lazy_loading`	String	N	`true`	Load the comments lazily.
`languages_mapping`	Object	N	-	The languages mapping from site language to Giscus language.

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

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

Or with custom options.

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

By default, the Giscus client will look up the placeholder element that with the giscus class, such as,

1<div class="giscus">YOUR COMMENTS WILL BE PLACED INSIDE</div>

Otherwise, the comments will be rendered where the script placed.

JS APIs

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

1import Giscus from 'mods/giscus/js';
2
3const giscus = new Giscus();
4giscus.setTheme('dark');

You can find the real example on the example site.

Twikoo

Browse Docs