Hugo Giscus Module

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

On this page

Donate

Please check out the tutorial to start using Hugo modules.

This module add support for Giscus, a comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub!

Module
`github.com/hugomods/giscus`

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