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

创建自定义 JSON 数据文件

1. 创建数据文件

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

1

mkdir source/data

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

1

touch source/data/mydata.json

2. 编辑 JSON 文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "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 数据：

1
2
3
4
5
6
7
8
9
10
11

<% 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 站点以看到变化：

1

hexo generate

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

1

hexo server

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

总结

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

在本小节中，我们将探讨如何在 Hexo 中加载和使用 JSON 数据。Hexo 是一个快速、简洁且高效的静态博客框架，通过一些简单的步骤，我们可以使其从 JSON 文件中获取数据，这些数据可以用来生成动态内容。

1. 创建 JSON 文件

首先，您需要创建一个 JSON 文件，里面包含您想要加载的数据。假设我们创建一个名为 data.json 的文件，并将其放在 Hexo 项目的 source 目录下（可以选择其他位置，但需要相应修改路径）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "posts": [
    {
      "title": "Hello World",
      "author": "John Doe",
      "content": "This is my first blog post!"
    },
    {
      "title": "Learning Hexo",
      "author": "Jane Doe",
      "content": "Hexo is a fast and powerful blogging framework!"
    }
  ]
}

2. 加载 JSON 数据

在 Hexo 中，我们通常会使用 hexo.extend.helper 来创建自定义的辅助函数。新的助理将在 _config.yml 和主题的 layout 文件中使用。

首先，在 Hexo 项目的 scripts 目录中创建一个新的 JavaScript 文件，例如 load-json.js：

1
2
3
4
5
6
7
8

const fs = require('fs');
const path = require('path');

hexo.extend.helper.register('load_json', function(filePath) {
  const fullPath = path.join(hexo.source_dir, filePath);
  const content = fs.readFileSync(fullPath, 'utf8');
  return JSON.parse(content);
});

这段代码定义了一个名为 load_json 的助手函数，它读取指定路径的 JSON 文件并解析为 JavaScript 对象。

3. 在布局文件中使用 JSON 数据

接下来，在 Hexo 主题的任意布局文件中（例如 layout/_partial/footer.ejs 或者 layout/index.ejs），可以使用我们刚才定义的助手函数来加载并使用 JSON 数据。

1
2
3
4
5
6
7
8
9
10
11
12

<% var jsonData = load_json('data.json'); %>

<h2>Blog Posts</h2>
<ul>
<% jsonData.posts.forEach(function(post) { %>
  <li>
    <h3><%= post.title %></h3>
    <p><strong>Author:</strong> <%= post.author %></p>
    <p><%= post.content %></p>
  </li>
<% }); %>
</ul>

在这个示例中，我们使用 <% %> 语法来执行 JavaScript 代码，调用我们的助手函数 load_json，并将结果存储在 jsonData 变量中。

4. 运行 Hexo

运行 Hexo 生成您的站点，您可以使用以下命令：

1
2
3

hexo clean
hexo generate
hexo server

打开您的浏览器并访问 http://localhost:4000，您应该能够看到从 JSON 数据中生成的内容。

5. 总结

通过上述步骤，您已经成功地在 Hexo 中加载和使用了 JSON 数据。关键步骤包括：

• 创建 JSON 数据文件
• 使用辅助函数读取和解析 JSON 数据
• 在布局文件中渲染数据

这种方法为您提供了灵活性，使您能够从外部数据源动态地生成内容。您可以根据具体需求扩展此功能，处理更复杂的 JSON 数据结构。

本节将详细说明如何在使用 Hexo 的模板中动态生成内容，重点介绍 Hexo 的 API 和 layout 系统。

Hexo 结构概述

首先，让我们回顾一下 Hexo 的基本结构。Hexo 是一个快速、简洁且高效的博客框架，使用 Markdown 来编写内容。其目录结构主要包括以下几个部分：

• source：存储你的 Markdown 文件和静态资源。
• themes：存储主题文件，包括模板、样式等。
• layout：存放用于生成网页的布局文件。

创建自定义 API

1. 定义 API

在 Hexo 中，你可以通过 Hexo.extend 方法来创建自定义 API。创建一个新的文件，例如 scripts/myApi.js，这个文件可以用于定义你的 API。

1
2
3
4
5

// scripts/myApi.js
hexo.extend.registerFilter('myCustomApi', function (data) {
    // 这里可以对 incoming data 进行处理
    return `这是动态生成的内容：${data}`;
});

2. 在模板中调用 API

现在你可以在你的模板文件中调用这个 API。假设我们使用的是 layout/_partial/header.ejs 文件。

1

<%- myCustomApi("Hello Hexo") %>

使用 Front-matter

Front-matter 是 Hexo 处理 Markdown 文件的重要方式，它允许你在每个 Markdown 文件的顶部指定一些元数据。我们可以利用 Front-matter 来动态生成内容。

1. 配置 Front-matter

创建一个新的 Markdown 文件，例如 source/_posts/my-post.md，并在文件的顶部添加一些 Front-matter。

1
2
3
4
5
6
7
8

---
title: 我的动态帖子
date: 2023-10-01 12:00:00
tags: [Hexo, API]
custom_content: "这是一个动态内容示例"
---

欢迎来到我的博客，下面是动态内容显示：

2. 在模板中读取 Front-matter

在模板文件中，我们可以使用 page 对象来访问 Front-matter 数据。我们将修改 layout/layout.ejs 文件，以展示我们的动态内容。

1
2

<h1><%= page.title %></h1>
<p><%= page.custom_content %></p>

动态生成最新文章

我们可以进一步改进，动态生成最近的文章列表。这将需要另外的 API。

1. 生成文章列表的 API

在 scripts/myApi.js 中，添加一个新函数来获取最近的文章。

1
2
3
4

hexo.extend.helper.register('getRecentPosts', function (count) {
    const posts = hexo.model('Post').find({}).sort('-date').limit(count);
    return posts;
});

2. 在模板中显示最近的文章

然后在某个模板文件中，我们可以调用这个 API 显示最近的文章。例如，在 layout/_partial/sidebar.ejs 中：

1
2
3
4
5
6
7
8

<h3>最近文章</h3>
<ul>
<% getRecentPosts(5).forEach(function(post) { %>
    <li>
        <a href="<%= post.permalink %>"><%= post.title %></a>
    </li>
<% }); %>
</ul>

小结

通过以上步骤，你已能够使用 Hexo 的 API 和模板系统来动态生成内容。我们：

• 创建了自定义 API。
• 使用 Front-matter 处理文章的元数据。
• 动态生成了最近文章的列表。

这种方式使得你的博客具有更高的灵活性和动态性，能够更好地展现内容。希望本节的内容对你在 Hexo API 开发方面有帮助！