使用 GitHub 讨论来托管我的 Astro 博客评论和反应

Bertha 。 2024-03-16 21:29 10阅读 0赞

在撰写本文之前，我一直在为我的博客文章使用定制的评论部分。  
这包括[使用 PlanetScale 和 Prisma 作为 ORM 设置一个数据库，以及一个 TRPC 服务器来处理请求][PlanetScale _ Prisma _ ORM _ TRPC]，这对于一个简单的评论部分来说是很多工作。  
即使那样，它也不是完美的，因为我不得不手动清理垃圾评论（因为我懒得添加身份验证:-D），我不支持回复评论，而且我没有反应.

[当我阅读TkDodo][PlanetScale _ Prisma _ ORM _ TRPC]网站上的一篇博客时，我注意到他在评论部分使用[GisCus 。][PlanetScale _ Prisma _ ORM _ TRPC]  
GisCus 基于 GitHub 讨论，因此我已经将此功能作为我托管网站的存储库的一部分提供给我。  
设置非常简单，在 GisCus 网站上，您可以选择要使用的存储库，它会生成一个脚本供您包含在您的网站中。  
这看起来像这样：

空白处会自动填写存储库名称、存储库 ID、类别名称和类别 ID。 
我唯一注意到的是，使用默认`<script>`标签，单击“使用 GitHub 登录”按钮会刷新整个页面，并且不会向下滚动到评论部分。 
对我来说这很烦人，所以我决定改用[GisCus React 组件][PlanetScale _ Prisma _ ORM _ TRPC]。 
该组件非常易于使用，您只需安装它`npm install @giscus/react`，然后将其导入到您的 React 组件中。 
您需要传递给组件的 props 与 script 标签中的数据属性相同，但采用驼峰式而非 kebab 式。

<code>import * as React from 'react';
 import Giscus from '@giscus/react';
 
 const id = 'inject-comments';
 
 const Comments = () => {
 const [mounted, setMounted] = React.useState(false);
 
 React.useEffect(() => {
 setMounted(true);
 }, []);
 
 return (
 <div id={id}>
 {mounted ? (
 <Giscus
 id={id}
 repo="[ENTER REPO HERE]"
 repoId="[ENTER REPO ID HERE]"
 category="[ENTER CATEGORY HERE]"
 categoryId="[ENTER CATEGORY ID HERE]"
 mapping="pathname"
 reactionsEnabled="1"
 emitMetadata="0"
 inputPosition="top"
 lang="en"
 loading="lazy"
 />
 ) : null}
 </div>
 );
 };
 
 export default Comments;
 </code>

为了在我创建的每个博客上都有这个评论部分，我更新了我的`BlogLayout.astro`（我用来包装我所有的博客）文件以包含这个组件。该文件中的相关部分：

你可以看到我只在浏览器空闲时使用Astro 的内置[客户端指令加载组件。][Link 1]

就是这样！  
我的博客文章的功能齐全的评论部分，无需管理数据库或身份验证。  
希望对你也有用！[完整代码可以在我的 GitHub 上][PlanetScale _ Prisma _ ORM _ TRPC]  
找到。

[PlanetScale _ Prisma _ ORM _ TRPC]: https://zhifj.com
[Link 1]: http://telegeram1.com