如何使用 GitHub 讨论作为您博客的聊天系统

如果您有个人博客，您可能会使用评论系统来管理博客的讨论和评论。如果是这样，是时候考虑更新您的评论系统了。

在GitHub Discussions(讨论区)的帮助下，你可以把你的博客的评论提升到一个新的水平。在这篇文章中，我将解释如何将GitHub讨论整合到你的博客中并充分利用它。

什么是“GitHub 讨论”？

GitHub 讨论是一个可以在每个 GitHub 仓库上启用的论坛。它使开发者能够轻松地讨论新功能，从社区获得反馈，创建投票，发布公告等。

GitHub讨论区是开发者和社区成员的一站式合作场所。

如何使用 GitHub 讨论作为聊天系统

为了将GitHub讨论整合到你的博客，我们将使用 giscus。

giscus是一个由GitHub讨论支持的评论系统。它可以让你把仓库中的讨论整合到你的博客中。

你的读者可以在你的博客上留下评论，这些评论会同时出现在你的博客和你的代码库的讨论页面上。

使用讨论区作为你的博客聊天系统的优势

它是完全免费的
没有广告或跟踪
它超级强大
你对评论有完全的控制权和完全的修改权。
有很多主题
它是相当可自定义的
你可以在你自己的服务器上自行托管

请记住，此工具主要适用于开发者博客，因为大多数开发人员使用 GitHub。

如何在你的博客中整合giscus

先决条件

一个博客（你必须能够获得源代码）
一个 GitHub 帐户
你选择的代码库必须是公开的

首先，你需要为你的代码库启用讨论功能。

转到代码库Settings -> 在Features部分下 -> 勾选Discussions框。

接下来，在你的代码库中安装giscus应用程序。

转到 github.com/apps/giscus，按照提示操作，并仅授予对选定代码库的访问权限。

现在是重要的部分：我们需要配置giscus小部件。

首先，进入giscus主页，滚动到Configuration部分。

选择您的小部件语言，这是您想要显示小部件的语言。

然后输入你的代码库名称和你的用户名，如用username/reponame。

对于页面↔️讨论映射，我建议选择 "讨论标题包含页面URL"。但根据你的需要，选择最适合你的那一个。

接下来，在你的GitHub 代码库上的讨论页面创建一个类别——比如 "Comments（评论）"——或者选择现有的类别。

创建讨论类别选择一个类别

然后根据需要启用可选功能。

接下来，选择主题。不要担心，你可以通过编程来切换不同的主题。

最后，复制并粘贴生成的代码。

Giscus将根据你的设置生成一个脚本标签，你可以将其粘贴到你的代码中。但我们将看到如何使用giscus组件。

如何使用 giscus 组件

如果你的博客是用React/Vue/Svelte或Web组件构建的，那么你可以安装giscus组件。

例如，要在React中集成giscus，请做以下工作：

安装 giscus 包。

npm i @giscus/react
or
yarn add $giscus/react

然后在你的组件中导入 giscus 并使用它。复制我们在上一步得到的属性，从所有的属性中删除 data-，并将属性转化为有效的 jsx 属性。

import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

对其他框架来说，这基本上是同样的程序。

这是最终结果

这就是整个事情的运作方式：

总结

在本文中，我们了解了将 GitHub 讨论用作聊天系统的好处。我们还学习了如何在我们的网站中创建和集成 giscus 小部件。

我希望你觉得这很有帮助，确保star了giscus GitHub代码库来支持它们。

翻译自www.freecodecamp.org/，作者：Rakesh Potnuru