Content

This is a Hugo theme component to add the Giscus comment system , powered by GitHub Discussions, to static websites.

Configuration

The module accepts configuration via the [params] section in your configuration file.

[dnb]
  [dnb.giscus]
    dataCategory = 'Comments'
    dataCategoryId = 'ABCDEFGHIJKLMNOPQRST'
    dataEmitMetadata = '0'
    dataInputPosition = 'top'
    dataLang = 'en'
    dataLoading = 'lazy'
    dataMapping = 'specific'
    dataReactionsEnabled = '1'
    dataRepo = 'username/reponame'
    dataRepoId = 'ABCDEFGHIJKLMNOPQSTUVXYZABCDEFGH'
    dataTheme = 'light'
    dataThemeType = 'default'
    src = 'https://giscus.app/client.js'

dnb:
  giscus:
    dataCategory: Comments
    dataCategoryId: ABCDEFGHIJKLMNOPQRST
    dataEmitMetadata: "0"
    dataInputPosition: top
    dataLang: en
    dataLoading: lazy
    dataMapping: specific
    dataReactionsEnabled: "1"
    dataRepo: username/reponame
    dataRepoId: ABCDEFGHIJKLMNOPQSTUVXYZABCDEFGH
    dataTheme: light
    dataThemeType: default
    src: https://giscus.app/client.js

{
   "dnb": {
      "giscus": {
         "dataCategory": "Comments",
         "dataCategoryId": "ABCDEFGHIJKLMNOPQRST",
         "dataEmitMetadata": "0",
         "dataInputPosition": "top",
         "dataLang": "en",
         "dataLoading": "lazy",
         "dataMapping": "specific",
         "dataReactionsEnabled": "1",
         "dataRepo": "username/reponame",
         "dataRepoId": "ABCDEFGHIJKLMNOPQSTUVXYZABCDEFGH",
         "dataTheme": "light",
         "dataThemeType": "default",
         "src": "https://giscus.app/client.js"
      }
   }
}

The data-parameter correspond with the parameters of Giscus. The four parameters dataRepo, dataRepoId, dataCategory, and dataCategoryId are required. All other parameters are optional and have default values as shown in the sample above.

You can find the proper values for your setup by filling out the form on the Giscus page .

The default dataMapping is set to specific and will use the title of the post as term.

Advanced setup

With a little bit of more work you can set Giscus up to allow only connections from specific sources and define the comment order.

This can be done with this module’s configuration and future updates to these features will be integrated. Or you create the giscus.json in your static directory manually and keep it up to date. The instructions are here .

To configure the module to create the giscus.json add the custom output format GISCUS to your home section:

[outputs]
  home = ['HTML', 'GISCUS']

outputs:
  home:
  - HTML
  - GISCUS

{
   "outputs": {
      "home": [
         "HTML",
         "GISCUS"
      ]
   }
}

Be careful to not override the existing home output formats.

Once added you will find a giscus.json in your website root.

Comment sort order:

Available options are oldest (sorting from oldest to newest comment) and newest (sorting newest to oldest).

[dnb]
  [dnb.giscus]
    [dnb.giscus.extended]
      defaultCommentOrder = 'oldest'

dnb:
  giscus:
    extended:
      defaultCommentOrder: oldest

{
   "dnb": {
      "giscus": {
         "extended": {
            "defaultCommentOrder": "oldest"
         }
      }
   }
}

Origin setup:

[dnb]
  [dnb.giscus]
    [dnb.giscus.extended]
      origins = ['https://yourdomainname.ext', 'http://localhost:1313']
      originsRegex = ['http://localhost:(1313|8080)']

dnb:
  giscus:
    extended:
      origins:
      - https://yourdomainname.ext
      - http://localhost:1313
      originsRegex:
      - http://localhost:(1313|8080)

{
   "dnb": {
      "giscus": {
         "extended": {
            "origins": [
               "https://yourdomainname.ext",
               "http://localhost:1313"
            ],
            "originsRegex": [
               "http://localhost:(1313|8080)"
            ]
         }
      }
   }
}

Add your origins to the params configuration. Leave the options out to not add them to your giscus.json.

Setup your own theme

Using dataThemeType set to local you can add a relative path as theme. This will be translated to the absolute URL depending on development or production environment. If your theme is finished you can remove dataThemeType and just add the full URL to your theme to the dataTheme variable.