在这个小节中，我们将学习如何为您的Hexo博客创建自定义功能模块。我们将通过定义一个简单的Hexo插件来完成这一任务。

1. 创建Hexo插件

首先，我们需要创建一个新的Hexo插件。插件的结构非常简单。进入您的Hexo博文根目录，然后在 scripts 目录中创建一个新的文件夹来存放我们的插件。假设我们要创建一个名为 hexo-custom-module 的插件。

1
2

cd your-hexo-blog
mkdir scripts/hexo-custom-module

在 hexo-custom-module 文件夹内创建一个 index.js 文件，这是插件的主要文件。

1

touch scripts/hexo-custom-module/index.js

2. 编写插件脚本

打开 index.js 文件，编写以下基本代码结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

'use strict';

module.exports = function (hexo) {
  hexo.extend.console.register('custom-module', {
    usage: 'Custom command example',
    desc: 'This is a custom module for demonstration.',
    options: [
      {
        name: 'option',
        desc: 'An example option for the command',
      },
    ],
    action(args) {
      // 插件的主要逻辑
      const option = args.option || 'default';
      hexo.log.info(`Custom module executed with option: ${option}`);
    },
  });
};

代码解释

• hexo.extend.console.register：此方法用于向Hexo注册一个自定义的控制台命令。
• usage：用于描述使用命令的方式。
• desc：描述该命令的功能。
• options：可以为命令提供可选参数。
• action：该方法是在命令被执行时调用的代码，您可以在这里编写您的逻辑。

3. 使用自定义模块

完成插件的开发后，您需要在Hexo中使用这个自定义模块。您可以通过命令行执行插件的控制台命令。

1

hexo custom-module --option=myValue

这里的 --option=myValue 是我们在插件中定义的可选参数。执行该命令后，您应该能在控制台看到如下输出：

1

INFO  Custom module executed with option: myValue

如果不传递任何参数，您会看到：

1

INFO  Custom module executed with option: default

4. 其他功能的扩展

可以通过扩展您插件中的功能来实现更复杂的需求，例如：

• 注册新的过滤器：您可以使用 hexo.extend.filter 注册新的过滤器，这样可以在生成页面时对内容进行处理。
• 监视文件变化：通过使用 Hexo 的文件监听机制，您可以对特定事件作出反应。
• 模板助手：您可以通过 hexo.extend.helper 创建自定义的模板助手，以便在Markdown文件中使用自定义功能。

示例：注册一个过滤器

假设我们想对每个页面的标题进行修改，可以使用如下代码注册一个过滤器：

1
2
3
4

hexo.extend.filter.register('before_post_render', function (data) {
  data.title = '[Custom] ' + data.title;
  return data;
});

在这个例子中，我们在每篇文章渲染之前修改了标题，前面添加了 “[Custom]” 字符串。

5. 发布您的插件

一旦插件开发完成并经过测试，可以考虑将其发布到 GitHub 或 npm 上，方便其他用户使用。确保在您的插件目录中添加 package.json 文件，包含插件的描述和相关信息。

package.json 示例

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

{
  "name": "hexo-custom-module",
  "version": "1.0.0",
  "description": "A custom module for Hexo.",
  "main": "index.js",
  "keywords": [
    "hexo",
    "plugin"
  ],
  "author": "Your Name",
  "license": "MIT"
}

结语

到此为止，您已经学习了如何从零开始创建一个简单的Hexo自定义模块。您可以在此基础上进行扩展，实现更复杂的功能模块。Hexo的灵活性非常高，欢迎探索其更多的扩展能力！

在本小节中，我们将学习如何在 Hexo 中集成第三方 API，以增强我们网站的功能。我们将通过几个示例，包括获取数据和在网页上展示，来逐步实现这一目标。

1. 理解 Hexo 插件

Hexo 是一个快速、简洁和高效的博客框架，其功能可以通过插件进行扩展。我们可以利用 Hexo 的插件开发机制来集成第三方 API。

1.1 Hexo 插件结构

Hexo 插件通常由以下几个部分组成：

• package.json：插件的元数据和依赖。
• index.js：插件的主要逻辑。
• lib/ 文件夹：可选的，存放模块。

2. 创建简单的 Hexo 插件

在我们集成第三方 API 之前，首先需要创建一个简单的 Hexo 插件。

2.1 创建插件目录

在你的 Hexo 博客目录下，运行以下命令来创建插件目录：

1
2
3

mkdir hexo-plugin-example
cd hexo-plugin-example
npm init -y

2.2 编写插件代码

在插件目录中创建一个 index.js 文件，并编写以下基础代码：

1
2
3
4
5

const hexo = require('hexo');

hexo.extend.filter.register('after_render:html', function (str, data) {
  return str + '<!-- Plugin output here -->';
});

2.3 修改 package.json

在 package.json 中添加 Hexo 作为依赖：

1
2
3
4
5
6
7
8
9

{
  "name": "hexo-plugin-example",
  "version": "1.0.0",
  "description": "A simple Hexo plugin example",
  "main": "index.js",
  "dependencies": {
    "hexo": "^5.0.0"
  }
}

