JSON-LD

在 HTML 页面中生成 JSON-LD 标签。

配置参数

extensions string[]

The list extensions this plugin applies to

name string

The key name for the transformations definitions

描述

JSON-LD (JSON for Linking Data，用于链接数据的 JSON) 是一种使用 JSON 格式为网页提供结构化数据的方式，这种格式更易于解析，并且不需要修改 HTML 代码。它通过包含 JSON 代码的 <script type="application/ld+json"> 元素来定义。例如：

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://oscarotero.com/",
    "headline": "Óscar Otero - 网页设计师和开发者",
    "name": "Óscar Otero",
    "description": "我只是一个设计师和网页开发者",
    "author": {
      "@type": "Person",
      "name": "Óscar Otero"
    }
  }
</script>

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import jsonLd from "lume/plugins/json_ld.ts";

const site = lume();

site.use(jsonLd());

export default site;

用法

在你的页面中创建 jsonLd 变量。例如：

jsonLd:
  "@type": WebSite
  url: /
  headline: Óscar Otero - 网页设计师和开发者
  name: Óscar Otero
  description: 我只是一个设计师和网页开发者
  author:
    "@type": Person
    name: Óscar Otero

输出的 HTML 页面将包含 <script type="application/ld+json"> 标签，其中包含完整的对象：

<html>
  <head>
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://oscarotero.com/",
        "headline": "Óscar Otero - 网页设计师和开发者",
        "name": "Óscar Otero",
        "description": "我只是一个设计师和网页开发者",
        "author": {
          "@type": "Person",
          "name": "Óscar Otero"
        }
      }
    </script>
  </head>
  <body>
    <p>This is my first post</p>
  </body>
</html>
  • 该插件会自动添加 @context 属性。
  • URL 可以省略协议和主机名。该插件会根据站点的 location 自动解析所有 URL。

字段别名

字段别名允许在 LD 对象中使用已存在的值。

  • 使用 ={fieldname} 获取任何字段的值。例如 =title。
  • 使用 $ {css selector} 获取任何 HTML 元素的值。例如 $ h1。
    • 使用 attr() 获取任何属性的值。例如：$ img.main attr(src)。
  • 你可以使用用 || 分隔的不同回退值。例如：=title || $ h1 || Default title。
title: Óscar Otero - 网页设计师和开发者
header:
  title: Óscar Otero
  description: 我只是一个设计师和网页开发者

jsonLd:
  "@type": WebSite
  url: /
  headline: $ h1.headline
  name: =header.title
  description: =header.description
  author:
    "@type": Person
    name: =header.title

TypeScript

如果你想使用 TypeScript，可以使用 Lume.Data["jsonLd"] 类型 (由 schema-dts 包驱动)：

export const jsonLd: Lume.Data["jsonLd"] = {
  "@type": "WebSite",
  url: "/",
  headline: "Óscar Otero - 网页设计师和开发者",
  description: "我只是一个设计师和网页开发者",
  name: "Óscar Otero",
  author: {
    "@type": "Person",
    name: "Óscar Otero",
  },
};