在许多开源项目中，会有一个贡献者列表，用于展示每个参与者的贡献度和头像，从而展示这个项目的活跃度和社区合作精神。这样一个列表通常需要手动维护，而 github-contributor 包就是为了方便在前端项目中集成这个功能而提供的。
安装 github-contributor
在终端中输入以下命令来安装 github-contributor：
npm install github-contributor --save-dev
使用 github-contributor
在项目中引入 github-contributor：
import GitHubContributor from 'github-contributor';
接着创建一个 GitHubContributor 实例：
/**
* GitHubContributor 实例
*/
const contributor = new GitHubContributor({
username: 'leerduo', // 你的 GitHub 用户名
repository: 'github-contributor', // 你要展示贡献者的 GitHub 仓库名
branch: 'master' // GitHub 仓库默认分支（可选，默认为 master）
})在上述代码中，需要指定 GitHub 用户名和要展示的仓库名。如果仓库是私有的，你还需要提供一个 GitHub API 访问令牌：
const contributor = new GitHubContributor({
username: 'leerduo',
repository: 'github-contributor',
token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
})在获取到要展示的贡献者信息后，你还需要指定在哪个容器中展示这个列表：
contributor.render({
el: '#contributor-graph', // 容器的 id
showFullName: true, // 是否展示贡献者的全名（可选，默认为 true）
showProfileLink: true, // 是否展示贡献者的 GitHub 链接（可选，默认为 true）
})以上代码指定将贡献者列表展示到具有 #contributor-graph ID 的 DOM 元素中。你还可以通过添加 showFullName 和 showProfileLink 属性来指定是展示贡献者的全名和 GitHub 链接。
示例代码
下面是一个完整的代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------------
------- ----------------------------------------------------------------------------
-------
------------------- -
------ -----
------- -----
-------------- ----
------------- ----
--------------- -------
-
--------
-------
------
---- ------- ---
---- -----------------------------
--------
----- ----------- - --- -------------------
--------- ----------
----------- --------------------
--
--------------------
--- ---------------------
------------- -----
---------------- -----
----------- ---
----------- ---------
------------ -----
---------- ------ ------ --------
--
---------
-------
-------上述示例展示了一个带有头像和链接的贡献者列表。你可以按照代码中的方式修改样式和选项，从而满足你的需求。
总结
github-contributor 包提供了一个方便的方法来展示 GitHub 项目的贡献者列表。通过简单的配置，你就可以在你的前端项目中添加这个功能，展示你的项目的活跃度和社区贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f727758414c