giscus 是一个简单易用的评论系统，它使用 GitHub Discussions 的作为存储和管理评论的后端。网站的访客可以使用 GitHub 账号登录并发表评论，当有新评论时 GitHub 还会用邮件通知网站的主人。本文记录了基于 giscus 为网站添加评论系统的过程。整个过程还算比较顺利，但中途遇到的关于一键配置多个页面展示评论系统的问题也困扰了我很久。将其记录于此，希望能帮助自己和他人。

 

页面展示

 

配置 giscus

根据 Material for MkDocs 官方提供的教程，完成以下步骤：

1.安装 giscus GitHub App。这一步只需要在 GitHub 官网上点击安装即可。

2.访问 giscus 官网，配置与 giscus 评论系统关联的 GitHub 仓库。

请确保：

1.该仓库是公开的，否则访客将无法查看 Discussions。

2.giscus app 已安装，否则访客将无法评论和回应。

3.Discussions 功能已在你的仓库中启用。

存放评论的仓库与搭建网站的仓库不是必须相同的

注意，存放评论的仓库与搭建网站的仓库不是必须相同的。前者必须是 Public 的仓库（否则网站访客就无法看到评论信息），但后者可以是 Private 的仓库。当然，这两者也可以是同一仓库。

这一步会得到类似于下面这种格式的配置代码：

<script
src="https://giscus.app/client.js"
data-repo="<username>/<repository>"
data-repo-id="..."
data-category="..."
data-category-id="..."
data-mapping="pathname"
data-reactions-enabled="1"
data-emit-metadata="1"
data-theme="light"
data-lang="en"
crossorigin="anonymous"
async
>
</script>
 
在 HTML 文件中

如果你直接使用 HTML 文件，通常可以将代码插入到 <body> 标签的底部，紧接着在页面内容之后。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>页面标题</h1>
    <p>这里是页面的内容...</p>

    <!-- 在这里插入 giscus 配置代码 -->
    <script
    src="https://giscus.app/client.js"
    data-repo="<username>/<repository>"
    data-repo-id="..."
    data-category="..."
    data-category-id="..."
    data-mapping="pathname"
    data-reactions-enabled="1"
    data-emit-metadata="1"
    data-theme="light"
    data-lang="en"
    crossorigin="anonymous"
    async
    >
    </script>
</body>
</html>