Published on

Giscus Config

Authors
  • avatar
    Name
    Shelton Ma
    Twitter

Config Giscus repository

  1. Create an public repository, eg: giscus-discussions
  2. Enable public repository Discussions, Enabling or disabling GitHub Discussions for a repository
  3. Install giscus app to repository or account, https://giscus.app/

Use

  1. Use directly in webpage or webpage template

    <script
      src="https://giscus.app/client.js"
      data-repo="your public repository"
      data-repo-id="xxx"
      data-category="xxx"
      data-category-id="xxx"
      data-mapping="url"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="bottom"
      data-theme="preferred_color_scheme"
      data-lang="en"
      crossorigin="anonymous"
      async
    ></script>
    
  2. Integrate Giscus to vuepress-theme-hope

    # .vuepress/theme.ts
    plugins: {
      comment: {
        /**
         * Using Giscus
        */
        provider: "Giscus",
        repo: "shelton-xiaoteng-ma/giscus-discussions",
        repoId: "R_kgDOJhPNTA",
        category: "Announcements",
        categoryId: "DIC_kwDOJhPNTM4CWY5z",
      }
    
  3. Integrate Giscus to tailwind-nextjs-starter-blog

    NEXT_PUBLIC_GISCUS_REPO=your_giscus_repo_here
    NEXT_PUBLIC_GISCUS_REPOSITORY_ID=your_giscus_repository_id_here
    NEXT_PUBLIC_GISCUS_CATEGORY=your_giscus_category_here
    NEXT_PUBLIC_GISCUS_CATEGORY_ID=your_giscus_category_id_here