在现代 web 开发中，为了提高博客或者网站的互动性，通常都会开启评论区。而评论系统同时也有管理和维护的成本。为了降低成本，我们可以使用 Github Issues 作为评论系统。metalsmith-gh-comments 是一个基于该想法的 npm 包，本文将会详细介绍如何使用该包在自己的博客或者网站上集成 Github Issues 评论系统。
1. 安装
第一步，我们需要在本地项目中安装 metalsmith-gh-comments
npm install metalsmith-gh-comments --save-dev
2. 创建一个 Github 应用
接下来我们需要创建一个可以访问的 Github 应用。
- 通过 Github 用户名登陆到 OAuth application registration page。
- 输入应用名称、主页 URL、简介。
- 在
Authorization callback URL输入框中，输入http://localhost:8080/，并保存。
3. 创建 Github personal access token
在使用的时候，我们需要访问 Github API ，所以需要一个 personal access token。这个 token 可以通过访问 Github Token creation page 获得。
- 在
Token description的输入框中输入描述。 - 在
select scopes中选择public_repo。 - 点击
Generate token。
保持 token 值。
4. 代码集成
在我们的博客项目中，我们需要配置 metalsmith-gh-comments， 并调用 metalsmith 的 build() 方法。
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -------- - -------------------------------
--- ------- - ------------------------------
--- -------- - ----------------------------------
---------------------
---------------
----- ----------------------
--------- ---------------
------------- -------------------
------------ ---------------------------
----- ---------
---
----------------
--------------
------- ------------
---
-------------------- -
-- ----- ----- ----
------------------ ------------
---在上面的代码中，我们调用了 metalsmith-gh-comments ， 并传入以下参数：
repo: 你的 Github 仓库地址，在上面的例子中，用来访问博客网站。clientId: 上文提到的 Github 应用 client ID。clientSecret: 上文提到的 Github 应用 client secret。accessToken: 上文提到的 Github 用户 access token。path: 我们期望存储评论的文件夹路径。 默认为/comment。
5. 添加评论
现在我们已经可以在博客上查看评论，但是我们需要添加评论。
我们只需要在 Github isuess 页面中添加新的评论。然后在下一次构建博客页面时，我们的评论会被拉取到博客系统中。
6. 总结
metalsmith-gh-comments 是一个非常便捷的开源 npm 包，可以让我们毫不费力地在博客页面添加 Github Issues 评论系统。通过简单的设置和配置，我们就可以快速轻松地将评论功能添加到自己的博客中。
除了该 npm 包外， 还存在其他一些评论方案如 Disqus 和 Livere。每个方案都有自己的优点和缺点。因此开发者应该对于自己的需求进行深入了解，选择合适的评论系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc1f8