Hexo博客搭建记录

博客插入图片问题

Hexo的优势在于在本地以markdown格式撰写文本,同时可以发布到网络中。而写笔记免不了要保存图片等文件,笔者以往都是保存到第三方图床而导致文本与图片分离,特撰写此改进记录。

  1. 在pxxyyz学长建议找到了一个方法,添加插件即可:
1
2
3
npm install https://github.com/CodeFalling/hexo-asset-image --save
或者 我用的这个:
npm install https://github.com/7ym0n/hexo-asset-image.git --save
  1. _config.yml配置文件中添加支持:

官方教程资源文件夹 | Hexo 中介绍了在_config.yml中插入下面代码,以支持在本目录下存放图片。

1
2
3
4
5
# 大约在43行位置
post_asset_folder: true
# marked:
# prependRoot: true
# postAsset: true
  1. 验证:

在bash中输入hexo new 70-insert-pictures-into-Hexo-blog,稍候片刻目录中将生成对应名称的文本文件和目录。

  1. 配置Typora编辑器支持该种图片存放方式

Typora编辑器设置 顺序

或者,以上操作等价于在文档头部增加图片指定路径:

1
typora-root-url: 70-insert-pictures-into-Hexo-blog

等价操作

  1. 第4步也可改为直接 配置Typora编辑器

在 “文件 - 偏好设置 - 图像” 中添加./${filename}以支持粘贴图片时自动保存到同名目录中。

文件 - 偏好设置 - 图像

通过以上操作,在本地编辑器Typora中可以正常显示图片,在Hexo博客中图片也将正常显示。

  1. http://localhost:4000/的测试结果

Fluid主题博客 测试结果

  • 备注1:据官方文档中描述,该方法是使用了hexo-renderer-marked插件,请注意是否安装了该插件。

  • 备注2:本文图片插入格式均为:(70-insert-pictures-into-Hexo-blog/image-20210507224130616.png),Hexo根据配置文件中目录要求重定向资源链接,例如本文变为/70/