随着社交媒体的普及，网页设计过程中加入社交媒体分享功能已变得非常必要。目前市面上有很多社交媒体分享按钮的解决方案，而今天我们将要介绍一款非常实用的前端框架 npm 包 -- grapesjs-plugin-social。
该 npm 包可以帮助开发者快速地创建出多个常用的社交媒体分享按钮，并且非常方便地插入到任意 web 页面中，接下来我们将介绍如何使用这个 npm 包。
安装
首先，我们需要通过 npm 来安装 grapesjs-plugin-social，执行以下命令：
--- ------- ---------------------- ------
安装完成后，我们可以在项目中的 node_modules/grapesjs-plugin-social/ 目录下找到相关文件。
创建示例页面
接着，我们需要在项目中创建一个示例页面，这样可以更好的演示如何使用 grapesjs-plugin-social。在项目根目录下创建一个 index.html 文件，并编写以下代码：
--------- -----
----- ----------
------
----- --------------- --
----------------------------- ----------
---- ------ ---------------------- -- ---
----- ---------------- ------------------------------------------------------------------------------ --
------- --------------------------------------------------------------------------------------
-------
------
---- -------- -------------- ------ ------ -------------
--------
-- ---------------------- ---
--- ------- - -
---
- --------------------------
- -------- --------- -------- ------- ------- ---------- --
- ---------- -------- --------
--
------- ------------ ---------- --------- ----------
-- ---------
--------- ---
---
- -------- --- ------------
- --------------------- ---- -------- --- ---
--
------------ -----
--
-- -------- -----
--- ---------- - -
---------- -------
-------- --------------------------- -- ---------------------- --
------------ -
------------------------- -------
--
------------- -
---------------- --
-------- -
-
----- ------------
----- ------
----------- --------- --------- ------------ ------------- --------- -----------
----------- -
-
----- ---- --------
--------- -------------
----- ---------
--------- --------------
-------- -
- ------ -------------- ----- -------- ---- --
- ------ ------------- ----- ------- ---- -
-
--
-
--------- -------------------
----- -------------
----- -------
-
-
-
-
-
--
-- --- -------- ---
--- ------ - --------------------------
---------
-------
-------在这个示例页面中，我们需要重点关注以下代码：
------
----- --------------- --
----------------------------- ----------
---- ------ ---------------------- -- ---
----- ---------------- ------------------------------------------------------------------------------ --
------- --------------------------------------------------------------------------------------
-------
------
---- -------- -------------- ------ ------ -------------
--------
-- ---------------------- ---
--- ------- - -
---
- --------------------------
- -------- --------- -------- ------- ------- ---------- --
- ---------- -------- --------
--
------- ------------ ---------- --------- ----------
-- ---------
--------- ---
---
- -------- --- ------------
- --------------------- ---- -------- --- ---
--
------------ -----
--
-- -------- -----
--- ---------- - -
---------- -------
-------- --------------------------- -- ---------------------- --
------------ -
------------------------- -------
--
------------- -
---------------- --
-------- -
-
----- ------------
----- ------
----------- --------- --------- ------------ ------------- --------- -----------
----------- -
-
----- ---- --------
--------- -------------
----- ---------
--------- --------------
-------- -
- ------ -------------- ----- -------- ---- --
- ------ ------------- ----- ------- ---- -
-
--
-
--------- -------------------
----- -------------
----- -------
-
-
-
-
-
--
-- --- -------- ---
--- ------ - --------------------------
---------
-------这部分代码主要包含了 grapesjs-plugin-social 的配置项和 grapesjs 的实例化选项。
我们通过 socOpts 配置项来指定 grapesjs-plugin-social 要显示的社交媒体分享按钮类型、图标大小和要使用的 CSS 类名。
接着，将 "grapesjs-plugin-social" 插件添加到 plugins 配置项中，同时将其对应的 socOpts 配置项添加到 pluginsOpts 配置项中。
最后，我们实例化了一个 grapesjs 编辑器，将其容器指定为 #gjs，并将上述配置项传递给其构造函数。
如何使用
经过以上设置后，启动 index.html 页面，页面中会显示一个可以使用 grapesjs-plugin-social 的编辑器，我们可以通过该编辑器来创建任何我们想要的网站，然后在其中加入社交媒体分享按钮。
当我们需要插入某个社交媒体分享按钮时，只需要将其相应代码插入到代码器的合适位置即可，这个代码可以从 grapesjs-plugin-social 插件的预定元素库中进行拖拽，非常方便。
以下为演示效果截图：
总结
在本文中，我们学习了如何使用 npm 包 grapesjs-plugin-social 来在 web 页面中快速创建社交媒体分享按钮。我们详细讲解了如何通过 npm 安装、如何创建示例页面以及如何使用。
该 npm 包非常实用，可以帮助开发者省去很多复杂的设计工作，同时也可以让网页的社交媒体分享功能更为完善。希望这篇文章对大家在日后的前端开发中能有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e3d9381d61a3540a43