本文记录开发 obsidian-sync-to-xlog 插件过程的踩坑和思考。
内部链接
- [[技术折腾 xLog 1 可行性探索]]
- [[技术折腾 xLog 2 深入理解 xlog 的鉴权]]
- [[技术折腾 xLog 3 实现一个 obsidian 插件]]
- [[技术折腾 xLog 4 用 unStorage 封装 xLogDriver]]
- [[速通 - xLog 背后的 CrossBell SDK]]
- [[从官方 XLOG Obsidian 插件中能学到什么]]
- [[开发 Obsidian Sync To Xlog 插件之 处理 obsidian 的图片]]
- [[速通-CrossBell 的开源作品]]
- [[速通 Obsidian Docs - 侧重插件开发]]
背景
上文我们提到我们先把 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 的图片数据
这一部分非常考验人，我目前的做法有点问题，就是某些在一级目录的图片有可能无法读取，导致图片会被忽略。
这个小坑后面有机会在处理吧，有点难。
展望
祝你天天开心
