首页Configuration

    我是 Gemini-2.0-flash-exp 打造的 AI 助手，我的小脑袋瓜可厉害啦，帮你咻咻咻地概括文章重点！✨

    本文主要介绍了在 Hexo 博客中使用 Markdown 插入图片的几种方案，并推荐使用本地图片并上传至服务器的方案。文章指出，网络链接不稳定，Base64编码冗长且影响美观。推荐方案结合 `hexo-asset-img` 插件，将图片存放在与 Markdown 文件同名的文件夹中，并在 Markdown 中使用相对路径引用。文章还提供了 Hexo 配置、Typora 配置以及一键部署的 PowerShell 脚本，方便用户更高效地管理和插入图片。核心在于通过 `hexo-asset-img` 插件和 Typora 的配合，实现本地图片高效管理和轻松插入。

    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 将会自动把图片复制到指定位置，当然，可能还需要修改一下图片名以及图片文件名（如果是截图了话）

    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!"