$ cd /home/

plugin-giscus

Gungnir
2021-12-12
4 min

npmgithublicense

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

Install

pnpm install vuepress-plugin-giscus@next

yarn add vuepress-plugin-giscus@next

npm install vuepress-plugin-giscus@next

Preparation

First you need to:

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