使用GitHub讨论来主持我的Astro博客评论和反应-DEV365 开发者社区

在写作的那天，我一直在博客文章中使用自定义评论部分。
其中包括setting up a database with PlanetScale and Prisma as ORM, and a TRPC server to handle the requests，这是一个简单评论部分的很多工作。
即使那样，这也不是完美的，因为我必须手动清理垃圾邮件评论（因为我懒得添加身份验证：d），所以我不支持回复评论，而且我没有反应。

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

<script
  src="https://giscus.app/client.js"
  data-repo="[ENTER REPO HERE]"
  data-repo-id="[ENTER REPO ID HERE]"
  data-category="[ENTER CATEGORY NAME HERE]"
  data-category-id="[ENTER CATEGORY ID HERE]"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

空白填充了存储库名称，存储库ID，类别名称和类别ID。
我唯一注意到的是使用默认的<script>标签，单击“使用github登录”按钮将刷新整个页面，并且不会向下滚动到评论部分。
对我来说，这很烦人，所以我决定使用GisCus React component。
此组件非常易于使用，您只需要使用npm install @giscus/react安装它，然后将其导入您的React组件。
您需要传递给组件的道具与脚本标签中的数据属性相同，但基于骆驼而不是kebab限制。

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;

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

<Comments client:idle />

您可以看到我仅在浏览器闲置时使用astro中的内置client directives加载组件。

就是这样！
我的博客文章的功能齐全的评论部分，而不必管理数据库或身份验证。
希望它也对您有用！
可以找到完整的代码on my GitHub。