hexo 如何上传本地图片

1. 修改站点配置文件

1 2	/* 路径 /hexo/_config.yml post_asset_folder: true

这之后，当你 hexo n XXX 时，会自动在 /hexo/source/_post 下生成一个 XXX 文件夹；

我们将需要插入 XXX 博文的图片 Test.jpg 放到此文件夹，稍后用Typora编辑博文时直接拖入即可

2. 安装路径转换插件|踩坑

注意，一定要下：

1
2
3

$ npm install https://github.com/CodeFalling/hexo-asset-image --save
......
+ hexo-asset-image@0.0.5

正确生成为：

$ hexo g
INFO  Start processing
update link as:-->/2019/08/20/test/Test.jpg
update link as:-->/2019/08/20/test/Test.jpg
......

如有生成绝对路径不完整，请参考

2024/0327更新：

在hexo的_config.yml配置文件中将链接优化后，文章的链接不在是默认是日期+时间+标题，而是一段hex码，这个配置如下修改：
1
2
3
4
5
6
> #hexo链接优化https://leflacon.github.io/a2c7bf23/
> permalink: :abbrlink/
> abbrlink:
>   alg: crc32  # 算法：crc16(default) and crc32
>   rep: hex    # 进制：dec(default) and hex
>

然后 hexo g，生成文章，终端里显示他图片确实是文章的hex码+图片名，但hexo s在本地网页无法图片，图片的路径还是默认文章链接配置的日期时间
1
2
3
4
5
6
> 理论上本地hexo文章图片的链接
> http://localhost:4000/88b2c11b/图片名.jpg
> 
> 实际上的：
> http://localhost:4000/2019/08/20/test/图片名.jpg
>

这个情况只要执行 hexo clean 后重新生成就行

注意，不要下：

1
2
3

npm install hexo-asset-image --save
......
+ hexo-asset-image@1.0.0

hexo-asset-image@1.0.0版本根本无法在 hexo g 生成的 *.html 文件中生成正确的 img src 的路径

错误生成如下，无法载入图片：

$ hexo g
INFO  Start processing
update link as:-->/.com//Test.jpg
update link as:-->/.com//Test.jpg
......

3. 安装Typora

将Typora设置为*.md文件的默认编辑器

进入 /hexo/source/_post

打开刚才创建的 XXX.md 文件

将 /hexo/source/_post/XXX/Test.jpg 直接拖拽到 Typora 编辑界面

会自动连带图片生成：

1	![Test](D:\ODG blog\oldgerman.github.io\source\_posts\hexo如何上传本地图片\Test.jpg)

将就绝对路径删除部分，仅保留：

1	![Test-Image](\hexo如何上传本地图片\Test.jpg)

并将两个 \ 修改成：

1	![Test-Image](/hexo如何上传本地图片/Test.jpg)

若挪开选中图片的鼠标，自动隐藏引用代码，仅将图片显示：

Test-Image

4. 本地测试+上传到GitHub

1	hexo server

1 2	hexo g hexo d

至此，测试完毕！