npm 包 ember-jsonld 使用教程

阅读时长 7 分钟读完

什么是 JSON-LD?

JSON-LD(JavaScript Object Notation for Linked Data)是一种基于 JSON 的数据交换格式,它使用了 Linked Data 技术来描述数据之间的关系,属于语义化WEB的一部分。JSON-LD 可以为每个属性添加类型和值,从而提供了更加丰富的上下文信息,便于机器和人类阅读和理解。

ember-jsonld 简介

ember-jsonld 是一个 Ember.js 应用程序中使用 JSON-LD 数据的库,它提供了方便的 API 以生成和解析 JSON-LD 数据,同时也可以很容易地实现 Google 结构化数据等服务。

ember-jsonld 使用

1. 安装 ember-jsonld

使用 npm 安装 ember-jsonld:

2. 定义 JSON-LD 数据

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

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

在这个例子里,我们定义了 JSON-LD 数据。@context 定义了对象中用到的所有词汇。@type 定义了我们定义的对象类型。这个例子中定义了一个人,有名称,工作职位,归属的组织等等。最后,sameAs 和 example:interest 定义了一些链接和兴趣爱好。

3. 添加到页面

在组件中添加 JSON-LD 数据到页面上,可以使用 Addon 功能 create-async-content 提供的 createAsyncContent,它可以创建异步加载 JavaScript 和 CSS 资源。

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

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

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

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

这里我们先在函数中定义了异步加载数据的方法,使用 createAsyncContent 函数包装起来并赋值给 pageJsonLdData 变量。最后在 Mustache 模板中将渲染的组件添加到页面上。

4. 配置 Google 结构化数据

Google 结构化数据是可以在 Google 搜索结果中显示的数据,包含了一些关键信息,如名称、价格、评论等等。使用 ember-jsonld,可以很容易地实现 Google 结构化数据:

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

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

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

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

以上代码中,我们定义了一个 Product 类型的数据,加上了一些基本信息和评论,最后返回得到的结果可以被 Google 识别和展示。

5. 自定义空间(Namespace)

使用自定义空间(Namespace),可以很方便地添加自定义的数据类型到 JSON-LD 数据中:

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

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

这里我们定义了一个自定义的命名空间,包含了自定义标签、对象类型以及其他属性。使用这种方式定义 JSON-LD 数据能够准确并精简地传达数据的意义。

总结

使用 ember-jsonld,可以很容易地为应用程序添加 JSON-LD 数据,并将其应用到 Google 结构化数据等场景中,极大地提高了应用程序内容的可读性和认知度。同时,自定义命名空间,能让开发者自由地构建自己的数据类型,个性化地表达数据信息。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecba6

纠错
反馈