随着互联网的发展，越来越多的人使用社交媒体来分享他们的内容。在社交媒体上分享链接时，系统可能会自动展开（即 unfurl）该链接并显示一些元数据，例如网站的标题、描述、图像等。如果您是前端开发人员，并希望为您的网站或博客启用 unfurl 功能，则可以使用 npm 包 Unfurled。本文将介绍如何使用 Unfurled。
安装 Unfurled
要使用 Unfurled，您需要在本地计算机上安装 Node.js 和 npm。在安装完成后，打开命令行并输入以下命令来安装 Unfurled ：
npm install unfurled
使用 Unfurled
安装完成后，您可以在代码中使用 Unfurled。以下是一个基本示例：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - --- -----------
------
-------------------------------
------------ -- -
--------------------------
--------------------------------
--------------------------
--
------------ -- -
---------------------
---Unfurled 通过使用 cheerio 库来解析 HTML，然后从中提取元数据。fetch() 方法负责获取网站并返回元数据。然后，您可以通过 then() 和 catch() 方法处理 Promise，以便访问元数据或处理错误。
识别 og:image 标签并提取实际图像链接
如果您想在展示链接元数据时，尽量准确地展示实际的缩略图，可以使用如下方式：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - --- ----------
-------------- ----- -------- -- -
----- -------- - ----- --------------- -
-------- -
------------- ------------ -------- -- ----- ------ ---- ------------------ ------- ---- ------ -------------------- ------------- ------------------------------------------
--
--------- --------
---
------ -------------
-
---
------
--------------------------------
------------ -- -
--------------------------
--------------------------------
--------------------------
--
------------ -- -
---------------------
---在这个例子中，我们使用 imageResolver 方法来查找 og:image 标签，然后从中提取实际的图像链接。
修改内置的元数据属性名称
如果您想将元数据属性更改为其他名称，可以使用如下方式：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - --- ----------
----------- -
------ ----------
------------ ----------------
------ ---------
-
---
------
--------------------------------
------------ -- -
----------------------------
----------------------------------
----------------------------
--
------------ -- -
---------------------
---在这个例子中，我们使用 properties 选项来将元数据属性改为 myTitle、myDescription 和 myImage。
结论
通过使用 Unfurled，您可以轻松地从网站链接中提取元数据并在社交媒体上展示。Unfurled 还提供了一些可自定义的选项，以满足不同的用户要求。我们希望您可以通过本文学习到如何使用 Unfurled，并借此在您的项目中使用，从而为您的用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560bb81e8991b448df035