npm 包 @jsenv/url-meta 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

@jsenv/url-meta 是一个用于从 URL 中提取元数据的 JavaScript 库。它支持从链接中提取标题、描述、图像等元数据信息。它可以帮助开发者快速构建一个 URL 分享预览的功能。

安装

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

使用方法

引入

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

调用 fetchUrlMeta 函数

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

配置项

fetchUrlMeta 函数可接收两个参数,第一个是 URL,第二个是可选的配置项对象。下面是可用的配置项:

  • charset:文字编码,默认为 "utf8"
  • requestTimeLimit:请求超时时间,默认为 5000 毫秒
  • titleSelector:标题选择器,默认为 'meta[property="og:title"]'
  • descriptionSelector:描述选择器,默认为 'meta[property="og:description"], meta[name="description"]'
  • imageSelector:图像选择器,默认为 'meta[property="og:image"]'

接口返回值

调用 fetchUrlMeta 函数后,会得到一个包含元数据的对象。下面是其中一些常用的元数据属性:

  • title:网页标题
  • description:网页描述
  • image:网页图像
  • url:原始 URL

示例代码

以下是一个使用 @jsenv/url-meta 的示例代码:

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

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

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

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

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

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

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

总结

@jsenv/url-meta 是一个方便的 JavaScript 库,用于获取 URL 元数据,可以大大简化开发人员的工作。通过深入学习和使用此库,可以更加高效地构建 URL 分享预览功能。

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


猜你喜欢

  • npm 包 prompt-for-patched 使用教程

    在前端开发中,经常需要跟用户交互,让用户输入一些信息。在 Node.js 环境中,我们可以使用 readline 模块来实现交互,但 readline 模块需要了解一些底层知识,使用起来有一定的复杂度...

    4 年前
  • npm 包 metalsmith-fingerprint 使用教程

    在前端开发中,有时需要对静态资源进行缓存以加快网站的访问速度。其中,一种常用的方法是给资源文件添加 hash 以便每次文件变化时浏览器能够发现需要重新下载。而这个过程可以通过 npm 包 metals...

    4 年前
  • npm 包 metalsmith-firebase 使用教程

    在前端开发过程中,我们经常需要生成静态网站。而 metalsmith 是一个静态网站生成器,可以通过使用不同的插件,轻松的完成各种不同的任务。而 metalsmith-firebase 作为 meta...

    4 年前
  • npm 包 Metalsmith-HTML-Minifier 使用教程

    Metalsmith-HTML-Minifier 是一个非常实用的 npm 包,能够帮助我们压缩 HTML 文件并提升性能。本文将为大家介绍该 npm 包的使用方法,帮助大家更好地了解和使用该工具。

    4 年前
  • npm 包 imagemin-advpng 使用教程

    随着互联网的发展,网页上的图片已经成为了不可或缺的一部分。为了优化网页加载速度,压缩图片是一个必要的步骤。针对于 PNG 格式的图片压缩,npm 包 imagemin-advpng 提供了一种高效的解...

    4 年前
  • npm包imagemin-gm使用教程

    概述 imagemin-gm是一个基于Node.js和GraphicsMagick的图片压缩工具,可以帮助开发人员在前端开发中快速地将图片压缩至合适的大小。在本文中,我们将深入了解imagemin-g...

    4 年前
  • npm 包 imagemin-pngout 使用教程

    在前端开发中,图片占据了相当重要的位置。为了让页面加载的更快,提升用户的使用体验,我们需要对图片进行压缩。npm 包 imagemin-pngout 是一款非常优秀的图片压缩工具,本文将带你一起来学习...

    4 年前
  • npm 包 metalsmith-imagemin 使用教程

    在前端开发中,图片应用越来越广泛。随着移动设备的普及,图片的优化变得越来越重要。Metalsmith 是一个强大的静态网站生成器,它有着丰富的插件库,其中包括一个能够自动优化图片的插件 metalsm...

    4 年前
  • NPM 包 metalsmith-jekyll-dates 使用教程

    在前端开发过程中,我们经常需要使用静态网站生成器来生成我们的网站。Jekyll 是一个非常受欢迎的静态网站生成器,而 Metalsmith 则是另外一款流行的静态网站生成器。

    4 年前
  • npm 包 metalsmith-metadata 使用教程

    前言 在进行静态网站生成时,元数据(metadata)是一个十分重要的概念。它可以让你更好地组织你的内容,方便编写模板文件等等。Metalsmith 是一个十分流行的静态网站生成器,同时它也提供了相应...

    4 年前
  • npm 包 metalsmith-metallic 使用教程

    简介 Metalsmith 是一个基于 Node.js 的静态网页生成器,使用灵活,但需要对一些前端技术有一定的了解。而 Metalsmith-Metallic 是基于 Metalsmith 的一个插...

    4 年前
  • npm 包 metalsmith-pagination 使用教程

    Metalsmith-pagination 是一款基于 Metalsmith 的分页插件,可用于生成简单的静态博客网站或类似文章分页的应用程序。在本文中,我们将详细讲解如何使用 metalsmith-...

    4 年前
  • npm 包 robotize 使用教程

    在前端开发的过程中,经常需要模拟用户行为进行自动化测试或批量操作。而 npm 包 robotize 可以帮助我们快速地创建类似人类用户操作的自动化机器人,支持常见的浏览器操作和多种事件的触发,非常方便...

    4 年前
  • npm 包 metalsmith-robots 使用教程

    什么是 metalsmith-robots? metalsmith-robots 是一个基于 metalsmith 的插件,用于生成 robots.txt 文件。robots.txt 文件是一个在网站...

    4 年前
  • npm 包 Metalsmith-Sass 使用教程

    前言 随着前端技术的不断发展和进步,前端工具也不断更新和升级。其中,Metalsmith作为一款简单而强大的静态网站生成器,深受众多前端开发者的喜爱和应用。而Metalsmith-Sass作为Meta...

    4 年前
  • npm 包 metalsmith-sitemap 使用教程

    简介 在网站开发中,网站地图(sitemap)是一个非常重要的文件。它能够帮助搜索引擎更好地理解网站的结构,提高搜索引擎抓取网站的效率,同时也能够提供给用户一个清晰的导航结构。

    4 年前
  • npm 包 metalsmith-snippet 使用教程

    metalsmith-snippet 是一个非常实用的 npm 包,可以帮助前端开发人员在生成静态网站时,方便地将长篇文章分割成小段代码片段,使网站更加易于阅读和理解。

    4 年前
  • npm 包 google-closure-deps 使用教程

    前言 在前端开发中,google-closure-deps 是一个常用的 npm 包。该包用于生成依赖关系图,可以清晰地展示各个 JavaScript 文件之间的关系。

    4 年前
  • npm 包 typescript-closure-tools 使用教程

    前言 JavaScript 是一种非常灵活的语言,但是也常常因为其灵活性带来的一些问题。其中一个比较常见的问题就是类型错误。错误的类型定义常常导致程序的难以维护和调试。

    4 年前
  • npm 包 metalsmith-tags 使用教程

    前言 在前端开发中,我们经常需要使用到静态网站生成器(SSG)来将静态页面生成为 HTML、CSS、JS 等静态文件,其中比较流行的有 Jekyll、Hugo 等。

    4 年前

相关推荐

    暂无文章