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

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

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><script
  </span><span style="color:var(--syntax-name-color)">src=</span><span style="color:var(--syntax-string-color)">"https://giscus.app/client.js"</span>
  <span style="color:var(--syntax-name-color)">data-repo=</span><span style="color:var(--syntax-string-color)">"[ENTER REPO HERE]"</span>
  <span style="color:var(--syntax-name-color)">data-repo-id=</span><span style="color:var(--syntax-string-color)">"[ENTER REPO ID HERE]"</span>
  <span style="color:var(--syntax-name-color)">data-category=</span><span style="color:var(--syntax-string-color)">"[ENTER CATEGORY NAME HERE]"</span>
  <span style="color:var(--syntax-name-color)">data-category-id=</span><span style="color:var(--syntax-string-color)">"[ENTER CATEGORY ID HERE]"</span>
  <span style="color:var(--syntax-name-color)">data-mapping=</span><span style="color:var(--syntax-string-color)">"pathname"</span>
  <span style="color:var(--syntax-name-color)">data-strict=</span><span style="color:var(--syntax-string-color)">"0"</span>
  <span style="color:var(--syntax-name-color)">data-reactions-enabled=</span><span style="color:var(--syntax-string-color)">"1"</span>
  <span style="color:var(--syntax-name-color)">data-emit-metadata=</span><span style="color:var(--syntax-string-color)">"0"</span>
  <span style="color:var(--syntax-name-color)">data-input-position=</span><span style="color:var(--syntax-string-color)">"bottom"</span>
  <span style="color:var(--syntax-name-color)">data-theme=</span><span style="color:var(--syntax-string-color)">"preferred_color_scheme"</span>
  <span style="color:var(--syntax-name-color)">data-lang=</span><span style="color:var(--syntax-string-color)">"en"</span>
  <span style="color:var(--syntax-name-color)">crossorigin=</span><span style="color:var(--syntax-string-color)">"anonymous"</span>
  <span style="color:var(--syntax-name-color)">async</span>
<span style="color:var(--syntax-error-color)">></script></span>
</code></span></span>

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-error-color)">*</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-name-color)">React</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">Giscus</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@giscus/react</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">id</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">inject-comments</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">Comments</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">mounted</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setMounted</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">React</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">);</span>

  <span style="color:var(--syntax-name-color)">React</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">setMounted</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[]);</span>

  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">mounted</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-text-color)">(</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Giscus</span>
          <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-name-color)">repo</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"[ENTER REPO HERE]"</span>
          <span style="color:var(--syntax-name-color)">repoId</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"[ENTER REPO ID HERE]"</span>
          <span style="color:var(--syntax-name-color)">category</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"[ENTER CATEGORY HERE]"</span>
          <span style="color:var(--syntax-name-color)">categoryId</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"[ENTER CATEGORY ID HERE]"</span>
          <span style="color:var(--syntax-name-color)">mapping</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"pathname"</span>
          <span style="color:var(--syntax-name-color)">reactionsEnabled</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"1"</span>
          <span style="color:var(--syntax-name-color)">emitMetadata</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"0"</span>
          <span style="color:var(--syntax-name-color)">inputPosition</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"top"</span>
          <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"en"</span>
          <span style="color:var(--syntax-name-color)">loading</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"lazy"</span>
        <span style="color:var(--syntax-text-color)">/></span>
      <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-string-color)">}</span>
    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">Comments</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><Comments client:idle />
</code></span></span>

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

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

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

猜你喜欢