共享数据

添加自定义数据，这些数据可以被目录中所有页面共享

除了在页面和布局中定义的变量之外，你还可以存储一些或所有页面都可以访问的数据。共享数据必须保存在 _data 目录或 _data.* 文件中，文件扩展名可以是 .json、.yaml、.js 或 .ts。

.json 和 .yaml 格式适用于静态数据。.js 和 .ts 更适合动态数据（例如，从 API 或数据库获取的数据）：

{
  "people": [
    {
      "name": "Oscar Otero",
      "color": "black"
    },
    {
      "name": "Laura Rubio",
      "color": "blue"
    }
  ]
}

people:
  - name: Oscar Otero
    color: black

  - name: Laura Rubio
    color: blue

import { db } from "./database.ts";

const people = db.query("select name, color from people");

export { people };

_data.* 文件

任何命名为 _data.* 的文件都会被加载，并且其内容可以被同一目录或子目录中的所有页面访问。

├── _data.yaml      # 与所有页面共享的数据
├── index.md
└── documentation
    └── _data.json  # 与此目录和子目录中的页面共享
    └── doc1.md
    └── doc2.md
    └── examples
        └── _data.json  # 与此目录和子目录中的页面共享
        └── example1.md
        └── example2.md

如你所见，共享数据会沿着目录结构以级联的方式传播。一个典型的用例是存储那些在同一目录下的所有页面中通用的变量，这样你就不必在每个页面中重复它们。

_data 目录

_data 目录类似于 _data 文件，但不同之处在于，数据不是存储在一个文件中，而是存储在该目录内的多个文件中。每个文件的 basename（基本名称）决定了用于访问数据的变量名。让我们看一个例子：

└── _data
    └── users.json
    └── documents
        └── one.js
        └── two.js
        └── three.js

在这个例子中，存储在 _data/users.json 文件中的数据可以通过 users 变量访问，而文档可以通过 documents.one、documents.two 和 documents.three 访问。要在你的页面中使用这些数据：

<h2>文档</h2>

<ul>
{{ for doc of documents }}
  <li>
    {{ doc.title }}
  </li>
{{ /for }}
</ul>

export default function ({ documents }) {
  return (
    <>
      <h2>文档</h2>

      <ul>
        {documents.map((doc) => <li>{doc.title}</li>)}
      </ul>
    </>
  );
}

像 _data.* 文件一样，你可以在不同的位置拥有 _data 目录，以便它们仅与同一目录或子目录中的所有页面共享。

编辑此页