将hexo中的markdown图片的相对路径更改为绝对路径

在使用 Hexo 的时候有一个痛点，就是关于图片路径的问题。hexo 官方推荐的是开启post_asset_folder并安装hexo-asset-image包，每创建一个文件，就创建与之对应名称的文件夹，该文件中的所有引用图片都存放到这个文件夹中，然后在引用的时候通过相对路径引用就可以了。但是并不是所有的文章都包含有图片，或者图片的数量很少，不值当构建一个文件，因为这样很容易引起文件夹结构臃肿。

更理想的方式是在source/images目录下按照文章的目录构建子文件夹，然后将各自的图片丢进去，然后在 md 文件中通过相对路径引用，例如我们可能在source/_posts下构建一个android的文件夹，所有android相关的文件都放在这个目录下，而所有的图片都存放在source/images/android目录下，然后文章中通过![备注](../../images/android/bug01.png)这种方式引用图片，但是在hexo s预览和hexo g发布状态都不能正确显示图片，所以有没有一种方式就是在发布时将其更改为绝对路径，通过研究 hexo 官方的 api 文档，发现有一个过滤器before_post_render可以利用。

研究Hexo的项目结构，主要研究页面的编译过程，也就是Hexo g命令是如何执行的。

根据Hexo的概述，Hexo项目的执行过程如下：

第一步：初始化

初始化阶段，会创建Hexo实例，各种配置，各种插件，各种扩展全部就位，就等待载入文章进行处理。

Hexo通过项目包管理文件package.json引入各种插件扩展。

第二步：载入文件

载入source下所有的文章及样式、脚本等资源。如有指令，则可以监控该文件下面文件的变化。

第三步：执行指令

执行控制台指令，根据指令执行相应的命令。

第四步：退出

# 创建一个文件夹 mkdir hexo-img-path && cd hexo-img-path # 创建一个npm包 npm init

package.json 内容如下：

{ "name": "hexo-img-path", "version": "1.0.0", "description": "将hexo中的markdown图片的相对路径更改为绝对路径,使得在markdown预览和发布状态下都能看到图片", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://github.com/ANDYGE/hexo-img-path.git" }, "keywords": ["hexo", "image", "path"], "author": "geshaofei@126.com", "license": "ISC" } 添加入口文件

index.js:

var deal_image = function(data) { data.content = data.content.replace( /!\[(.*?)\]\((\.\.\/)+images\//, ' } hexo.extend.filter.register('before_post_render', deal_image, 9) 将代码上传到 github

# github上创建仓库 # 本地处理 git init git add . git commit -m "first commit" git remote add origin https://github.com/ANDYGE/hexo-img-path.git git push -u origin master 发布到 npm 仓库

# 查看当前的npm源 npm config get registry # 设置回原本的就可以了 npm config set registry http://registry.npmjs.org # 登录，需要首先在https://www.npmjs.com/ 注册有账户 npm login # 发布 npm publish #发布完成之后,如果还想回到之前的cnpm,使用下面的命令 npm config set registry https://registry.npm.taobao.org 添加到 hexo 项目引用

可以有两种引用方式

# 两种方式 yarn add hexo-img-path

package.json:

"hexo-img-path": "^1.0.0", git 下载

在项目的 package.json 的 dependencies 中添加 git 引用方式，如下：

"hexo-img-path": "git+https://github.com/ANDYGE/hexo-img-path.git",