一、前情提要：
我们之前实现了在思源中加载自定义菜单，就像这样：
思源笔记折腾记录-快速移动文档 - 知乎 (zhihu.com)
但是这个菜单只有移动文档的功能，有点不太给力。
刚好我之前到处翻翻找找的时候发现了这个：
发现好像有点给力欸。
所以我们来尝试对接一个吧。
二、实现过程
显然这是个浏览器插件，虽然我也可以尝试自己撸一遍移植到思源里，但是着实有点妹得必要。。。。。
所以我们就直接想办法对接一下吧。
然后在这个插件的作者的 GitHub 上找到了这个 SDK：
wechatsync/article-syncjs (github.com)
好耶~~~~~
不过这个好像不是很合适直接挪到思源里，所以我们稍微改一下它：
import noobApi from "../noobApi/index.js";
if(window.$syncer){
let allAccounts = []
window.$syncer.getAccounts(function (resp) {
console.log('allAccounts', resp)
allAccounts = resp
注册菜单项(allAccounts)
})
}
function 注册菜单项(账户列表){
noobApi.自定义菜单.块标菜单.注册自定义菜单项(
{
id:'wechatSync',
文字:`使用wechatSync发布`,
图标:'#iconInbox',
}
)
账户列表.forEach(
账户=>{
noobApi.自定义菜单.块标菜单.注册自定义子菜单项(
(菜单项) => { return 菜单项.id == "wechatSync" },
{
id:账户.uid,
文字:`${账户.title}`,
图标:'#iconInbox',
点击回调函数:()=>{发布文档到(账户)}
}
)
}
)
}
async function 发布文档到(账户){
let 块id = noobApi.自定义菜单.块标菜单.菜单状态.当前块id
let stmt = `select * from blocks where id in (select root_id from blocks where id = "${块id}" )`
let 文档数据 = (await noobApi.核心api.sql({ stmt: stmt }))[0]
let 文档内容 = await noobApi.核心api.exportPreview(
{
"id": 文档数据.id
}
)
let 文档属性 = await noobApi.核心api.getDocInfo(
{
"id": 文档数据.id
}
)
let 发布数据 = {}
发布数据.title = 文档属性.ial.title
发布数据.markdown = 文档数据.markdown
发布数据.content = 转换图片地址(文档内容)
发布数据.desc = 文档属性.ial.memo
发布数据.thumb = 文档属性.ial['title-img']
noobApi.核心api.pushMsg({
"msg": `准备同步${文档数据.hpath}到${账户.title}`,
"timeout": 1000
}
, ""
)
添加任务(发布数据,账户)
}
function 转换图片地址(文档内容){
let div = document.createElement('div')
div.innerHTML = 文档内容.content ? 文档内容.content : 文档内容.html
div.querySelectorAll('[src]').forEach(
el=>{
if(el.getAttribute('src').startsWith('assets'))
{
el.setAttribute('src',window.location.origin+'/'+el.getAttribute('src'))
}
}
)
div.innerHTML+='<p>本文使用<a href="https://b3log.org/siyuan/">思源笔记</a>写作</p>'
div.innerHTML+='<p>本文使用<a href="http://publish.chuanchengsheji.com/">椽承设计</a><a href="https://github.com/leolee9086/snippets">小工具</a>配合同步</p>'
return div.innerHTML
}
function 添加任务(发布数据,账户){
window.$syncer.addTask(
{
post: 生成任务(发布数据,账户),
accounts: [账户],
},
function (status) {
status.accounts.forEach(account => {
if (account.editResp) {
let a = document.createElement('a')
a.setAttribute('href', account.editResp.draftLink)
a.setAttribute('target', "_blank")
a.setAttribute("referrerPolicy", "no-referrer")
a.click()
a.remove()
}
});
},
function () {
noobApi.核心api.pushMsg({
"msg": `同步${文档数据.hpath}到${账户.title}完成`,
"timeout": 1000
})
}
)
}
function 生成任务(发布数据,账户) {
var post = {}
post.title = 发布数据.title
if (发布数据.content) {
post.content = 发布数据.content
} else if (发布数据.markdown) {
post.markdown = 发布数据.markdown
}
if (发布数据.thumb) {
post.thumb = 发布数据.thumb
}
if (发布数据.desc) {
post.desc = 发布数据.desc
}
else {
post.desc = 发布数据.content ? 发布数据.content.substring(0, 20) : 发布数据.markdown.substring(0, 20)
}
return post
}
代码超短的蛤。
一点点说一下：
首先这里是判断有没有 wechatSync 的代码注入，如果有的话才进行下面的步骤
if(window.$syncer){
let allAccounts = []
window.$syncer.getAccounts(function (resp) {
console.log('allAccounts', resp)
allAccounts = resp
注册菜单项(allAccounts)
})
}
然后注册一个菜单项，并且把所有能用的同步项加载到它的子菜单(这里偷了个懒，就不动态生成了)
noobApi.自定义菜单.块标菜单.注册自定义菜单项(
{
id:'wechatSync',
文字:`使用wechatSync发布`,
图标:'#iconInbox',
}
)
账户列表.forEach(
账户=>{
noobApi.自定义菜单.块标菜单.注册自定义子菜单项(
(菜单项) => { return 菜单项.id == "wechatSync" },
{
id:账户.uid,
文字:`${账户.title}`,
图标:'#iconInbox',
点击回调函数:()=>{发布文档到(账户)}
}
)
}
)
后面的没有什么好说的，就是获取一下文档内容，之类的。
需要说明一下的是这两个地方：
function 转换图片地址(文档内容){
let div = document.createElement('div')
div.innerHTML = 文档内容.content ? 文档内容.content : 文档内容.html
div.querySelectorAll('[src]').forEach(
el=>{
if(el.getAttribute('src').startsWith('assets'))
{
el.setAttribute('src',window.location.origin+'/'+el.getAttribute('src'))
}
}
)
//这里你可以换成自己喜欢的蛤
div.innerHTML+='<p>本文使用<a href="https://b3log.org/siyuan/">思源笔记</a>写作</p>'
div.innerHTML+='<p>本文使用<a href="http://publish.chuanchengsheji.com/">椽承设计</a><a href="https://github.com/leolee9086/snippets">小工具</a>配合同步</p>'
return div.innerHTML
}
这里对思源的 assets 中的图片做了一下转换，让 wechatSync 能够拉取这些图片，否则会上传不了。
noobApi.核心api.pushMsg({
"msg": `同步${文档数据.hpath}到${账户.title}完成`,
"timeout": 1000
})
pushMsg 这个 api 我们之前还没有用过，不过意思很明显，就是推送消息到各端。
最后的成果效果就像是这样（没错这篇文档就是这么发出来的）：
代码片段全部内容参考这里
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于