一直用 VSCode 编辑 markdown,图片只能分成两边窗口预览,体验实在不好,更麻烦的是,发布时需要更改图片路径,一更改,Hexo图片显示出来了,本地又无法预览了,本文将 介绍
图片文件保存路径:./${filename}
即保存到与 当前正在编辑的文件名 相同的同级文件夹下
下面三项依次为
PS:使用
Ctrl+V
粘贴 即可复制图片到Typora图片文件夹
在 Hexo 根目录打开配置文件 _config.yml
搜索 post_asset_folder
,false
改为 true
这样修改后,每次 'hexo new page' 生成新文章,都会在文章文件同级目录创建一个与文章文件名同名的文件夹,我们就在这里存放此文章的图片。
PS: 这被称为
文章资源文件夹
, 参考官方文档: https://hexo.io/zh-cn/docs/asset-folders
现在,我们在 Typora
下使用 ![example](postname/example.jpg)
引用图片,享受实时预览,但需发布到 Hexo
,使之发布后能正确加载我们的图片,还需要做以下转换:
![example](postname/example.jpg) --> {% asset_img example.jpg example %}
而这个转换我们需要在文章编译为html之前,在编译过程中转换为 这样的标签{% asset_img example.jpg example %}
hexo-asset-img
**,初始化npm包**mkdir hexo-asset-img
cd hexo-asset-img
npm init
创建 index.js
,编写代码如下
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("");
// ![example](postname/example.jpg) --> {% 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: ${fileName}, title: ${data.title.trim()}`);
return data;
}
hexo.extend.filter.register('before_post_render',(data)=>{
if(!ignore(data)){
action(data)
}
}, 0);
Hexo
根目录下 package.json
中 dependencies
添加一行 "hexo-asset-img": "^1.0.0",
hexo-asset-img
文件夹复制到 Hexo
根目录下 node_modules
文件夹下注意:二者缺一不可,笔者试过不修改
package.json
,但没成功加载插件
重新生成文章
hexo clean
hexo g
hexo s # 本地预览
PS:当然之后你还需要修正以前文章的图片路径
public/posts
生成结果如下图所示,成功
图片路径被转换成功
<img src="/posts/hexo-typora/image-20201128103300470.png" class="" title="image-20201128103300470">
注意: 你需要先登录
npm login
npm publish --registry https://registry.npmjs.org
npm install hexo-asset-img --save
关联 GitHub yiyungent/hexo-asset-img: Hexo插件: 转换 图片相对路径 为 asset_img https://github.com/yiyungent/hexo-asset-img
感谢帮助!
本文作者: yiyun
本文链接: https://cloud.tencent.com/developer/article/1970544
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!