npm 包 ember-jsonld 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 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:

npm install ember-jsonld --save-dev

2. 定义 JSON-LD 数据

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

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

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

3. 添加到页面

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

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

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

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

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

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

{{if pageJsonLdData}}{{{pageJsonLdData}}}{{/if}}

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

npm 包 ember-jsonld 使用教程