头图

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

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

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

什么是“GitHub 讨论”?

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

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

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

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

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

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

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

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

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

如何在你的博客中整合giscus

先决条件

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

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

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

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

转到 https://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代码库来支持它们。


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 740

封面图
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

Git 入门与实践
Git 入门与实践推荐:猴子都能懂的 GIT 入门Git --everything-is-loca 官方文档Git 教程-廖雪峰Git 的使用方式有很多。图形化 —— 小乌龟(Tortoise Git )、命令行—— git bash、IDE 集成等 ......目录1. 基础配置...

RainBow1阅读 2.2k

openKylin 0.9.5版本正式发布,加速国产操作系统自主创新进程!
2023年1月12日,中国桌面操作系统根社区openKylin(开放麒麟)正式发布openKylin 0.9.5操作系统版本。此版本充分适应5G时代需求,打通平板,PC等设备,实现多端融合,弥补了国产操作系统的短板,有效推动国产操作...

openKylin6阅读 7.4k

封面图
Git 分支管理策略汇总
我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的流程。所以查了一些资料,总结出下面这篇文章,一共包含四种常见的分支管理策略,分享给大家。

alwaysbeta3阅读 931

封面图
Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd
近日,Serverless 开发者平台 Serverless Devs 重磅发布基于 Serverless 架构的轻量级 CI/CD 框架——Serverless-cd。Serverless-cd 是一款运行在 Serverless 架构上的功能强大而灵活,安全,低成本的CI/CD开源框架...

Serverless1阅读 316

git cherry-pick 同步修改到另一个分支
我们在开发中有时会遇到,需要将另一个分支部分修改同步到当前分支。如下图,想把 devA 分支中 commit E 和 F,同步到下面绿色的 devB 分支中。

大数据王小皮阅读 1.8k

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