一直用 VSCode 编辑 markdown,图片只能分成两边窗口预览,体验实在不好,更麻烦的是,发布时需要更改图片路径,一更改,Hexo图片显示出来了,本地又无法预览了,本文将 介绍
使用Typora实时预览markdown
配置图片路径
开发 Hexo 插件解决 图片本地预览 与 发布时图片路径 不一致 问题
1. 下载安装 Typora
https://typora.io/
2. 配置 Typora 图片路径
图片文件保存路径: ./{{hbeSeoContent}}#123;filename} 即保存到与 当前正在编辑的文件名 相同的同级文件夹下
下面三项依次为
对本地位置的图片应用上述规则
对网络位置的图片应用上述规则
优先使用相对路径
建议都勾选上,至少要勾选上第一项
PS:使用 Ctrl+V 粘贴 即可复制图片到Typora图片文件夹
3. 配置 Hexo 图片文件夹
在 Hexo 根目录打开配置文件 _config.yml
搜索 post_asset_folder,false 改为 true
这样修改后,每次 'hexo new page' 生成新文章,都会在文章文件同级目录创建一个与文章文件名同名的文件夹,我们就在这里存放此文章的图片。
PS: 这被称为 文章资源文件夹, 参考官方文档: https://hexo.io/zh-cn/docs/asset-folders
4. 开发 Hexo 转换图片路径 插件
现在,我们在 Typora下使用 引用图片,享受实时预览,但需发布到 Hexo,使之发布后能正确加载我们的图片,还需要做以下转换:
 --> {% asset_img example.jpg example %}
而这个转换我们需要在文章编译为html之前,在编译过程中转换为 这样的标签{% asset_img example.jpg example %}
PS:
Hexo官方文档 - 相对路径引用的标签插件
4.1 创建文件夹 hexo-asset-img,初始化npm包
1 2 3 mkdir hexo-asset-img cd hexo-asset-img npm init
4.2 编写插件 index.js
创建 index.js,编写代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 const log = require('hexo-log')({ 'debug': false, 'slient': false }); /** * md文件返回 true * @param {*} data */ function ignore(data) { // TODO: 好奇怪,试了一下, md返回true, 但却需要忽略 取反! var source = data.source; var ext = source.substring(source.lastIndexOf('.')).toLowerCase(); return ['md',].indexOf(ext) > -1; } function action(data) { var reverseSource = data.source.split("").reverse().join(""); var fileName = reverseSource.substring(3, reverseSource.indexOf("/")).split("").reverse().join(""); //  --> {% asset_img example.jpg example %} var regExp = RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g"); // hexo g data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}","g"); // log.info(`hexo-asset-img: filename: {{hbeSeoContent}}#123;fileName}, title: {{hbeSeoContent}}#123;data.title.trim()}`); return data; } hexo.extend.filter.register('before_post_render',(data)=>{ if(!ignore(data)){ action(data) } }, 0);
4.3 本地测试插件
Hexo根目录下 package.json 中 dependencies添加一行 "hexo-asset-img": "^1.0.0",
将 hexo-asset-img文件夹复制到 Hexo根目录下 node_modules文件夹下
注意:二者缺一不可,笔者试过不修改 package.json ,但没成功加载插件
重新生成文章
1 2 3 hexo clean hexo g hexo s # 本地预览
PS:当然之后你还需要修正以前文章的图片路径
public/posts 生成结果如下图所示,成功
图片路径被转换成功
1 <img src="/posts/hexo-typora/image-20201128103300470.png" class="" title="image-20201128103300470">
4.4 发布插件
注意: 你需要先登录 npm login
1 npm publish --registry https://registry.npmjs.org
5. 使用插件
1 npm install hexo-asset-img --save
关联 GitHub
yiyungent/hexo-asset-img: Hexo插件: 转换 图片相对路径 为 asset_img
https://github.com/yiyungent/hexo-asset-img
参考
感谢帮助!
Hexo+NexT(六):手把手教你编写一个Hexo过滤器插件