辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

开发 Obsidian Sync To Xlog 插件之 处理 obsidian 的图片

image

本文记录开发 obsidian-sync-to-xlog 插件过程的踩坑和思考。

背景#

上文我们提到我们先把 obsidian 的内容同步到 xlog 上,很快我们就能读取 obsidian 的笔记内容到 xlog 上,有一个待处理的问题是图片资源还是原始链接,不是 xlog 上的 ipfs 链接。

所以我们需要解决它,有一定的技术难度。

技术设计#

要完成 obsidian 图片内容上传到 ipfs 需要一下几个步骤:

  • 读取 md 内容,找出图片资源,注意可能有 ob 本地图片、远程 CDN 图片
  • 上传图片到 ipfs 然后替换文本后,上传到 xlog

别小看这两个步骤,我花费不少心血去处理,尤其是我第一次开发 obsidian 插件,吐血满满。

处理图片#

和普通的 markdown 不同, obsidian 对展示图片资源有两种方式:

  • 原生的 ![]() 图片方案
  • 内置的 ![[]] 展示方案

对于第一种比较简单,编写正则,提取 https? 正则就可以。

需要注意的是,使用传统的 fetch/axios 会触发 cros 安全验证,使用 obsidian.requestUrl 可以无视安全策略,这都是坑。

难的是第二种,我们先使用正则匹配到路径,找到合适的 obsidian api 读取文章真实路径或者二进制数据即可。

这一步骤最麻烦,先略过,专门说。

在这个步骤中,我们找到了图片的相关路径,就可以进行下一步上传到 xlog 上,也就是获得 ipfs 地址。

上传得到 ipfs#

这一步骤,在系列文章第一篇时候得知,有一个接口可以上传图片得到 ipfs,这个调用即可。

得到 ipfs 地址之后重新覆盖原文就可以。

读取配置,是否处理 ipfs#

万一用户在某些情况下不想把图片上传到 ipfs 怎么办?这里引入新的设置,是否上传图片到 ipfs 即可。

稍作代码的修改适配设置选项,如果关闭按钮,直接上传原始内容,如果开启,就先上传图片再上传文本。

获取 ob 的图片数据#

这一部分非常考验人,我目前的做法有点问题,就是某些在一级目录的图片有可能无法读取,导致图片会被忽略。

这个小坑后面有机会在处理吧,有点难。

展望#

祝你天天开心

image

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。