评论区

实现方法

通过 localized-footer 为每一个页面的末尾增加一段 html 代码：

{
  "plugins": ["localized-footer"],
  "pluginsConfig": {
    "localized-footer": {
      "filename": "gitbook/comment.html"
    }
  }
}

参数介绍

创建目录用于存放相关文件，我创建了目录 gitbook 用于存放相关文件，文件名为 comment.html 。

我们先单独看一下评论区控件的代码：

const gitalk = new Gitalk({
  clientID: "GitHub Application Client ID",
  clientSecret: "GitHub Application Client Secret",
  repo: "GitHub repo",
  owner: "GitHub repo owner",
  admin: [
    "GitHub repo owner and collaborators, only these guys can initialize github issues"
  ],
  createIssueManually: true,
  id: document.title
});

clientID 和 clientSecret 需要通过在 GitHub 上注册获得：https://github.com/settings/applications/new 。

感谢 @moon548834 的提醒：注册中的 callback URL 不可以随便写！！必须和主页一样 (对于本例是 https://xy-plus.github.io) 。否则用户授权登录会有问题。会出现 redirect_uri_mismatch 问题导致无法评论和初始化 issue 。

由于评论区与 GitHub issue 关联，所以需要为每个页面创建一个 issue ，createIssueManually: true 使得管理员能够一键创建 issue ，issue 的标题为 id ，这里使用 document.title 作为页面 id 。

快速生成

1. 修改 profile.conf ，将参数修改为你自己的。注意格式不要乱，因为这一段将被直接嵌入 html 。
2. 执行 set_file.sh ， gitbook/comment.html 将自动根据 profile.conf 生成。

参考代码

当然，你也可以复制我的代码。由于未知的原因（我太菜），下面那段代码需要两次 const gitalk = new Gitalk 填写两次参数，如果有更好的实现方式请提出，谢谢。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"
/>
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<div id="gitalk-container" style="margin: 5%"></div>
<script>
  const gitalk = new Gitalk({
    clientID: '"GitHub Application Client ID"',
    clientSecret: "GitHub Application Client Secret",
    repo: "GitHub repo",
    owner: "GitHub repo owner",
    admin: [
      "GitHub repo owner and collaborators, only these guys can initialize github issues"
    ],
    createIssueManually: true,
    id: document.title
  });
  gitalk.render("gitalk-container");
</script>
<script>
  require(["gitbook"], function(gitbook) {
    const gitalk = new Gitalk({
      clientID: "GitHub Application Client ID",
      clientSecret: "GitHub Application Client Secret",
      repo: "GitHub repo",
      owner: "GitHub repo owner",
      admin: [
        "GitHub repo owner and collaborators, only these guys can initialize github issues"
      ],
      createIssueManually: true,
      id: document.title
    });
    gitbook.events.bind("page.change", initMygitalk);
    function initMygitalk() {
      gitalk.render("gitalk-container");
    }
  });
</script>