3. 集成第三方 API

现在，我们将学习如何调用第三方 API。

3.1 安装 Axios

我们将使用 Axios 来进行 HTTP 请求。请在插件目录下运行以下命令安装 Axios：

1

npm install axios

3.2 修改插件代码以调用 API

以下是一个示例，展示如何从公共 API 获取数据并将其添加到网页中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const hexo = require('hexo');
const axios = require('axios');

hexo.extend.filter.register('after_render:html', async function (str, data) {
  try {
    const response = await axios.get('https://api.example.com/data'); // 替换为你的第三方 API
    const apiData = response.data;

    // 将 API 数据添加到 HTML 中
    const additionalContent = `
      <div>
        <h2>API Data</h2>
        <p>${JSON.stringify(apiData)}</p>
      </div>
    `;

    return str + additionalContent;
  } catch (error) {
    console.error('Error fetching data from API', error);
    return str; // 返回原始字符串
  }
});

3.3 查看效果

在 Hexo 博客根目录下运行以下命令生成并启动服务器：

1
2
3

hexo clean
hexo generate
hexo server

访问 http://localhost:4000，你应该能够看到集成的 API 数据。

4. 处理 API 数据

获取 API 数据后，我们通常需要对其进行处理和格式化。

4.1 数据格式化示例

假设我们获取的数据是一个包含用户列表的数组，我们可以选择性地展示部分信息：

1
2
3
4
5
6

const additionalContent = apiData.map(user => `
  <div>
    <h2>${user.name}</h2>
    <p>${user.email}</p>
  </div>
`).join('');

5. 小结

在本小节中，我们展示了如何：

• 创建一个简单的 Hexo 插件。
• 使用 Axios 集成第三方 API。
• 处理和展示 API 数据。

通过以上步骤，你可以根据需要集成各种第三方 API，以丰富你的 Hexo 博客内容。记得根据实际需要调整 API URL 和数据处理逻辑！

Hexo是一个快速、简洁且高效的静态博客框架，支持通过插件和API来扩展功能。本教程将指导您如何从零开始学习并实现一个使用Hexo API的动态内容展示功能。

1. 环境搭建

1.1 安装Node.js

Hexo是基于Node.js的，您需要确保您的机器上已安装Node.js。可以通过在终端中运行以下命令来检查：

1

node -v

如果尚未安装Node.js，可以从Node.js官方网站下载并安装。

1.2 安装Hexo

安装Hexo非常简单，通过npm（Node包管理器）执行以下命令：

1

npm install -g hexo-cli

1.3 创建Hexo项目

在您希望创建博客的目录下运行以下命令：

1
2
3

hexo init myblog
cd myblog
npm install

这将创建一个名为myblog的Hexo博客项目并安装所有必要的依赖。

2. 配置Hexo

在您的Hexo项目中，有一个名为_config.yml的文件，您可以在此文件中对博客进行基本配置。您可以设置title、description等参数。

1
2

title: My Blog
description: Welcome to my blog

3. 创建API接口

3.1 使用Hexo插件

为了实现动态内容展示，您可以创建一个Hexo插件来提供API接口。首先在项目根目录创建一个名为hexo-api的文件夹：

1
2

mkdir hexo-api
cd hexo-api

创建一个名为index.js的文件，代码如下：

1
2
3
4
5
6
7
8
9
10
11

'use strict';

hexo.extend.router.get('/api/content', async (ctx) => {
  const posts = await hexo.model('Post').find({}).sort({date: -1});
  ctx.body = posts.map(post => ({
    title: post.title,
    date: post.date,
    link: post.permalink,
    excerpt: post.excerpt
  }));
});

3.2 加载插件

在项目的_config.yml文件中，添加以下内容以加载新的API插件：

1
2

plugins:
  - hexo-api

4. 生成页面

创建一个新的页面来展示API获取的内容。在source文件夹中创建一个新文件，例如api.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dynamic Content</title>
  <script>
    async function fetchContent() {
      const response = await fetch('/api/content');
      const data = await response.json();
      const contentContainer = document.getElementById('content');
      data.forEach(post => {
        const postElement = document.createElement('div');
        postElement.innerHTML = `
          <h2>${post.title}</h2>
          <p>${post.excerpt}</p>
          <a href="${post.link}">Read more</a>
          <hr>
        `;
        contentContainer.appendChild(postElement);
      });
    }
    
    window.onload = fetchContent;
  </script>
</head>
<body>
  <h1>Dynamic Content from API</h1>
  <div id="content"></div>
</body>
</html>

5. 启动Hexo服务

接下来，你可以启动Hexo服务以查看效果。返回项目根目录，运行以下命令：

1

hexo server

在浏览器中访问http://localhost:4000/api。您应该可以看到从API接口获取的内容。

6. 总结

在本教程中，您学习了如何从零开始创建一个Hexo项目，并通过插件实现API接口，最终通过JavaScript动态展示内容。您可以根据需要扩展和修改API接口，满足更复杂的需求。

如需进一步学习Hexo的其他功能，建议阅读Hexo文档。