小波Note

How it works

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

Visitors who want to comment must authorize the giscus app to post on their behalf via the GitHub OAuth flow, or they can comment directly in the GitHub Discussion. You can manage comments on GitHub.

Enabling GitHub Discussions

1. Create a public repository and enable the Discussions feature in the repository's Settings -> Options -> Features.

2. Create a new category in the repository's Discussions page to store comments.

Installing Giscus in GitHub Apps

Visit the link giscus app, click Install, select your repository, and install the Giscus App.

Configuring Giscus

Configure it on the giscus config website

Fill in the following information in sequence:

• Repository name
• mapping of pages and comments (I can't choose pathname because I have multiple languages, otherwise there will be multiple comment themes such as /xxx, /en/xxx, /ja/xxx)
• Repository category

Then copy this code

Installing in nuxt

        npm install @giscus/vue

    

        "devDependencies": {
    "@giscus/vue": "^3.0.0"
}

    

        <script setup lang="ts">
import Giscus from '@giscus/vue'
import 'giscus';
</script>

<template>
    <Giscus
        id="comments"
        repo="it-fb/it-fb-comment"
        repoid="xxx"
        category="Comment"
        categoryid="xxx"
        mapping="specific"
        :term="blog"
        reactionsenabled="1"
        emitmetadata="0"
        inputposition="top"
        :theme="color.value"
        :lang="locale === 'zh' ? 'zh-CN' : locale"
        loading="lazy"
    />
</template>