vuepress-plugin-giscus

vuepress-plugin-giscus@next

Plugin vuepress-plugin-giscus@next for adding comment system Giscus powered by GitHub Discussions to VuePress 2.

Demo

 

Install

yarn add vuepress-plugin-giscus@next
# or
npm install vuepress-plugin-giscus@next

 

Usage

First you need to see Giscus's website for its details and generate your repo id, category id and other things on the website.

Then add the plugin to your .vuepress/config.js:

module.exports = {
  plugins: [
    [
      "vuepress-plugin-giscus", {
        repo: "[repo]",  // required, string, format: user_name/repo_name
        repoId: "[repo id]",  // required, string, generate it on Giscus's website
        category: "[category name]",  // required, string
        categoryId: "[category id]",  // required, string, generate it on Giscus's website
        mapping: "[page <-> discussion mapping]",  // optional, string, default="title"
        reactionsEnabled: "[enable reactions or not?]",  // optional, boolean, default=true
        theme: "[theme]", // optional, string, default="light"
        lang: "[language]",  // optional, string, default="auto" (follow the site's language, fell to "en" if your site's language is not supported by Giscus)
        crossorigin: "[crossorigin]"  // optional, string, default="anonymous"
      }
    ]
  ]
}

 

Component

After that, Giscus will have already been registered as a Vue component, so you can use it in Vuepress directly. You can also change Giscus' theme, language and enablement on-the-fly by pass props to the component (how it works):

<Giscus :theme="theme" :lang="lang" :reactionsEnabled="reactionsEnabled" />

 

License

MIT