零成本搭建评论区

这是今天的主题，借助于github discuss来实现免费的，稳定的，且非常非常方便接入的评论功能。非常简单，有手就行！

首先你要有GitHub 账号这个不必多说了吧

为了不干扰你的其他仓库，最好还是新建一个公开的仓库用于接受存储和管理博客区域的评论内容。

开始

回到你新建的这个仓库里，点击Settings设置，在默认的General里找到Features 在这里找到Discussions并勾选。

网上存在很多白嫖github discuss作为评论区的工具，我们使用giscus这个工具，进入giscus官网，复制你刚开的用于评论区的仓库地址，此时它会检测仓库是否能作为评论的条件，此时会无法通过检测，因为你还没有安装giscus。 打开giscus，点击安装即可。等安装成功了再返回刚才检测的那个页面重新复制你的仓库地址，此时就可以通过检测了。

页面discussion映射关系这里要求你勾选博客与评论区的映射关系，这里如果你的博客是类似于/[id]这样的pathname区别的就直接选择默认勾选的pathname即可，也就是说每一篇博客必须得有唯一的id来区分，类似掘金博客详情那样https://juejin.cn/post/7582469532326920228这里post/[id]就非常适合使用pathname作为映射关系了。而我的博客刚好也是如此能通过id来映射，所以直接无脑选它就对了。

通过检测后在Discussion 分类里选择你的discuss分类，这里推荐General作为讨论的主题。

Announcements比较适合仓库维护者发起和讨论，普通用户只能点赞和回复。

Ideas更偏舔和建议

Q&A 也是如此了，更加偏了问答了。

所以我们这里推荐使用General，选择之后继续下滑，在启动giscus这一栏里它会默认生成好评论需要的script，我们直接复制它就好。

如果你的博客是静态的，即每一篇均为一个html，那么直接复制这么的script到你的博客区域就可以了。但我的博客是使用nextjs搭建的且为实时渲染的应用，所以我直接复制这段script必然会出问题的。

我们可以安装@giscus/react这个库，然后把giscus提供的参数一一复制到@giscus/react提供的组件上

"use client";
import style from "./comments.module.css";
import Giscus from '@giscus/react'

export default function GiscusComments() {
  return (
    <div className={style.comments}>
      <div className={style.context}>
        <Giscus
          repo="[复制的data-repo]"
          repoId="[复制的data-repoId]"
          category="[复制的data-category]"
          categoryId="[复制的data-category]"
          mapping="pathname"
          strict="0"
          reactionsEnabled="1"
          emitMetadata="0"
          inputPosition="bottom"
          theme="preferred_color_scheme"
          lang="zh-CN"
          cross-origin="anonymous"
        ></Giscus>
      </div>
    </div>
  );
}

一一对应就好了，你也可以直接复制script 然后把script改成Giscus 然后全局替换data-为空就好了，更省事。

我这里是nextjs，我giscus不需要服务端渲染且它也不能被服务端渲染，所以切记要在最上面use client指定为客户端组件！！

---

最后说一句，白嫖真爽！！