上文提到，最近開發了 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 插件輕鬆完成同步！