giscus

vuepress-plugin-giscus@next

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

Demo

 

Install

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

 

Preparation

First you need to:

• Create a public Github repository and enable Discussions for it
• Install Giscus app
• Browse Giscus's website and generate your repo id, category id and other things on the website

 

Configuration

Add the plugin to your .vuepress/config.js:

const { giscusPlugin } = require("vuepress-plugin-giscus");

module.exports = {
  plugins: [
    giscusPlugin({
      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)
      lazyLoad: true,  // optional, boolean, default=false (if true, loading of Giscus will be deferred until the user scrolls near the comments container)
      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