7 从零学习 Hexo API 开发网站教程（自定义 JSON 数据文件）

在使用 Hexo 构建静态网站时，您可能希望将一些自定义数据存储为 JSON 文件，以便在您的博客或网站中使用。在这一小节中，我们将指导您如何创建和使用自定义 JSON 数据文件。

创建自定义 JSON 数据文件

1. 创建数据文件

首先，您需要在 Hexo 项目的 source 目录下创建一个新的文件夹，用于存放您的 JSON 数据文件。通常我们可以将其命名为 data。

mkdir source/data

然后，在 data 文件夹内，创建一个新的 JSON 文件，例如 mydata.json。

touch source/data/mydata.json

2. 编辑 JSON 文件

使用您喜欢的文本编辑器打开 mydata.json 文件。下面是一个简单的 JSON 数据结构示例：

{
  "posts": [
    {
      "title": "Hello World",
      "date": "2023-10-01",
      "tags": ["hexo", "tutorial"]
    },
    {
      "title": "Learning Hexo",
      "date": "2023-10-02",
      "tags": ["hexo", "api"]
    }
  ]
}

在这个示例中，我们定义了一个名为 posts 的数组，其中包含两个对象，每个对象都有 title、date 和 tags 字段。

3. 加载 JSON 数据

在您的 Hexo 博客生成中的某个地方（例如在某个模板文件或页面中），您需要加载这个 JSON 数据。Hexo 提供了 hexo.locals.get 方法来访问自定义数据文件。

下面是一个示例，展示如何在 Hexo 的一个模板中访问这个 JSON 数据：

<% const myData = hexo.locals.get('data').mydata; %>

<ul>
  <% myData.posts.forEach(post => { %>
    <li>
      <strong><%= post.title %></strong><br>
      <em><%= post.date %></em><br>
      <span>Tags: <%= post.tags.join(", ") %></span>
    </li>
  <% }); %>
</ul>

在这个例子中，我们使用 hexo.locals.get('data').mydata 获取了在 mydata.json 文件中定义的数据，并通过 .forEach 循环遍历了 posts 数组，生成了一个简单的列表。

4. 重新生成站点

在编辑和保存了您的 JSON 文件及模板后，您需要重新生成 Hexo 站点以看到变化：

hexo generate

然后，您可以启动 Hexo 服务器查看结果：

hexo server

访问 http://localhost:4000，您应该能看到您在模板中插入的数据。

总结

通过创建自定义的 JSON 数据文件，您可以轻松管理和使用数据，使您的 Hexo 博客更加动态与灵活。您可以根据需要扩展 JSON 文件的结构，增加更多的数据字段，从而为您的网站提供更多功能和内容。