关于github:如何使用-GitHub-讨论作为您博客的聊天系统

5次阅读

共计 1743 个字符，预计需要花费 5 分钟才能阅读完成。

如果您有集体博客，您可能会应用评论零碎来治理博客的探讨和评论。如果是这样，是时候思考更新您的评论零碎了。

在 GitHub Discussions(讨论区)的帮忙下，你能够把你的博客的评论晋升到一个新的程度。在这篇文章中，我将解释如何将 GitHub 探讨整合到你的博客中并充分利用它。

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

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

为了将 GitHub 探讨整合到你的博客，咱们将应用 giscus。

giscus 是一个由 GitHub 探讨反对的评论零碎。它能够让你把仓库中的探讨整合到你的博客中。

你的读者能够在你的博客上留下评论，这些评论会同时呈现在你的博客和你的代码库的探讨页面上。

应用讨论区作为你的博客聊天零碎的劣势

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

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

先决条件

一个博客（你必须可能取得源代码）
一个 GitHub 帐户
你抉择的代码库必须是公开的

首先，你须要为你的代码库启用探讨性能。

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

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

转到 https://github.com/apps/giscus，依照提醒操作，并仅授予对选定代码库的拜访权限。

当初是重要的局部：咱们须要配置 giscus 小部件。

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

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

=

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

=

对于 页面↔️探讨映射，我倡议抉择 “ 探讨题目蕴含页面URL“。但依据你的须要，抉择最适宜你的那一个。

接下来，在你的 GitHub 代码库上的探讨页面创立一个类别——比方 “Comments（评论）”——或者抉择现有的类别。

而后依据须要启用可选性能。

接下来，抉择主题。不要放心，你能够通过编程来切换不同的主题。

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

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 代码库来反对它们。

正文完