typora 设置
打开typora,选择:偏好设置 - 图像 - 插入图片时
,做如下更改:
复制到指定路径
./${filename}
当插入图片时,会生成一个和文件名相同的文件夹,并将图片存入这个文件夹内。
Hexo 设置
- 安装 hexo-renderer-marked
npm install hexo-renderer-marked
- 之后更改 _config.yml 配置
post_asset_folder: true
- 安装插件
hexo-image-link
npm install hexo-image-link --save
此时,在typora 文件中正常显示的图片,在hexo发布后依旧能正常显示。
NOTE:
- 如果想用插件
Hexo-renderer-markdown-it
(推荐)代替Hexo-renderer-marked
npm uninstall hexo-renderer-marker --save #卸载 marked
npm install hexo-renderer-markdown-it --save #安装markdown-it
- 路径转换的解释
假设:
文件名: ./test.md
图片路径: ./test/image.jpg
当插入图片 image.jpg 到 test.md 中时,
typora 的引用路径为
![](test/image.jpg)
Hexo 发布后的引用路径为
![](image.jpg)
因此,typora的md文件引入hexo时,应转换路径。即删掉图片路径中的 "test/"
部分;(此时md文件已不能正常显示图片,而 hexo server 可正常显示)
插件hexo-image-link
帮助实现了这种路径转换。
安装后,typora 文件中正常显示的图片,在hexo发布后依旧能正常显示。