什么是 npm 包 utterance
npm 包 utterance 是一个能够将 GitHub Issue 转化为评论区的工具。利用 utterance，你不再需要手动维护你的博客、网站的评论功能，能够大幅减少你的维护工作量。
如何使用 npm 包 utterance
1. 添加 utterances 的代码
首先，你需要在你的网站页面上添加如下代码片段：
<script src="https://utteranc.es/client.js"
repo="<OWNER>/<REPO>"
issue-term="<PATH>"
theme="<THEME>"
crossorigin="anonymous"
async>
</script>接下来，我们来一一解释这段代码的含义：
- owner: 你的 GitHub 用户名或组织名称
- repo：你的 GitHub 项目名称
- issue-term：该参数是你当前页面对应的 Unique Path，可以自动匹配到 GitHub Issues 里具体讨论的 Issue 页面。注意，issue-term 参数不可与 repo 参数一起使用。
- theme：utterances 的主题，默认是 Github-light，也可以自定义。
2. 创建 Github APP
由于 utterances 对于 GitHub Issues 的读取和写入有权限问题，因此需要创建一个 Github APP，并向你的 repository 授权。
具体操作步骤：
- 打开 https://github.com/settings/apps/new 网址
- 填写 App 名称和 GitHub 仓库地址
- 在下方勾选需要授权的项，包括 Issues，Pull Requests 即可
- 完成后在生成的 APP 详细信息页面获取 APP ID 和 APP Secret
3. 配置 ACCESS_TOKEN
存储 ACCESS_TOKEN 有多种方式，这里我们介绍使用 LocalStorage 存储。
首先，需要向用户请求 GitHub 官方授权，通过生成的 Github APP 进行授权操作，获取到 ACCESS_TOKEN。
<a href="https://github.com/login/oauth/authorize?client_id=<CLIENT_ID>&scope=public_repo"><Button>Click to authorize</Button></a>
上述代码中的 CLIENT_ID 需要替换成你自己的。
授权后，接下来需要将 ACCESS_TOKEN 以及刚才配置的 Github 相关信息进行存储。以 LocalStorage 为例，示例代码如下：
-- -------------------- ---- ------- -- - --- ---- ---- ----- --- - --------------------- ----- ------------ - --- --------------------- ----- ---- - ------------------------- -- -- ------------ ----------------------------------------------------------------------------------------------------------------------- - ------- ------- -------- - ------- ------------------ -- -- -------------- -- ---------------- -------------- -- ------------------------------------ ------------------------ -- -- ------ ---- -------------------------------------------- ------------------ --------------------------------------------------- -----------------
4. 使用 utterances
最后，就可以在你的网页或博客中直接使用 utterances 了。当用户评论时，可以在 GitHub Issues 中进行相应的回复和交互操作。
总结
通过以上步骤的操作，我们可以将 utterances 工具应用到自己的网站或博客中，为用户打造更加方便快捷的评论体验。
值得注意的是，如果遇到使用上的困难或问题，可以及时参考官方文档或查找相关社区资源。通过不断的学习和实践，我们可以更好的掌握这样一种强大的工具，带来更好的用户体验和博客管理效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d781e8991b448e031a