今天我们要介绍的是一款非常方便实用的 npm 包 -- inline-bookmark。它的作用是可以在你的网站内添加一个书签，在浏览器中点击这个书签时，可以在当前网页中弹出一个新的浮层，上面可以自定义显示一些内容，比如链接、图片、按钮等等。这个浮层可以完全定制化，非常适合于一些营销以及推广等场景。
安装
首先，我们需要在命令行中输入以下命令来安装 inline-bookmark 包：
npm install inline-bookmark
使用
在安装完 inline-bookmark 包后，我们就可以在代码中引入它。使用方法如下：
-- -------------------- ---- ------- ------ -------------- ---- ------------------ ----- ---------- - - ------ -------- ------ ----------------------------------------- ----- ---------------------- ----------- ------ -- --- ---------------------------
其中，customData 定义了要显示的内容，类型为对象，具体包括以下属性：
- title：浮层的标题，类型为字符串。
- image：浮层的图片，类型为字符串，可以是图片的地址或者 base64 格式数据。
- link：浮层的链接，类型为字符串。
- buttonText：按钮的文本，类型为字符串。
示例代码
-- -------------------- ---- -------
------
------
---------------------- ------------
-------
-------------------------- -
--------- ------
---- ----
----- ----
---------- -----------------
-------- -------
-------- -----
--------------- -------
---------------- -------
------------ -------
----------------- -----
------- --- ----- -----
-------------- ----
-------- -----
-
---------------------- -
---------- -----
------------ -----
------- --
-
---------------------- -
------ ------
------- ------
------- ---- --
-
--------------------- -
---------------- -----
----------------- --------
------ -----
-------- -----
-------------- ----
---------- -----
-------------- -----
-
----------------------- -
---------------- -----
----------------- --------
------ -----
-------- -----
-------------- ----
---------- -----
-
--------
-------
------
------------------- ---------
---------------------
------- -----------------------------------------
------- --------------
------ -------------- ---- -----------------------------------------------------------
----- ---------- - -
------ --------
------ --------------------------------------
----- -------------------------
----------- ------
--
----- -------------- - --- ---------------------------
----- ------ - --------------------------------------------------
-------------------------------- -- -- -
----------------------
---
---------
-------
-------以上代码展示了如何在 html 页面中引入 inline-bookmark 包，并通过点击按钮显示浮层。为了方便展示，我们使用了 CDN 的方式引用 inline-bookmark 包，但在实际项目中，我们推荐使用 npm 安装的方式使用这个包。
总结
通过本文的介绍，相信大家已经了解了 npm 包 inline-bookmark 的使用方法以及通过代码定制化浮层的内容。inline-bookmark 可以帮助我们快速地实现一些营销以及推广等功能，节省了我们不少的时间。同时，在定制化的过程中，也可以让我们更好地掌控自己网站的样式和风格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71706