theme.json 术语表 | CSS-Tricks

WordPress 块主题 CSS 和样式设置指南

常见的 JSON 术语

在跳到下一部分概述六种不同类型的 JSON 数据类型之前，我们将花一点时间熟悉与 JSON 相关的术语。

JSON

JSON 代表 JavaScript 对象表示法，一种机器可读的数据共享格式。顾名思义，JSON 源自 JavaScript 并应用于许多其他语言，如 PHP、Ruby、Python 等。许多软件应用程序，包括 React、Gatsby、VS Code 等，使用 JSON 进行设置环境。

对象

对象是用冒号 : 分隔的键值对，并包含在花括号 ({}) 中。你可以把它想象成 CSS。我们有一个属性（或键），后跟定义属性的值。

color: #9DFF20;

在 JSON 中，它表示为这样的对象

{ "color": "#9DFF20" }

注意：JSON 对象属性也称为 **字段** 或 **键**。键值对也称为 **项目** 或 **数据**。

就像 CSS 规则集可以包含多个键值对一样，JSON 对象也可以。此示例是一个包含三个键（color、name 和 slug）的对象，每个键都有相应的值

{ "color": "#9DFF20", "name": "Primary", "slug": "primary" }

与 CSS 相反，JSON 不是一种“宽容”的语言，即使一个打字错误也会破坏整个网站。

嵌套对象

JSON 中的对象可以包含其他对象。我们称之为 嵌套对象，它使 JSON 成为一种结构化语言。

{
  "object1": {
    "object1a": "value",
    "object1b": "value"
  },
  "object2" : {
    "object2a": "value",
    "object2b": "value"
  }
}

让我们从 emptytheme theme.json 文件中举个例子

数组

数组是用逗号分隔的方括号 ([]) 中的对象组。这样做的目的是，我们可能需要一次定义多个对象。一个很好的例子是定义块主题颜色调色板的颜色。数组允许我们为该调色板定义一组颜色

JSON 数据类型

JSON 值必须是六种数据类型之一：字符串、数字、对象、数组、布尔值（真或假）和空值。 JSON 数据使用点 . 表示法进行评估。

这是一个简化的修改后的 TT3 theme.json 对象文件，显示了所有数据类型

{
  "version": 2, // 1: Number (no quotes)
  "settings": {
    "appearanceTools": true, // 2: Boolean (true or false, no quotes)
    "useRootPaddingAwareAlignments": false,
    "color": {
      "palette": [ // 3: Array of string object palette
        { 
          "color": "#ffffff", // 4: Object (in curly brackets)
          "name": "Base",
          "slug": "base"
        }
      ]
    },
    "layout": { "contentSize": "650px"}, // 5: String (in double quotes)
    "styles": {
      "typography": { "lineHeight": "1.6" },
      "spacing": { "blockGap": null } // 6: null (no quotes)
    }
  }
}

其他资源

HTML 和 CSS (块编辑器手册 | 说明)
介绍 JSON (JSON.org)
JSON 简介 (DigitalOcean)
什么是 JSON (REST API 教程)

下一步…

现在我们已经对 JSON 及其在 WordPress 块主题的 theme.json 中的结构有了深入的了解，让我们仔细看看全局样式是如何工作的。我们可以直接在 theme.json 中为块主题定义默认样式。我们也可以使用 WordPress 中的全局样式 UI。

它们是如何协同工作的？提供哪些设置？应该何时使用一种而不是另一种？我们将在下一部分回答这些问题以及更多问题。