思源笔记折腾记录 - 用 wechatsync 一键发布笔记到各个平台

一、前情提要：

我们之前实现了在思源中加载自定义菜单，就像这样：

思源笔记折腾记录-快速移动文档 - 知乎 (zhihu.com)

但是这个菜单只有移动文档的功能，有点不太给力。

刚好我之前到处翻翻找找的时候发现了这个：

微信公众号同步助手 - 公众号文章多平台同步 Typora Markdown 写作 一文多发 自媒体内容同步、内容营销、分发工具，自媒体助手，一键同步发布，支持微博头条、掘金、CSDN、今日头条、豆瓣、WordPress 博客、知乎专栏、简书、Typecho 博客等各大内容平台 (wechatsync.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 我们之前还没有用过，不过意思很明显，就是推送消息到各端。

最后的成果效果就像是这样（没错这篇文档就是这么发出来的）：

代码片段全部内容参考这里

leolee9086/snippets (github.com)