前言
在开发 Web 应用时,用户的评论是一种必不可少的交流方式。而在 Github 上,人们也喜欢评论和分享自己的看法和经验。如果我们能够在自己的网站或应用中引用 Github 上的评论,那么就可以让自己的交流和互动更加便捷和丰富。本文将介绍如何使用 npm 包 ca-github-comments 实现这一功能。
ca-github-comments 的原理
ca-github-comments 可以让你在任何网页上使用 Github 的 Issue 作为留言板,并直接从 Issue 中获得评论。它的原理是将 Github Issue 的评论嵌入到你的网页中,将 Issue 的链接设置为评论框里的联系方式。
使用步骤
安装
要使用 ca-github-comments,首先需要安装它。在终端中打开你的工程目录,输入以下命令:
npm install --save ca-github-comments
导入
在你的网页中导入 Node 模块,将 ca-github-comments 模块实例化后,传入你的 Github OAuth 应用程序的配置信息和 Issue 相关的属性信息。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ---------------- ------- ------ ---- ----------------------------- ------- ---------------------------------------------------- -------- ----- ------- - - ------ --- ------ ----- ----- --- ------ ----- ------- --- ------ ----- ---- ------ - ---------- --- ------ ----- ----- ----------- -------------- --- ------ ----- ----- --------------- ------ --------------- - -- ----- ---------------- - --- -------------------------- ---------------------------------------------- --------- ------- -------
在上方的代码中,其中的 owner、repo 和 number 是 Issue 的连接信息,client_id 和 client_secret 是 OAuth 应用程序的配置信息,scope 是获取仓库权限的范围。
配置 Github OAuth 应用程序
要使用 ca-github-comments,需要在 Github 上创建一个新的 OAuth 应用程序,并在提供 OAuth 应用程序时向 Github 请求访问仓库的权限。以下步骤帮助你完成这一操作:
- 在你的 Github 帐户设置页面中,转到开发人员设置区域。
- 点击“OAuth 应用程序”选项卡,并选择“注册一个新的应用程序”按钮。
- 输入应用程序的名称和主页,并将授权回调 URL 设置为本地服务器的回调网址。
- 获取 client_id 和 client_secret,将它们保存在最初设置时的应用程序设置页面中。
- 授予相应的仓库访问权限。
更复杂的自定义
如果你想要对评论框的更多细节进行自定义,可以使用以下选项:
title
: 自定义的评论框的标题。limit
: 设置评论数量的限制。icon
: 自定义评论框的图标。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ---------------- ------- ------ ---- ----------------------------- ------- ---------------------------------------------------- -------- ----- ------- - - ------ --- ------ ----- ----- --- ------ ----- ------- --- ------ ----- ---- ------ - ---------- --- ------ ----- ----- ----------- -------------- --- ------ ----- ----- --------------- ------ --------------- -- ------ -------- ------ --- ----- --- ---- -- ----- ---------------- - --- -------------------------- ---------------------------------------------- --------- ------- -------
示例
在你的网站或应用程序中使用 ca-github-comments 进行评论和互动。你可以在 Github 上为你的网站或应用程序的代码库打开 Issue,然后使用 ca-github-comments 将这些 Issue 的评论嵌入到你的网页中。
小结
本文介绍了如何使用 npm 包 ca-github-comments 实现网页评论功能。我们掌握了安装、导入、配置和自定义 ca-github-comments 的技能,也了解了如何充分利用 Github Issue 在网站中进行评论和互动。如果你想更深入地了解这个话题,请阅读 ca-github-comments 的文档。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005597881e8991b448d7009