808 words
4 minutes
从官方 XLOG Obsidian 插件中能学到什么
内部链接
- [[技术折腾 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 - 侧重插件开发]]
上文提到,最近开发了 sync-to-xlog
这个 obsidian 插件,和官方成员沟通了一波,发现 xlog 官方也在维护一个插件,还在相当原始的 demo 阶段,验证想法中。目标功能更强大完整,厚着脸皮也要到了编辑权限。
那我们就克隆跑一跑。
期待我可以从官方插件里学到什么,可以从中看到更多 crossbell/xlog 一些系统设计和用法。
使用介绍
更友好的登录鉴权
设置页面补充 login 唤起一个登录页面,得到相关 token token,体验那是贼好,不 hack。
发现是个标准的 jwt,也看到了不少优化点。
上图一个 SettingsTab
web view 信息展示
左侧注册了一个 Robin Icon,点击之后右侧展开一个 web-view,基础信息摆一摆。
看描述想在本地编辑、上传下载、xlog 网页打开。
翻源码
从入口文件看到
- AppPlugin 插件核心
- SampleModal
- 设置页面 SettingsTab
- 注册右下角的 statusBar
- 自定义 icon
- 所有的 web view 是手写的,那应该就比较累了
- api 部分维护了 Class Indexer
- 用户登录区分 op 授权和 email 授权
- newbie 的 token 属于 email ,原来如此!
- siwe 的token 属于钱包操作,这里是我的授权方案
- 对上号了
- ribbon 图片是写死的 svg,也没黑科技
- 挂载右侧 webview 的时候,用到的是 workspace.revealLeat 看着还是失焦那一套
- 命令注册。注册了一个空 modal
- 设置页面注册 protocolHandler 方便传递 token,挺好
- 维护了 mapping-manager 做本地设置和远程post 做关联,通过简单的 slug 进行对比
- 尝试监听 metadataCache 的相关事件
这里 webview 是手搓的,心疼作者一秒,这玩意应该用框架,尤其是想到 list 都是自己手搓 for 循环,就更心疼了… 幸好我已经掌握了。
官方实现信息的思路
token
获取 token 的部分可以稍后确认,反正都是拿 token,和 swie 的 token 一个效果
获取 xlog 内容
这里走的 crossbell 的 sdk,理论上更舒服更安全。
创建 createIndeer 的啥时候没有携带 token? 那只能获取公开的只读的了,那咋操作,存疑。
站点信息。通过 indexer.character.get(charId)
获取首页基本信息,头像部分做个回退默认头像。
获取所有 Post ,通过 indexer.note.getMany
获取。
没了。没啥黑科技。
展示 ipfs 时候写死的网站 replace 上传文件是用的 sdk,应该可以参考借鉴。
有价值的代码块
// 操作 frontmatter
this.plugin.app.fileManager.processFrontMatter
// upload image to ipfs
import { ipfsUploadFile } from 'crossbell/ipfs'
export function uploadFile(file: File | Blob) {
return ipfsUploadFile(file)
}
// reg protocol
this.plugin.registerObsidianProtocolHandler('xlog-login', async (data) => {}))
// html href 这样写
// obsidian://xlog-login?token=xxx&characterId=xx&type=op/
本文通过 sync-to-xlog
插件轻松完成同步!
从官方 XLOG Obsidian 插件中能学到什么
https://ijust.cc/posts/what-can-we-learn-from-offical-ob-xlog-plugin/