Hexo + Typora + 开发Hexo插件 解决图片路径不一致

2022-04-01 12:45:17 浏览数 (1)

一直用 VSCode 编辑 markdown，图片只能分成两边窗口预览，体验实在不好，更麻烦的是，发布时需要更改图片路径，一更改，Hexo图片显示出来了，本地又无法预览了，本文将 介绍

  • 使用Typora实时预览markdown
  • 配置图片路径
  • 开发 Hexo 插件解决 图片本地预览 与 发布时图片路径 不一致 问题

1. 下载安装 Typora

https://typora.io/

2. 配置 Typora 图片路径

图片文件保存路径:./${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下使用 ![example](postname/example.jpg)引用图片，享受实时预览，但需发布到 Hexo，使之发布后能正确加载我们的图片，还需要做以下转换:

![example](postname/example.jpg) --> {% asset_img example.jpg example %}

而这个转换我们需要在文章编译为html之前，在编译过程中转换为 这样的标签{% asset_img example.jpg example %}

PS: Hexo官方文档 - 相对路径引用的标签插件

4.1 创建文件夹 hexo-asset-img**，初始化npm包**

代码语言：javascript复制
mkdir hexo-asset-img
cd hexo-asset-img
npm init

4.2 编写插件 index.js

创建 index.js，编写代码如下

代码语言：javascript复制
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);

​

4.3 本地测试插件

  1. Hexo根目录下 package.json 中 dependencies添加一行 "hexo-asset-img": "^1.0.0",
  2. 将 hexo-asset-img文件夹复制到 Hexo根目录下 node_modules文件夹下

注意：二者缺一不可，笔者试过不修改 package.json ，但没成功加载插件

重新生成文章

代码语言：javascript复制
hexo clean
hexo g
hexo s # 本地预览

PS：当然之后你还需要修正以前文章的图片路径

public/posts 生成结果如下图所示，成功

图片路径被转换成功

代码语言：javascript复制
<img src="/posts/hexo-typora/image-20201128103300470.png" class="" title="image-20201128103300470">

4.4 发布插件

注意: 你需要先登录 npm login

代码语言：javascript复制
npm publish --registry https://registry.npmjs.org

5. 使用插件

代码语言：javascript复制
npm install hexo-asset-img --save

关联 GitHub yiyungent/hexo-asset-img: Hexo插件: 转换 图片相对路径 为 asset_img https://github.com/yiyungent/hexo-asset-img

参考

感谢帮助！

  • Hexo NexT（六）：手把手教你编写一个Hexo过滤器插件

本文作者： yiyun

本文链接： https://cloud.tencent.com/developer/article/1970544

版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

hexo 腾讯云开发者社区 https javascript 网络安全

0 人点赞