npm 包 ca-github-comments 使用教程

阅读时长 5 分钟读完

前言

在开发 Web 应用时,用户的评论是一种必不可少的交流方式。而在 Github 上,人们也喜欢评论和分享自己的看法和经验。如果我们能够在自己的网站或应用中引用 Github 上的评论,那么就可以让自己的交流和互动更加便捷和丰富。本文将介绍如何使用 npm 包 ca-github-comments 实现这一功能。

ca-github-comments 的原理

ca-github-comments 可以让你在任何网页上使用 Github 的 Issue 作为留言板,并直接从 Issue 中获得评论。它的原理是将 Github Issue 的评论嵌入到你的网页中,将 Issue 的链接设置为评论框里的联系方式。

使用步骤

安装

要使用 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 请求访问仓库的权限。以下步骤帮助你完成这一操作:

  1. 在你的 Github 帐户设置页面中,转到开发人员设置区域。
  2. 点击“OAuth 应用程序”选项卡,并选择“注册一个新的应用程序”按钮。
  3. 输入应用程序的名称和主页,并将授权回调 URL 设置为本地服务器的回调网址。
  4. 获取 client_id 和 client_secret,将它们保存在最初设置时的应用程序设置页面中。
  5. 授予相应的仓库访问权限。

更复杂的自定义

如果你想要对评论框的更多细节进行自定义,可以使用以下选项:

  • 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

纠错
反馈