npm 包 Unfurled 使用教程

随着互联网的发展,越来越多的人使用社交媒体来分享他们的内容。在社交媒体上分享链接时,系统可能会自动展开(即 unfurl)该链接并显示一些元数据,例如网站的标题、描述、图像等。如果您是前端开发人员,并希望为您的网站或博客启用 unfurl 功能,则可以使用 npm 包 Unfurled。本文将介绍如何使用 Unfurled。

安装 Unfurled

要使用 Unfurled,您需要在本地计算机上安装 Node.js 和 npm。在安装完成后,打开命令行并输入以下命令来安装 Unfurled :

--- ------- --------

使用 Unfurled

安装完成后,您可以在代码中使用 Unfurled。以下是一个基本示例:

----- -------- - --------------------

----- ------ - --- -----------

------
  -------------------------------
  ------------ -- -
    --------------------------
    --------------------------------
    --------------------------
  --
  ------------ -- -
    ---------------------
  ---

Unfurled 通过使用 cheerio 库来解析 HTML,然后从中提取元数据。fetch() 方法负责获取网站并返回元数据。然后,您可以通过 then()catch() 方法处理 Promise,以便访问元数据或处理错误。

识别 og:image 标签并提取实际图像链接

如果您想在展示链接元数据时,尽量准确地展示实际的缩略图,可以使用如下方式:

----- -------- - --------------------

----- ------ - --- ----------
  -------------- ----- -------- -- -
    ----- -------- - ----- --------------- -
      -------- -
        ------------- ------------ -------- -- ----- ------ ---- ------------------ ------- ---- ------ -------------------- ------------- ------------------------------------------
      --
      --------- --------
    ---
    ------ -------------
  -
---

------
  --------------------------------
  ------------ -- -
    --------------------------
    --------------------------------
    --------------------------
  --
  ------------ -- -
    ---------------------
  ---

在这个例子中,我们使用 imageResolver 方法来查找 og:image 标签,然后从中提取实际的图像链接。

修改内置的元数据属性名称

如果您想将元数据属性更改为其他名称,可以使用如下方式:

----- -------- - --------------------

----- ------ - --- ----------
  ----------- -
    ------ ----------
    ------------ ----------------
    ------ ---------
  -
---

------
  --------------------------------
  ------------ -- -
    ----------------------------
    ----------------------------------
    ----------------------------
  --
  ------------ -- -
    ---------------------
  ---

在这个例子中,我们使用 properties 选项来将元数据属性改为 myTitlemyDescriptionmyImage

结论

通过使用 Unfurled,您可以轻松地从网站链接中提取元数据并在社交媒体上展示。Unfurled 还提供了一些可自定义的选项,以满足不同的用户要求。我们希望您可以通过本文学习到如何使用 Unfurled,并借此在您的项目中使用,从而为您的用户提供更好的体验。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600560bb81e8991b448df035


