内部链接

• [[技术折腾 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 插件轻松完成同步！