t-miracle / vitepress-plugin-comment-with-giscus

vitepress comment plugin based on giscus。 基于giscus的vitepress评论插件。

vitepress-plugin-comment-with-giscus

EN | 中文文档

vitepress comment section plugin based on giscus

Install

// npm
npm i vitepress-plugin-comment-with-giscus
// yarn
yarn add vitepress-plugin-comment-with-giscus

Usage

In the index file under the .vitepress/theme path

import DefaultTheme from 'vitepress/theme';
import giscusTalk from 'vitepress-plugin-comment-with-giscus';
import { useData, useRoute } from 'vitepress';
import { toRefs } from "vue";

export default {
    ...DefaultTheme,
    enhanceApp(ctx) {
        DefaultTheme.enhanceApp(ctx);
        // ...
    },
    setup() {
        // Get frontmatter and route
        const { frontmatter } = toRefs(useData());
        const route = useRoute();
        
        // Obtain configuration from: https://giscus.app/
        giscusTalk({
            repo: 'your github repository',
            repoId: 'your repository id',
            category: 'your category', // default: `General`
            categoryId: 'your category id',
            mapping: 'pathname', // default: `pathname`
            inputPosition: 'top', // default: `top`
            lang: 'en', // default: `zh-CN`
            // i18n setting (Note: This configuration will override the default language set by lang)
            // Configured as an object with key-value pairs inside:
            // [your i18n configuration name]: [corresponds to the language pack name in Giscus]
            locales: {
                'zh-Hans': 'zh-CN',
                'en-US': 'en'
            },
            homePageShowComment: false, // Whether to display the comment area on the homepage, the default is false
            lightTheme: 'light', // default: `light`
            darkTheme: 'transparent_dark', // default: `transparent_dark`
            // ...
        }, {
            frontmatter, route
        },
            // Whether to activate the comment area on all pages.
            // The default is true, which means enabled, this parameter can be ignored;
            // If it is false, it means it is not enabled.
            // You can use `comment: true` preface to enable it separately on the page.
            true
        );
    }
};

For the parameter acquisition method of giscus, please refer to：giscus configuration

Click to see the list of currently supported languages

Extended

When the configuration option enables the comment area by default, add the following code, the comment area will not be generated

---
comment: false
---

When the configuration options do not enable the comment area by default, you can still enable the comment area on the current page through the following code

---
comment: true
---

change log

change log

• v1.1.15

  new i18n setting

• v1.1.10

  Now customizable day/night themes

• v1.1.9

  You can now set whether to enable configuration globally by default

more vitepress plugins

You may be interested in these plugins： Click me to view more vitepress plugins

vitepress-plugin-comment-with-giscus's Issues

好用点赞👍

2 分钟就配置完毕了，感谢 OP

Elog Docs

Forgotten console.log

console.log(frontmatter?.value.comment); in giscus.js

你好，大佬，能否给这个功能增加一个开关

在vitepress文档内评论之后，会将vuepress的文档访问地址自动回复Discussion 内，当然这个功能非常便捷。但是我不想这么做，请问有什么办法关闭这个功能吗？

Support of current lang

Add support of current lang for lang option in giscusTalk for docs with language switcher

Discussion not found

why Discussion not found ?

categoryId - Property in Readme

I missed this one, but the categoryId in the configuration is incorrect.

You have it specified as just category in the props.

Just needs to be clarified.

能否加个属性默认全部关闭评论

目前是默认全部开启评论，使用 comment: false 关闭当前页面评论。

能否加个属性，设置为全部页面关闭评论，单页面如果有 comment: true 则开启， comment: false 或者不写 则为关闭

macOS system's lightTheme is incorrect

问题描述
插件在 mac 系统下，HTML 的 class 非dark情况，会导致giscus的 theme初始值为 dark的主题，

背景
mac 14.1
M1pro

"vitepress": "1.0.0-rc.4",