在前端开发中，我们肯定经常需要在网页中加入社交分享功能。很多人对此都是自己写一段分享代码，但其实我们可以使用现成的 npm 包来快速地实现这个功能。今天，我们要介绍的就是一个非常好用的分享 npm 包：@jhopley/share-that。
简介
@jhopley/share-that 是一个轻量级的社交分享工具库，它支持在您的网页上加入 Facebook、Twitter、LinkedIn、Reddit、WhatsApp 和电子邮件等社交媒体的公开分享按钮。它是一个易于使用的分享插件，可以为您的网站添加通用 API。
安装
在使用 @jhopley/share-that 之前，需要先安装它。我们可以使用 npm 进行安装：
--- ------- -------------------
如果您不想使用 npm，您还可以在 GitHub 上下载源码。
使用
@jhopley/share-that 的使用非常简单，只需要引入库和添加类名即可。以下是一个示例：
--------- -----
------
------
------------ ---- ---------------
---- -------- ---- --------------------- ---
----- ------------------- -----------------------------------------
----- ------------------------- ------------- -- -- ----------
----- ----------------- ------------------------------
-------
------
----------- -- ----- ---- ------------
---- ---------------------
-- ------------------------- -- ------------
-- ------------------------ -- -----------
-- ------------------------- -- ------------
-- ----------------------- -- ----------
-- ------------------------- -- ------------
-- ---------------------- --------
------
---- -- ----- ---- - ---
------- -------------------------------------------------------------------------
---- -- ----- ---- -- ---
----- ---------------- ------------------------------------------------------------------
-------
-------这里我们定义了一个包含分享按钮的 div，每个按钮都有一个类名 st-facebook、st-twitter 等等。然后我们在页面底部引入 @jhopley/share-that 的库文件和样式文件。
现在我们打开浏览器并访问该页面。当用户单击某个共享按钮时，将打开分享 URL 并在新标签页中显示共享页面。
详解
下面我们将深入了解一下分享按钮的使用方法。
基础部分
在 Share That 中，每个分享按钮都由一个类名来标识。例如，st-facebook 类名标识 Facebook 共享按钮，st-twitter 类名标识 Twitter 共享按钮等等。您可以在按钮上增加数据属性，以定义自己的分享 URL、分享标题和分享描述等元数据。例如：
-- ------------------- ----------------------------- -------------- -------- ---------------------- -- -- --------------- -- ------------
这样在用户单击共享按钮之后，他们将在 Facebook 上看到 My Website，自定义分享链接和描述。
改变图标样式
Share That 默认显示社交平台的标志性颜色；即 Facebook 按钮主色是蓝色，Twitter 按钮主色是蓝色，LinkedIn 按钮主色是蓝色等等。但是，您可以通过在共享按钮上添加额外的类名来改变按钮外观。例如，如果您想将 Facebook 按钮变成紫色，则可以这样做：
-- ------------------ ---------------------- -- ------------
----------------------------------- -
------ -------
-定义新的分享平台
如果您需要添加一个新的分享平台，例如 Instagram，您可以这样做：
- 创建一个新类名，例如 st-instagram。
- 在您的分享按钮上添加这个新类名。例如：
-- -------------------- ----------------------------------------- -------------- -------------- -- -------------
- 在 Share That CSS 文件中添加新类名。例如：
-------------------- -
-------- -------- -- ------- ---- ------- ---- ---- --- --------- --
------ --------
-- 在 Share That JavaScript 文件中添加新代码。例如：
-- - --------------------------------- -----
---- ---------------
--- - --------------------------------- - -----------------------------
----- - ---
------现在，分享按钮就已经被添加了 Instagram。
小结
在本文中，我们介绍了如何使用 @jhopley/share-that 来实现社交分享功能。我们讲解了如何安装和使用此库，并提供了示例代码，以及改变按钮样式和添加自定义平台的方法。这个库非常小巧而易于使用，您可以很容易地在您的网站上添加各种社交分享按钮。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bc4967216659e244316