如何给自己的静态网站添加giscus评论模块？

发表于 更新于 分类于 阅读次数： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

你好，我是猿java。

维护个人的技术网站已经成为了很多程序员的日常工作，如何搭建免费的技术博客，可以参考我往期的文章：如何搭建自己免费的技术博客，有了网站后，我们希望有个评论区可以和读者互动，因此我们就来分享一下如何
搭建一个免费的评论模块。

素材

我们采用的是 giscus，它是一个开源，免费的工具，可以和github很好的集成。

步骤

创建评论仓库

因为giscus是和github集成，所以需要在github上创建一个 public的仓库用于存放评论的内容。比如仓库名：blog-comments

评论仓库授权

在 github上，导航到存储库blog-comments的主页，点击 ⚙️Settings 按钮
img.png

找到 Discussions功能勾选上，再点击 Set up Discussions按钮，默认配置后，点击 Start Discussions按钮，授权完成
img.png

img.png

启用Discussions

前往giscus对 blog-comments启用giscus

img.png

获取存储仓库的API 密钥

可以通过 GitHub GraphQL API 访问 GitHub 详细信息，也可以在此链接访问，然后使用你的GitHub 帐户登录

请求参数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// owner 是你github的账户名， name是你存储评论的仓库名
query {
  repository(owner: "yuanjavar", name:"blog-comments"){
    id
    discussionCategories(first:10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

接口返回，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{
  "data": {
    "repository": {
      "id": "R_kgXssHsd5g",   // 仓库id
      "discussionCategories": {
        "edges": [
          {
            "node": {
              "id": "DIC_DJSHUSs4M-2",
              "name": "Announcements"
            }
          },
          {
            "node": {
              "id": "DIC_kDDOWWMs4CRM-3", // category id
              "name": "General"           // category name
            }
          },
          {
            "node": {
              "id": "DIC_kdyejDW4CRM-5",
              "name": "Ideas"
            }
          },
          {
            "node": {
              "id": "DIC_kSKDW4CRM-7",
              "name": "Polls"
            }
          },
          {
            "node": {
              "id": "DIC_kwDDDW5s4CRM-4",
              "name": "Q&A"
            }
          },
          {
            "node": {
              "id": "DIC_kwDKEKED5RM-6",
              "name": "Show and tell"
            }
          }
        ]
      }
    }
  }
}

安装 @giscus/react 包

1
npm i @giscus/react

导入并使用 Giscus 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Giscus } from "@giscus/react";

export default function Comment() {
  return (
    <Giscus
      repo="yuanjavar/blog-commnets"
      repoId="R_kgDOGjYtbQ"
      category="General"
      categoryId="DIC_kwDOGjYtbc4CA_TS"
      mapping="pathname"
      reactionsEnabled="0"
      emitMetadata="0"
      theme="dark"
    />
  );
}

最后我们看下效果

img.png

学习交流

如果你觉得文章有帮助，请帮忙转发给更多的好友，或关注公众号：猿java，持续输出硬核文章。

drawing