首页 Configuration

# Hexo 中插入图片的方案

第一次使用 Hexo，对于 Markdown 中图片的处理不是很了解。由于 Markdown 中插入的图片多为本地或者网络链接的形式，而经过 Hexo 编译后，网页是不可能获取到本地图片，因此往往需要做额外的处理，经了解有以下几种方案：

  1. 使用网络链接。这需要网上资源有你需要的图片，或者使用图床等手动上传，但该方法由于图片掌握在他人手上并不稳定 / 安全，因此果断抛弃。
  2. 使用 base64 编码的方案。因为 Markdown 最后都会生成 html，因此可以将原本的 ![image](image_path) 这种写法改成 ![image](data:image/png:base64,...) 这种写法，这种写法不需要将图片存在任何除了这个文件以外的其它地方。但是，图片的 base64 编码非常之长，直接插入文件中间会影响 Markdown 编写过程中的美观。不过其实也可以使用间接的方法，在需要插入图片的地方写 ![image][reference_name] ，在其他地方（最好是文章末尾）写 [reference_name]:<base64> ，但个人觉得这种方式还是不够优雅。
  3. 使用本地图片，同时上传至服务器。Hexo 本身提供了 解决方案 ，需要配合 hexo-asset-img 一同食用，该方案比较优雅，只需将图片保存到本地（配合 Typora），然后一键三连即可（后文附上一键三连代码）

# Hexo 配置

如 Hexo 官方文档 所说，我们首先对于 _config.yml 文件中的 post_asset_folder: false 改为 true ，然后安装 hexo-asset-img （网上大多说是安装 hexo-asset-image ，但据了解似乎不支持 Hexo5，已经弃用较久了，自己也尝试安装过，发现只有使用 {Picture Filename} 的形式才能在网页上正常显示，但在 Markdown 中却不行，需要使用 {Markdown Title}/{Picture Filename} 的形式才能在编写过程中显示出来，这很不优雅。而 hexo-asset-img 似乎是有个小伙对 hexo-asset-image 进行了魔改，看了下代码主要还是正则化等一些字符串处理，路径在 {Your Hexo Filepath}\node_modules\hexo-asset-img\index.js 中）

此时，通过 hexo n "{Markdown Title}" 会自动创建一个 Markdown 文件和相同名字的文件夹，这时只需要将 Markdown 中的图片存入对应的文件夹中，同时调用时使用 ![{Picture Name}]({Markdown Title}/{Picture Filename}) 即可。注意，由于设置了 post_asset_folder: true ，原来的 front-matter 中封面图片的根路径将从根目录 .\source\ 变成 .\source\_posts\{Markdown Title}\ ，因此封面图片的路径直接使用 {Cover Filename} 即可。

# Typora 配置

打开 Typora，依次点击 文件 - 偏好设置 - 图像 ，设置插入图片时 复制到指定路径 ，图片文件保存路径为 ./${filename} 即保存到与当前正在编辑的文件名相同的同级文件夹下，此时，无论是复制的本地图片还是截图的图片，可以直接粘贴进 Typora 中，Typora 将会自动把图片复制到指定位置，当然，可能还需要修改一下图片名以及图片文件名（如果是截图了话）

# Hexo 一键三连代码

将以下代码保存到 Hexo 根目录的 update.ps1 文件中，然后用管理员权限打开 powershell，执行 .\update.ps1 就会自动完成 清理 - 编译 - 上传 一键三连（当然前提是已经配置好了 hexo d 所需要的一些环境以及 git 帐号等信息填写）。

# 执行 hexo clean
Write-Host "Cleaning Hexo..."
hexo clean
# 执行 hexo g
Write-Host "Generating Hexo..."
hexo g
# 执行 hexo algolia（可选）
Write-Host "Running Hexo Algolia..."
hexo algolia
# 执行 hexo d
Write-Host "Deploying Hexo..."
hexo d
Write-Host "Done!"