8 在 Hexo 中加载和使用 JSON 数据

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

1. 创建 JSON 文件

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

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

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 数据。

<% 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 生成您的站点，您可以使用以下命令：

hexo clean
hexo generate
hexo server

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

5. 总结

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

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

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