前言
在前端开发中，我们经常需要在网页中嵌入一些 Github 项目信息，如 star 数量、fork 数量等。这时候我们就可以使用 github-buttons 这个 npm 包来实现这一功能。这篇文章将会详细介绍该 npm 包的使用方法，从而让大家快速上手使用。
安装
使用 npm 安装该包：
npm install github-buttons
基本使用
使用该 npm 包可以简单地创建一个按钮，该按钮可以根据对应 Github 项目的 star 数量、fork 数量等信息来进行相应的展示。将以下代码粘贴到你的 HTML 文件中，就可以在网页上展示该按钮了。
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------------ ------- ------ ---- ------ --- ----- ---------------- -------------------------------------------------------- -- ---- ---- --- ---- ------------------ ---------------------- -------------------- ---------------- ------------------------ ---- -- -- -- --- ------- ---------------------------------------------------------------- ------- -------
在该示例代码里，我们通过 data-username 指定用户名，data-repo 指定仓库名，data-type 指定按钮类型（比如 star 数量），data-size 指定按钮大小。
高级使用
除了基本使用外，该 npm 包还提供了一些高级用法。
缓存
默认情况下，该 npm 包会在网页加载时请求 Github API 以获取项目信息，因此每次访问网页时都需要加载该信息，导致网页加载时间较长。为了解决这一问题，可以开启缓存，将项目信息缓存到本地，从而加快网页加载速度。在该示例代码里加入如下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
-------
------
---- ------ ---
----- ---------------- -------------------------------------------------------- --
---- ---- ---
--------
-------------------------- - -----
---------
---- ---- ---
---- ------------------ ---------------------- -------------------- ---------------- ------------------------
---- -- -- -- ---
------- ----------------------------------------------------------------
-------
-------在该示例代码里，我们通过设置 window.githubButtons.cache 来开启缓存。
自定义样式
默认情况下，该 npm 包提供了一套样式，但是有时候我们需要自定义样式，此时可以在创建按钮时指定 data-style，并在 CSS 文件中自定义样式。以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
---- ----- ---
-------
----------- -
------ -----
----------------- --------
------------- --------
-
--------
-------
------
---- ------ ---
----- ---------------- -------------------------------------------------------- --
---- --------- ---
---- ------------------ ---------------------- -------------------- ---------------- ----------------- ------------------------------
---- -- -- -- ---
------- ----------------------------------------------------------------
-------
-------在该示例代码里，我们指定了一个名为 custom-btn 的样式，并在创建按钮时将 data-style 设为该样式名。
强制更新
有时候我们需要在不刷新页面的情况下更新按钮信息，此时可以使用 update 方法。以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ------------
---- ---- ---
--------
-------------------------- - -----
---------
-------
------
---- ------ ---
----- ---------------- -------------------------------------------------------- --
---- ---- ---
---- ------------------ ---------------------- -------------------- ---------------- ------------------------
---- ---- ---
------- -----------------------------------
---- -- -- -- ---
------- ----------------------------------------------------------------
--------
-------- ----------- -
--- ---- - -----------------------------------------
--- ---- - - -- - - ------------ ---- -
-------------------------------------
-
-
---------
-------
-------在该示例代码里，我们创建了一个按钮，并且提供了一个 <button> 标签，当点击该按钮时，就会强制刷新按钮信息。在 updateBtn() 函数中，我们可以通过 querySelectorAll('.github-btn') 来获取所有按钮，然后通过 githubButtons.update() 方法来强制更新按钮信息。
结论
通过这篇文章的介绍，相信大家已经掌握了 npm 包 github-buttons 的基本使用方法和高级用法，这将大大简化我们在前端开发中的工作，从而让我们能够更加专注于业务逻辑的实现，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef186768c4ce90ee4ca3b04