Typora + Hexo 图片路径问题(Typedown)

news2024/10/7 12:19:38

文章目录

  • 1. 冲突来源
  • 2. 解决思路
  • 3. 实现
    • 1. typora图片路径
    • 2. hexo脚本

1. 冲突来源

Hexo上对于图片在md中的引用,使用了post_asset_folder: true配置,来更好的管理图片。
当一篇名为xxx.md的文章引用1.png图片时,默认让1.png保持在xxx文件夹下,那么md中即可使用{% asset_img 1.png %}来引用图片。

而typora中,或者Typedown中,复制图片时,一般使用![](./xxx/1.png)

2. 解决思路

  1. 让每次图片复制到md时,typora都能将其自动放入和md文件同名同级文件夹下。
  2. 然后在Hexo编译前使用脚本将![](./xxx/1.png)转化为{% asset_img 1.png %},并且保持md源文件不变。

3. 实现

1. typora图片路径

在这里插入图片描述

这很简单。

但是如果你是typedown就会发现,不支持解析${filename},那么只有每次写的时候手动选择同级同名文件夹了。

2. hexo脚本

scripts\before_generate.js中写入

// const path = require('path');

// hexo.extend.filter.register('before_post_render', data => {
//   if (data.layout === 'post') {
//     const postName = path.basename(data.source, '.md');
//     const imgRegex = new RegExp(`!\\[.*?\\]\\(\\.\\/${postName}\\/([^\\)]+)\\)`, 'g');

//     data.content = data.content.replace(imgRegex, (match, p1) => {
//       return `{% asset_img ${p1} %}`;
//     });
//   }
//   return data;
// });

const path = require('path');

hexo.extend.filter.register('before_post_render', data => {
  if (data.layout === 'post') {
    const postName = path.basename(data.source, '.md');
    const imgRegex = new RegExp(`!\\[.*?\\]\\(\\.\\/${postName}\\/([^\\)]+)\\)`, 'g');

    // 原始内容
    const originalContent = data.content;

    // 转换内容
    let match;
    let modifiedContent = originalContent;
    while ((match = imgRegex.exec(originalContent)) !== null) {
      const originalLine = match[0];
      const newLine = `{% asset_img ${match[1]} %}`;
      
      // 打印转换前后的对比
      console.log(`Original line: ${originalLine}`);
      console.log(`Converted line: ${newLine}\n`);

      // 进行替换
      modifiedContent = modifiedContent.replace(originalLine, newLine);
    }

    // 更新数据内容
    data.content = modifiedContent;
  }
  return data;
});

被注释掉了是不会打印日志对比前后修改的,没注释的会。

执行hexo cleanhexo generate,然后hexo server看看效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1854790.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【YOLO 系列】基于YOLO V8的车载摄像头交通信号灯检测识别系统【python源码+Pyqt5界面+数据集+训练代码】

前言 随着智能交通系统的发展,交通信号灯的准确识别对于提高道路安全和交通效率具有至关重要的作用。传统的交通信号灯识别方法依赖于固定的传感器和摄像头,存在安装成本高、维护困难等问题。为了解决这些问题,我们启动了这个项目&#xff0…

【2024.6.23】今日科技时事:科技前沿大事件

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

重复文件清理软件怎么用?分享3个删除重复文件的方法!

删除重复文件能够为电脑腾出很大的存储空间,不信?可以试试看哦! 电脑使用久了,都会积累大量的文件,这其中难免会出现重复的文件,这些重复文件没有任何作用,而且会占用着电脑的空间,…

查找和排序

目录 一、查找 1.1查找的基本概念 1.2顺序查找 1.3折半查找(二分查找) 1.4散列表的查找 1.4.1基本概念 1.4.2散列函数的构造方法 1.4.3解决冲突的方法 二、排序 2.1排序的基本概念 2.2插入排序 2.2.1直接插入排序: 2.2.2希尔排序…

智能优化算法改进策略之局部搜索算子(三)—二次插值法

1、原理介绍 多项式是逼近函数的一种常用工具。在寻求函数极小点的区间(即寻查区间)上,我们可以利用在若干点处的函数值来构成低次插值多项式,用它作为求极小点的函数的近似表达式,并用这个多项式的极小点作为原函数极…

高可用电商支付架构设计方案

高可用电商支付架构设计 在现代电商业务中,支付过程是其中至关重要的一环,一个高可用、安全稳定的支付架构不仅可以提高整个系统的可靠性和扩展性,降低维护成本,还可以优化用户体验,增加用户黏性。 本文将提出一种高…

解析JSON字符串

QJsonDocument类用于解析JSON字符串,

学习C++第二天

