开箱即用，支持跨域的 hexo 博客 api

2022 年 9 月 6 日小玩意儿

hexo-info-api

支持跨域、随意开关接口的 hexo 博客 api 插件。

原理

API 接口

基于 hexo.extend.generator.register() 注册一个 generator 将对应接口的路由与数据返回。

const api = "API_FILE_NAME";
hexo.extend.generator.register(`api.${api}`, require(`./lib/api/${api}`));

跨域访问

基于 hexo.extend.filter.register('server_middleware', ...) 注册一个 filter，将对应接口的路由与跨域访问的中间件绑定。

中间件的实现基于 senchalabs/connect。

// 设置响应头与跨域
function setHeader(req, res, next) {
  res.setHeader(
    "Access-Control-Allow-Origin",
    hexo.config.hexo_info_api.allowOrigin
  );
  res.setHeader("Access-Control-Allow-Credentials", "true");
  res.setHeader("Content-Type", "application/json; charset=utf-8");
  next();
}

OS：这点东西 hexo 文档屁都没讲，又是扒拉源码，又是找文档（恼）

新增接口

目前的新增接口方法

在 node_modules/hexo-info-api/lib/api 目录下新增接口文件，文件名即为接口名
编辑接口文件，参考以下示例

/* hexo-info-api API module */

"use strict";

module.exports = function (locals) {
  return {
    path: "api/<接口路径>",
    data: JSON.stringify({
      type: "<接口名称>",
      data: {
        // <返回数据>
      },
    }),
  };
};

为规范化接口模块，接口模块的开头需要添加 /* hexo-info-api API module */ 注释。

在 博客文件夹/_config.yml 中启用接口

hexo_info_api:
  enable:
    - <接口名称>

变量

在接口文件中，可以使用以下变量

locals 即为网站变量

变量	描述	类型	备注
`locals.posts`	所有文章	array of post objects
`locals.pages`	所有分页	array of page objects	疑似不可用
`locals.categories`	所有分类	object，包含了站点全部的分类
`locals.tags`	所有标签	array，包含了站点全部的标签

this 可以获取到外部的 hexo 对象，即为全局变量

如果你有好的想法，欢迎提 issue 或 pr 以添加新的接口

使用方法

安装

# npm
npm install hexo-info-api --save

# yarn
yarn add hexo-info-api

配置

向 hexo 的配置文件 _config.yml 中添加以下内容

hexo_info_api:
  allowOrigin: "*" # 设置为 "*" 以允许所有源访问 (跨域访问 Access-Control-Allow-Origin)
  enable: # 启用你需要的 api 接口 (只有在这里启用的 api 才会生效)
    - getInfo
    - getPostCount
    - getPosts
    - getPostsByCategory
    - getPostsByCategoryId
    - getPostsByTag
    - getPostsByTagId
    - getPostByPath
    - getPostById
    - getCategories
    - getTags
  # 禁用默认 api (host:port/api/) 默认: false
  # 该 api 的作用为返回所有启用的 api 接口
  disable_default_api: false

运行 (测试)

hexo s

#访问 http://localhost:4000/api/ 查看你启用的 api 接口

返回结果

这是 GET /api/getPostCount 接口的返回结果

{
  "type": "getPostCount",
  "data": {
    "count": 0
  }
}

其他接口对应结构请前往 Github 仓库 wiki 查看

At Last

Top img by Douglas Lopes on Unsplash

评论加载中…