前言
随着互联网的发展和技术的进步，开源的工具和库层出不穷，其中，一个能够为网页增添点睛之笔的小工具是 Github Corners。它可以为你的网站添加一个漂亮的小图标，同时也可以为你的 Github 仓库带来更多曝光度。这篇文章将会介绍如何在网页中使用 npm 包 github-corners，为你的网站添加一个优美的 Github Corners。
安装
首先，我们需要在命令行终端中，通过 npm 安装该包：
npm install github-corners --save
此时，我们已经安装好了 github-corners，下一步就是如何在我们的代码中使用它。
使用
我们可以在网页的 HTML 中创建一个 div 元素，然后在 JavaScript 代码中使用 github-corners 包中提供的 create 方法创建 Github Corners。
在 HTML 文件中加入如下代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ------------
-------
------
---- -------------------------
-------
-------然后，在 JavaScript 中使用如下代码创建 Github Corners：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
--------
----- ------------------------------------------
----- ------- -- ----
------ ------- -- -------
----- ---
------- -----
--------------- -------
---此时，我们的 Github Corners 图标已经成功添加到了我们的网页中。
参数说明
在上面的代码中，我们使用了 github-corners 包中提供的 create 方法，并传入了一些配置参数。下面就是一些参数的简要说明：
repo: Github 仓库地址。fill: 填充颜色，默认为#ff9800。color: 三角指示器颜色，默认为#fff。size: 大小，默认为80px。zIndex: 层级，默认为9999。cornerPosition: Corners 的位置，默认为right。
另外，create 方法也提供了一些回调函数，包括成功回调函数、失败回调函数等，可以根据实际情况处理。
示例代码
下面是完整的示例代码：
HTML：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ------------
-------
------
---- -------------------------
------- -------------------------
-------
-------JavaScript：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
--------
----- ------------------------------------------
----- -------
------ -------
----- ---
------- -----
--------------- --------
-------- -- -- -
----------------------
--
------ -- -- -
----------------------
--
-------- -- -- -
----------------------
-
---结语
本文介绍了如何使用 npm 包 github-corners，在网页添加一个优美的 Github Corners。通过本文的学习，可以为网页增添亮点，也可以为 Github 仓库带来更多曝光度。在项目中使用 Github Corners，可以让你的网站更加有趣、更加生动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8ef9