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

文章目录

  • 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.rhkb.cn/news/357969.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cpolar:通过脚本自动更新主机名称和端口号进行内网穿透【免费版】

cpolar 的免费版经常会重新分配 HostName 和 Port,总是手动修改太过麻烦,分享一下自动更新配置文件并进行内网穿透的方法。 文章目录 配置 ssh config编写脚本获取 csrf_token打开登陆界面SafariChrome 设置别名 假设你已经配置好了服务器端的 cpolar。 …

路由

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 客户端(例如浏览器)把请求发送给 Web 服务器,Web 服务器再把请求发送给 Flask程序实例。程序实例需要知道对每个U…

oracle 外连接(+)和left join用法

案例1: select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE() select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE SELECT count(1): 这表示查询将返回一个计数,count(1)是一种常见的计数…

【database1】mysql:DDL/DML/DQL,外键约束/多表/子查询,事务/连接池

文章目录 1.mysql安装:存储:集合(内存:临时),IO流(硬盘:持久化)1.1 服务端:双击mysql-installer-community-5.6.22.0.msi1.2 客户端:命令行输入my…

松下课堂 | 什么是EPS?通过马达来辅助转向操作的系统

EPS , 松下 EPS是一种通过马达来减轻和辅助驾驶员在转向操作时所需力量的设备。此外,通过采用EPS,可望提高燃效,降低车辆重量。。。 背景 EPS是一种通过马达来减轻和辅助驾驶员在转向操作时所需力量的设备。此外,通过采用EPS&…

重庆交通大学24计算机考研数据速览,专硕第二年招生,复试线321分!

重庆交通大学(Chongqing Jiaotong University,CQJTU),是由重庆市人民政府和中华人民共和国交通运输部共建的一所交通特色、以工为主的多科性大学,入选“中西部高校基础能力建设工程”、“卓越工程师教育培养计划”、国…

【机器学习300问】128、简述什么Word2Vec?

一、一句话说明Word2Vec是什么? Word2Vec是一种常见的词嵌入技术。Word2Vec的目标是将每个词表示为一个向量,使得这些向量能够反映出词语之间的相似性和关联性。 word2vec算法通过预测中心词和上下文词的共现概率来学习词向量,能够捕捉词语之…

TypedDict 解析

TypedDict 解析 文章目录 TypedDict 解析1. 类型安全性2. 可读性3. 可维护性TypedDict 的解决方案没有 TypedDict 会发生什么?使用 TypedDict 的优势 TypedDict 应用场景1. 配置文件解析2. API 数据解析3. 数据库记录表示4. 表单数据验证5. 大型团队协作6. 静态类型…

正则表达式与文本处理器

正则表达式 基础正大表达式 查看特定字符 grep grep-n the test.txt grep-in the test.txt-n 显示行号 -i 不区分大小写 -v 反转查找 [] :中括号里可以写元素,内容符合任意元素,就会过滤出来 ^ :写在中括号里,代表取反。以^开头&…

图像编辑技术的新篇章:基于扩散模型的综述

在人工智能的浪潮中,图像编辑技术正经历着前所未有的变革。随着数字媒体、广告、娱乐和科学研究等领域对高质量图像编辑需求的不断增长,传统的图像编辑方法已逐渐无法满足日益复杂的视觉内容创作需求。尤其是在AI生成内容(AIGC)的…

富文本编辑器CKEditor

介绍 富文本编辑器不同于文本编辑器,它提供类似于 Microsoft Word 的编辑功能 在Django中,有可以现成的富文本三方模块django-ckeditor,具体安排方式: pip install django-ckeditor==6.5.1官网:Django CKEditor — Django CKEditor 6.7.0 documentation 使用方式 创建项…

pytest测试框架flaky插件重试失败用例

Pytest提供了丰富的插件来扩展其功能,本章介绍下插件flaky ,用于在测试用例失败时自动重新运行这些测试用例。与前面文章介绍的插件pytest-rerunfailures功能有些类似,但是功能上不如pytest-rerunfailures插件丰富。 flaky官方并没有明确pyt…

华为od-C卷200分题目2 - 找城市

华为od-C卷200分题目2 - 找城市 题目描述 一个城市规划问题,一个地图有很多城市,两个城市之间只有一种路径,切断通往一 个城市i的所有路径之后,其他的城市形成了独立的城市群,这些城市群里最大的城 市数量&#xff0…

QML 列表,图片展示(一)

文章目录 1.QML 列表,图片展示效果图2.项目基本说明3.项目详解3.1界面显示部分3.2 网络部分 4.源代码5.flickr图片查询链接,后面我们将调整代码,获取更多图片 1.QML 列表,图片展示效果图 2.项目基本说明 该项目来自Qt示例程序 Ph…

2025秋招NLP算法面试真题(二)-史上最全Transformer面试题:灵魂20问帮你彻底搞定Transformer

简单介绍 之前的20个问题的文章在这里: https://zhuanlan.zhihu.com/p/148656446 其实这20个问题不是让大家背答案,而是为了帮助大家梳理 transformer的相关知识点,所以你注意看会发现我的问题也是有某种顺序的。 本文涉及到的代码可以在…

很冷门但真的有趣的IOS应用

Tuesday Tuesday纪念日小组件是一款功能丰富的倒数日和桌面小组件工具APP。此外,Tuesday软件还具有超萌小清新的风格,界面设计清新可爱,适合各种场景使用。用户可以通过小组件实现各种趣味功能,满足不同心情需求。 SideNotes Si…

3d隐藏模型为什么就不见了?---模大狮模型网

在3D建模和设计过程中,经常会遇到需要隐藏某些模型的情况。然而,有时候隐藏之后再也找不到这些模型了。这种情况可能让人感到困惑和沮丧。本文将探讨3D隐藏模型后“消失”的原因,并提供一些解决方法,帮助您更好地管理和查找隐藏的…

ES 8.14 向量搜索优化

参考:https://blog.csdn.net/UbuntuTouch/article/details/139502650 检索器(standard、kNN 和 RRF) 检索器(retrievers)是搜索 API 中的一种新抽象概念,用于描述如何检索一组顶级文档。检索器被设计为可以…

Java基础学习-数组

目录 数组定义 注意点: 地址值是数组在内存中实际存储的地址。 案例遍历:遍历数组得到每一个元素,求数组里面所有数据和 案例:定义数组,遍历能被3整除的数字 案例:遍历一个数组,奇数将当前…

docker搭建mongo分片集群

1、mongo分片集群 MongoDB分片集群是一种可扩展的数据库架构,用于处理大量数据和高并发访问。它将数据分成多个分片,并将这些分片分布在多个服务器上,从而实现数据的平衡存储和并行处理 。 通过使用MongoDB的分片集,可以实现数据…