Foreword

A commenting system implemented using GitHub Discussions, which allows visitors to leave comments and reactions (emoticons) on the site using GitHub.

Giscus Advantage

  • Open source
  • No tracking, no ads, free forever
  • No database required. All data is stored in GitHub Discussions
  • Supports customizable themes
  • Multi-language support (important)
  • Highly configurable
  • Automatically pulls new comments and edits from GitHub.
  • Build Your Own Service

Giscus in action

When giscus loads, it uses the GitHub Discussions search API to find a discussion associated with the current page based on the selected mapping (e.g., URL, pathname, title, etc.). if no match is found, the giscus bot automatically creates a discussion the first time someone If no matching discussion is found, giscus bot automatically creates one the first time someone leaves a comment or response.

Visitors who wish to comment must authorize the giscus app to post on their behalf according to the GitHub OAuth process, or they can comment directly in GitHub Discussion.

Adding Giscus Comments to a Blog

Let’s move on to today’s topic - Adding Giscus Comments

1. Create a repository

Go to Github to create a new repository, the name of the repository according to your own needs, there is no requirement. There is no requirement for the name of the repository. The following 3 points should be noted:

  • The repository is public, otherwise visitors will not be able to view the discussion.
  • The giscus app is installed, otherwise visitors won’t be able to comment and respond.
  • Discussions feature is enabled in your repository if not, see here enabling-features-for-your-repository/enabling-or-disabling-github-discussions-for-a-repository

2.Getting Giscus Configuration Information

Log in to Giscus, scroll down, and in the Configuration section, enter the name of your GitHub repository and copy the generated code.

Below are the fields that need to be used, so stay tuned.

No.Field
1data-repo
2data-repo-id
3data-category
4data-category-id

Screenshot of Giscus configuration information:

01

3.Configure the hugo.yaml file

Since my blog is in two languages, the Giscus configuration information needs to be added under the corresponding language.

Tip

Remember to set the comments property in hugo.yaml to true, i.e.: comments: true

comments: true
defaultContentLanguage: en
defaultContentLanguageInSubdir: false
languages:
  en: 
    params:
      giscus:
        repo: "Fill out your Giscus credit information"
        repoId: "Fill out your Giscus credit information"
        category: "Fill out your Giscus credit information"
        categoryId: "Fill out your Giscus credit information"
        mapping: "pathname"
        strict: "0"
        reactionsEnabled: "1"
        emitMetadata: "0"
        inputPosition: "top"
        lightTheme: "light"
        darkTheme: "dark"
        lang: "en"
        discussionTitle: "Welcome to the comments section."
        discussionSubtitle: "Thank you for your patience in reading! Come pick an emoji or leave a comment!"
  zh:
    params:
      author: 龚东海
      social: true
      giscus:
        repo: "Fill out your Giscus credit information"
        repoId: "Fill out your Giscus credit information"
        category: "Fill out your Giscus credit information"
        categoryId: "Fill out your Giscus credit information"
        mapping: "pathname"
        strict: "0"
        reactionsEnabled: "1"
        emitMetadata: "0"
        inputPosition: "top"
        lightTheme: "light"
        darkTheme: "dark"
        lang: "zh-CN"
        discussionTitle: "欢迎来到评论区"
        discussionSubtitle: "感谢您的耐心阅读！来选个表情，或者留个评论吧！"

4. New comments.html

Create a new comments.html file under the folder . /layouts/partials/ folder, create a new comments.html file with the following code:

comments.html
<div class="comments-title" id="tw-comment-title">
    <p class="x-comments-title">{{ .Site.Params.giscus.discussionTitle }}</p>
    <p style="font-size: 1rem">{{ .Site.Params.giscus.discussionSubtitle }}</p>
</div>
<div id="tw-comment"></div>
<script>
    const getStoredTheme = () => localStorage.getItem("pref-theme") === "dark" ? "{{ .Site.Params.giscus.darkTheme }}" : "{{ .Site.Params.giscus.lightTheme }}";
    const setGiscusTheme = () => {
        const sendMessage = (message) => {
            const iframe = document.querySelector('iframe.giscus-frame');
            if (iframe) {
                iframe.contentWindow.postMessage({giscus: message}, 'https://giscus.app');
            }
        }
        sendMessage({setConfig: {theme: getStoredTheme()}})
    }

    document.addEventListener("DOMContentLoaded", () => {
        const giscusAttributes = {
            "src": "https://giscus.app/client.js",
            "data-repo": "{{ .Site.Params.giscus.repo }}",
            "data-repo-id": "{{ .Site.Params.giscus.repoId }}",
            "data-category": "{{ .Site.Params.giscus.category }}",
            "data-category-id": "{{ .Site.Params.giscus.categoryId }}",
            "data-mapping": "{{ .Site.Params.giscus.mapping | default "pathname" }}",
            "data-strict": "{{ .Site.Params.giscus.strict | default "0" }}",
            "data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled | default "1" }}",
            "data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata | default "0" }}",
            "data-input-position": "{{ .Site.Params.giscus.inputPosition | default "bottom" }}",
            "data-theme": getStoredTheme(),
            "data-lang": "{{ .Site.Params.giscus.lang | default "en" }}",
            "data-loading": "lazy",
            "crossorigin": "anonymous",
            "async": "",
        };

        const giscusScript = document.createElement("script");
        Object.entries(giscusAttributes).forEach(
                ([key, value]) => giscusScript.setAttribute(key, value));
        document.querySelector("#tw-comment").appendChild(giscusScript);

        const themeSwitcher = document.querySelector("#theme-toggle");
        if (themeSwitcher) {
            themeSwitcher.addEventListener("click", setGiscusTheme);
        }
        const themeFloatSwitcher = document.querySelector("#theme-toggle-float");
        if (themeFloatSwitcher) {
            themeFloatSwitcher.addEventListener("click", setGiscusTheme);
        }
    });
</script>

5. New comments.css

Create a new comments.css file under . /assets/css/extended folder, create a new comments.css file with the following code:

.comments-title {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: block;
    text-align: center;
}

.x-comments-title {
    display: block;
    font-size: 1.25em;
    font-weight: 700;
    padding: 1.5rem 0 .5rem;
}

Congratulations, after completing the above steps, your blog already has a commenting feature that supports multiple languages and follows the theme.

Refer

  1. Giscus Doc
  2. Tofuwine’s Blog - PaperMod 集成 Giscus 评论