Giscus：将 GitHub 讨论带到自己的博客

he_xuntao
703 阅读2分钟

之前一直在找一些能够嵌入到自己博客文章上，游客可以登录已有的社交体系账号进行评论回复的，网上找了一些，但不多数都是国外的社交平台，也不知道国内的有没有。

下面列出几个之前了解过的：

  • Facebook Comment - 许多网站都使用这种方法。但就我个人而言，我一点也不喜欢它的用户界面。修复任何东西都非常困难。另外，假设要粘贴代码，很难粘贴任何东西。（没用过，不打算用）
  • Disqus - 感觉这个很难登录（貌似要科学上网）。但我看很多博客用这种，他们中的大多数应该更多地用于Wordpress。（有待研究）
  • Github Discussion  Giscus** - 偶然发现了 Giscus，它使用 GitHub Discussion API 创建一个讨论频道。（主要介绍这个）

前提须知

  1. 必须要用GitHub登录，写博客一般都是技术类的，看的人估计都有GitHub账号。
  2. 它与GitHub Discussion 非常相关。如果有一天我将一篇文章移到另一个地方，这些评论将不会跟随，如果GitHub Discussion 崩溃了，那也就不能发表评论。
  3. 当有人这样评论时，没有通知提醒。
  4. 它是开源的。

开始安装 Giscus

前往Giscus一步一步进行

image.png

为存储库启用或禁用 GitHub Discussions 详细教程 前往

启用

image.png

当一切都完成时 我们需要粘贴的代码如下所示。giscus.app 帮助我们自动填充所有属性。粘贴它，你就完成了。

这是一个示例

import Head from 'next/head'
import { useMounted } from 'lib/use-mounted'
export default function Giscus() {
  const mounted = useMounted()
  return !mounted ? null : (
    <>
      <Head>
        <script
          src="https://giscus.app/client.js"
          data-repo="hexuntao/hexuntao.com"
          data-repo-id="YOUR_REPO_ID"
          data-category="General"
          data-category-id="YOUR_CATEGORY_ID"
          data-mapping="title"
          data-reactions-enabled="1"
          data-theme="light"
          crossOrigin="anonymous"
          async
        />
      </Head>
      <div className="giscus" />
    </>
  )
}

如果是 NextJS，就用它。next/head如果是React，它是一个SPA，我推荐使用 Helmet，把脚本放在上面。<head>

之后创建一个空的div插入，className="giscus"之后浏览器加载完脚本就知道iframe组件要丢到这个div上了

avatar
文章
阅读
粉丝