思源笔记折腾记录 - 对接 wechatSync,一键发布笔记到 20 多个平台

本贴最后更新于 450 天前,其中的信息可能已经时移俗易

首先我们还是需要引入两个依赖,实际上这两个依赖很简单,之后我会说一下它们分别是怎么实现的:

import 自定义菜单 from 'siyuan-noob/customMenu/index.js'  
import 核心api from "siyuan-noob/utilKernel/kernelApi.js"

其中自定义菜单,是对思源的菜单进行菜单项注入的模块;而核心 api 顾名思义, 就是所有核心 api 的函数形式,因为不停重复写路径那些实在是太太太繁琐了,所以就弄了这么一个东西.

if(window.$syncer){
    let allAccounts = []
    window.$syncer.getAccounts(function (resp) {
        console.log('allAccounts', resp)
        allAccounts = resp
        注册菜单项(allAccounts)
    })
}

因为 wechatSync 会向页面内注入一个名为 $syncer 的对象,它就是文章同步功能的入口。

然后就是注册菜单项目了,对于每一个目标平台账号,我们都给它创建一个菜单项目。


function 注册菜单项(账户列表){
    自定义菜单.编辑器菜单.注册自定义菜单项(
        {
            id:'wechatSync',
            文字:`使用wechatSync发布`,
            图标:'#iconInbox',
        }
    )
    账户列表.forEach(
        账户=>{
            自定义菜单.编辑器菜单.注册自定义子菜单项(
                (菜单项) => { return 菜单项.id == "wechatSync" },
                {
                    id:账户.uid,
                    文字:`${账户.title}`,
                    图标:'#iconInbox',
                    点击回调函数:()=>{发布文档到(账户)}
                }
            )
        }
    )
}


我们来创建一个发布文档的函数,文档的 id 嘛,在菜单的状态里面就能够拿到了。

async function 发布文档到(账户){
    let 块id = 自定义菜单.编辑器菜单.菜单状态.当前块id
    let stmt = `select * from blocks where id in (select root_id from blocks  where id = "${块id}" )`
    let 文档数据 = (await 核心api.sql({ stmt: stmt }))[0]
    let 文档内容 = await 核心api.exportPreview(
        {
            "id": 文档数据.id
        }
    )
    let 文档属性 = await 核心api.getDocInfo(
        {
            "id": 文档数据.id
        }
    )
    let 发布数据 = {}
    发布数据.title = 文档属性.ial.title
    发布数据.markdown = 文档数据.markdown
    发布数据.content = 转换图片地址(文档内容)
    发布数据.desc = 文档属性.ial.memo
    发布数据.thumb = 文档属性.ial['title-img']
    核心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
}

任务是这样生成的,一堆 if​,其实你也可以用三目运算符号来做这个事情:

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 的发布任务表里面去了

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 () {
            核心api.pushMsg({
                "msg": `同步${文档数据.hpath}${账户.title}完成`,
                "timeout": 1000
            })  
        }
    )
}

这样点击文档菜单之后,文档就会被发布到对应的平台啦~~

效果就像是这样:

image


使用方式:

必须安装思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)中的代码片段,或者插件集市中的运行笔记插件才可以直接剪藏之后运行这些代码.

推荐同时使用思源笔记折腾记录 - 快速开关代码片段 - 链滴 (ld246.com)用来更好地管理代码片段.


已知的问题:

这是一个对接到 wechatSync 浏览器插件的功能,所以它只有在浏览器打开思源的时候才能够生效。


水完收工,如果这玩意对你有用可以去爱发电给我买杯咖啡哒

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    20144 引用 • 77675 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 378 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    126 引用 • 1699 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 124 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 639 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 510 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 510 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 688 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    328 引用 • 1715 回帖 • 3 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 45 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 275 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 429 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 363 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 222 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 53 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 429 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 615 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 615 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 702 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    495 引用 • 1386 回帖 • 332 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 2 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 82 关注