猜你喜欢

  • npm 包 @csberger/react-sortable-tree 使用教程

    在前端开发中,树形结构的展示和拖拽都是常见的需求,但是如何实现一个完整的可拖拽的树形结构组件并不容易。幸运的是,在 npm 上有一个非常好用的包 @csberger/react-sortable-tr...

    3 年前
  • npm 包 @artemis-prime/logger 使用教程

    在前端开发中,日志是非常重要的一个环节。通过记录应用程序的运行信息以及错误信息,我们可以更好地理解应用程序的行为,进而更好地进行调试和优化。而 npm 包 @artemis-prime/logger ...

    3 年前
  • npm 包 @zelgadis87/throttler 使用教程

    在前端开发过程中,我们通常会遇到一些需要限制某些操作频率的场景,例如防止用户在短时间内多次点击按钮、减少 API 请求频率等。此时,我们可以使用 throttling 技术来解决这些问题。

    3 年前
  • npm 包 `lucky-css` 使用教程

    介绍 lucky-css 是一个基于 PostCSS 的 CSS 预处理器,旨在为前端开发者提供一个简单易用的工具,优化 CSS 开发体验以及提高页面加载速度。lucky-css 可以帮助你自动压缩代...

    3 年前
  • 使用 Brunch-with-redeagle 构建前端项目

    在前端开发中,使用 npm 包是一个必不可少的途径。brunch-with-redeagle 是一个可用于快速构建前端项目的 npm 包。它经过了精心设计,提供了强大的构建工具和开发环境,可以大幅度提...

    3 年前
  • npm 包 reshep 使用教程

    在前端开发中,很多时候我们需要对 HTTP 请求进行拦截和修改,这就需要用到一个流行的工具 reshep。reshep 是一个简单易用的 Node.js 模块,可用于拦截和调整 HTTP 请求和响应。

    3 年前
  • npm 包 cordova-plugin-twilio-common 使用教程

    前言 在现今的移动应用开发中,实时通讯被越来越多地应用到了各种应用场景中。Twilio 是一个在实时通讯领域比较知名的第三方服务提供商,其提供的实时通讯解决方案可以帮助开发者快速搭建可靠的通讯系统。

    3 年前
  • `npm` 包 `jsonresume-theme-slick-nl` 使用教程

    jsonresume-theme-slick-nl 是一款针对 JSON Resume 简历的优美主题。本教程将指导您如何使用该主题。 前置要求 在使用本主题前,请确保您已经完成了以下操作: 安装了...

    3 年前
  • npm 包 node-red-contrib-bittrex 使用教程

    node-red-contrib-bittrex 是一款基于 npm 包的 Node-RED 扩展,专门用于与加密货币交易平台 Bittrex 进行交互。在本篇文章中,我们将详细介绍如何安装和使用该 ...

    3 年前
  • npm 包 v-ripple 使用教程

    前端技术发展迅速,越来越多的 npm 包诞生,为前端工程师们极大地减轻了繁琐的工作负担,提高了开发效率。今天,我们来介绍一个常用的 npm 包 v-ripple,它可以帮助我们快速实现点击按钮时的水波...

    3 年前
  • npm 包 com.fs.plugin.sample 使用教程

    前言 在前端开发中,我们经常会调用各种依赖库,而 npm 就是管理这些依赖库的主流工具之一。在这篇文章中,我们将介绍一个 npm 包 com.fs.plugin.sample,以及它在前端开发中的应用...

    3 年前
  • npm 包 biz-smart-angular-table 使用教程

    在前端开发中,我们经常需要使用数据表格来展示各种信息。而 biz-smart-angular-table 是一个基于 Angular 的轻量级的数据表格库,它可以让我们轻松地创建和管理各种数据表格。

    3 年前
  • npm 包 cordova-plugin-ios-frameworks 使用教程

    简介 cordova-plugin-ios-frameworks 是一个 Cordova 插件,它允许在 iOS 项目中添加动态链接库(Dynamic Frameworks)。

    3 年前
  • npm 包 uvalidator 使用教程

    在前端开发中,表单验证一直是必不可少的一环,而 uvalidator 是一个基于 Node.js 平台的 npm 包,提供了一种简单、灵活的方式来验证表单。本文将介绍如何使用 uvalidator 进...

    3 年前
  • npm 包 js-sdk-stack 使用教程

    在前端开发中,我们经常会使用各种第三方库和工具来提高开发效率和代码质量。而 npm 是前端中使用最广泛的包管理器之一,通过 npm,我们可以快速搜索、安装和管理各种常用的前端包,大大提高了前端开发效率...

    3 年前
  • npm 包 @broid/kit 使用教程

    在前端开发中,npm 已成为日常开发中不可或缺的工具,而 @broid/kit 是一个非常实用的 npm 包,它能够让开发者快速实现聊天机器人功能。本文将为大家详细介绍如何使用 @broid/kit ...

    3 年前
  • npm 包 sos-api-node 使用教程

    前言 在前端开发过程中,我们常常需要调用第三方API来获取数据,而常常需要的数据却没有现成的API提供。在这种情况下,我们可以利用 Node.js 编写服务端代码以获取数据,但开发过程中较为繁琐,因此...

    3 年前
  • npm 包 traph.macro 使用教程

    traph.macro 是一个在编译时处理 JavaScript 代码的 npm 包。它可以帮助你更轻松地编写 JavaScript 代码,并提高代码的可读性和可维护性。

    3 年前
  • npm 包 js-beautify2 使用教程

    简介 js-beautify2 是一个 JavaScript 代码美化工具,可以帮助我们快速将 JavaScript 代码进行格式化和美化,使得代码更易读、易维护、易扩展。

    3 年前
  • npm包abbreviate-arguments使用教程

    npm(Node Package Manager)是一个为Node.js开发者提供命令行界面的工具,也是Node.js模块的全球公共注册表。而abbreviate-arguments是一款npm包,可...

    3 年前

相关推荐

    暂无文章