1.缺省参数 缺省参数的概念&#xff1a; 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时&#xff0c;如果没有指定实参则采用该形参的缺省值&#xff0c;否则使用指定的实参。 void show(int a 10) {cout << a << endl; }int main() {sho…

英语智汇学习系统

目 录 1 软件概述 1.1 项目研究背景及意义 2 系统相关技术 2.1 HTML、WXSS、JAVASCRIPT技术 2.2 Vanilla框架 2.3 uni-app框架 2.4 MYSQL数据库 3 需求分析 3.1 可行性分析 3.2 功能需求分析 3.3 系统用户及用例分析 3.4 非功能需求分析 3.5 数据流图…

已解决ApplicationException异常的正确解决方法,亲测有效!!!

已解决ApplicationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查业务逻辑 验证输入数据 确认服务器端资源的可用性 增加对特殊业务情况的处理…

android串口助手apk下载 源码 演示 支持android 4-14及以上

android串口助手apk下载 1、自动获取串口列表 2、打开串口就开始接收 3、收发 字符或16进制 4、默认发送at\r\n 5、android串口助手apk 支持android 4-14 &#xff08;Google seral port 太老&#xff09; 源码找我 需要 用adb root 再setenforce 0进入SELinux 模式 才有权限…

LabVIEW 控制 Tucsen 相机

LabVIEW 控制 Tucsen 相机 ucsen 是一家知名的显微镜相机制造商&#xff0c;其相机产品广泛应用于科研、工业和医疗等领域。本文将介绍如何使用 LabVIEW 软件来控制 Tucsen 相机&#xff0c;涵盖相机的基本情况、硬件和软件要求、具体的控制步骤和编程示例。通过使用 LabVIEW&…

【职场人】如何与同事有效沟通

在职场中&#xff0c;沟通如同桥梁&#xff0c;连接着每一位职场人士的心灵与智慧。有效的沟通不仅能让工作更加顺畅&#xff0c;还能让团队关系更加和谐。那么&#xff0c;如何与同事进行有效沟通呢&#xff1f;下面&#xff0c;我将结合个人经验和一些幽默的比喻&#xff0c;…

AI 大模型企业应用实战(11)-langchain 的Document Loader机制

loader机制让大模型具备实时学习的能力&#xff1a; 0 Loader机制 案例环境准备&#xff1a; import osos.environ["OPENAI_API_KEY"] "sk-javaedge" os.environ["OPENAI_PROXY"] "https://api.chatanywhere.tech"import os from …

开启调试模式

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 run()方法虽然适用于启动本地的开发服务器&#xff0c;但是每次修改代码后都要手动重启它。这样并不够方便&#xff0c;如果启用了调试支持&#xff…

[SAP ABAP] 删除内表数据

1.利用索引删除数据 语法格式 DELETE <itab> INDEX <idx>. <itab>&#xff1a;代表内表 <idx>&#xff1a;代表索引值 删除内表<itab>中的第<idx>条记录 示例1 lt_student内表中存在3条数据记录 我们使用如下指令删除内表中的第一条数…

WordPress强大多功能主题模板The7 v9.16.0

模板介绍 The7可以与WPBakery Page Builder&#xff08;原Visual Composer&#xff09;和Ultimate Addons的完全无缝集成。它也与大多数流行的插件完全兼容&#xff0c;例如WooCommerce&#xff0c;WPML&#xff0c;Yoast SEO&#xff0c;All in One WP Migration&#xff0c;…

解决MNIST数据集下载慢,或者Http连接失败问题

下载MNIST数据集时遇到速度慢的问题 解决&#xff1a;手动从MNIST数据集的官方网站直接使用下载好的数据文件&#xff0c;放到指定目录下&#xff0c;再进行调取即可。 手动下载地址&#xff1a;MNIST官网 http://yann.lecun.com/exdb/mnist/ 【仍需要连接外网】 这里我提供…

【大数据 复习】第3章 分布式文件系统HDFS(重中之重)

一、概念 1.分布式文件系统把文件分布存储到多个计算机节点上&#xff0c;通过网络实现、文件在多台主机上进行分布式存储的文件系统。&#xff08;就是你的电脑存a&#xff0c;我的电脑存pple&#xff09; 2.降低了硬件开销: 与之前使用多个处理器和专用高级硬件的并行化处理装…

公司倒闭被迫踏上海投简历道路,经历打压受挫后总结的Android面经,互相激励!

红黑树有啥特性? 在oncreate里面可以得到view的宽高吗? view的getwidth和getmesurewidth有啥区别? 遍历hashmap的原理? 23种设计模式 中园博林(有笔试) 如何避免out of menmory和anr? arraymap和hashmap的区别? 如何实现线程同步? 简述android事件分发机制 简…