辛宝的玄酒清谈!
808 words
4 minutes
从官方 XLOG Obsidian 插件中能学到什么

image.png

内部链接

  • [[技术折腾 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,也看到了不少优化点。

image.png

上图一个 SettingsTab

web view 信息展示#

左侧注册了一个 Robin Icon,点击之后右侧展开一个 web-view,基础信息摆一摆。

image.png

看描述想在本地编辑、上传下载、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/
Author
辛宝 Otto
Published at
2023-10-19