简介
NPM 是一个很受欢迎的 JavaScript 包管理器。它允许开发者在应用程序中使用其他人创建的包，以便有效地构建和管理项目。其中，top-gitment 是一个为 GitHub Pages 打造的评论组件，可以将评论存储在 Gitment 中，展示在 GitHub Pages 上。
本篇文章将详细介绍如何使用 top-gitment，使您可以快速将评论功能添加到您的网站上。
安装
在使用 top-gitment 之前，您需要先在本地或者您的 web 项目中安装它。在终端命令行中输入以下命令，即可完成安装：
npm install top-gitment --save
若您的 Web 项目是使用 npm 的话，在项目已经在上述组件中使用，那么您的项目依赖也已经被执行了。
使用
初始化
top-gitment 的初始化是在 window 对象上，所以首先必须确保该对象是已经注册的。接下来，我们将演示如何使用 top-gitment 初始化：
-- -------------------- ---- -------
------ ------- ---- --------------
----- ------- - --- ---------
--- --- ---- -- ------------
------ --- ------ ----
----- -----------
------ -
---------- -- ------ ----- ---- ------ ----------
-------------- -- ------ -------------------------
--
---
---------------------------上述代码中，id 是页面的唯一表示，例如链接地址，owner 和 repo 是存储评论的 GitHub 仓库。oauth 是能够创建一个验证应用程序并使用 OAuth API 进行身份验证的客户端。client_id 和 client_secret 通常需要在 GitHub App 设置中生成。最后使用 render 方法将评论组件渲染出来。
自定义样式
在大多数情况下，您可能需要自定义评论框的样式以适应您的网站主题。top-gitment 允许用户自定义评论框的外观，您可以修改组件中 CSS 样式表的颜色、字体大小等属性以实现自己的风格。
下面是一个自定义 gitment 的 CSS 样式例子：
-- -------------------- ---- ------- ------------------- --------------- - -------- ----- - --------------- - ---------- ------- -------------- ----- - ------------------- - -------- ---- ---------- ----- -------------- ---- - --------------- - ----------- ----- -------- ---- -------------- ---- ---------- ----- ------- -------- ----------------- -------- ------ ------ -
在您的页面上，您可以使用 link 标签将您的样式添加到您的 HTML 文件中。
集成 Gitment 到 React
在 React 应用程序中集成 top-gitment 一般有两种方法，一种是将 top-gitment 渲染到其他组件中，另外一种是将 top-gitment 作为子页面单独实现。
下面是一个将 top-gitment 实现于 React 的示例，其中 top-gitment 被渲染在 MyComponent 组件中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- --------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
--- -------------------- -- ------------------
--
-
------------------- -
----- ------- - --- ---------
--- --------------
------ --- ------ ----
----- ----- ------ ----
------ -
---------- -- ------ ----- ---- ------ ----------
-------------- -- ------ ----- ---- ------ ----------
--
---
------------------------------
-
-------- -
------ -
---- -------------------------
--
-
-
------ ------- ------------使用示例
以上已经介绍了如何使用 top-gitment 和将其集成到 React 应用程序中，下面是一些关于 top-gitment 使用的终端命令：
- 安装 top-gitment：
npm install top-gitment --save。 - 构建 top-gitment：
npm run build。 - 运行 top-gitment：
npm start。
结论
top-gitment 是一个极为方便的评论组件，可以将评论存储在 GitHub 上，并可自定义组件的样式，也方便集成 React 应用程序。希望本篇文章可以对您使用 top-gitment 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d481e8991b448e0231