动态生成内容

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

Hexo 结构概述

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

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

创建自定义 API

1. 定义 API

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

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

2. 在模板中调用 API

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

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

使用 Front-matter

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

1. 配置 Front-matter

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

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

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

2. 在模板中读取 Front-matter

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

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

动态生成最新文章

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

1. 生成文章列表的 API

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

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 中：

<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 开发方面有帮助！