尝试用思源笔记直接发布公众号

本贴最后更新于 325 天前,其中的信息可能已经水流花落

最近想要捡起微信公众号,于是尝试下思源笔记的内容能否直接发微信公众号

思源笔记具备预览模式(快捷键 ctrl+alt➕9),打开之后直接点击微信公众号图标即可复制内容和样式,能够在公众号的编辑器直接粘贴,但是样式有点过于朴素

所以,修改了下自己用的主题,使得预览模式的主题更适合用来发布文章,主要参考了微信 Markdown 编辑器 | Doocs 开源社区的样式

主题修改注意事项

  1. 微信公众号可以复制 html 样式,但是前提是不能用 css 变量,所以导出的 css 需要额外适配,用变量的都要修改。
  2. 标题的字体要用 px 而不是 em 为单位,否则思源预览和微信公众号预览的标题字体大小有偏差
  3. 发现 css 添加的伪元素无法粘贴到微信,可其他 markdown 转微信公众号的编辑器是可以的,暂时不清楚原因。

下面是思源笔记内的预览效果

Clip20240428172527.png

复制样式后,直接粘贴到微信公众号的效果

Clip20240428172925.png

Clip20240428173604.png

Clip20240428173816.png

代码分享

下列代码只影响预览模式和导出 pdf 样式,在 Tsundoku 主题和默认主题下测试能 work

/* 导出微信文章设置默认字体 */ .protyle-preview>.b3-typography { font-size: 14px !important; } /* 导出pdf设置默认字体 */ #preview .protyle-wysiwyg{ font-size: 17px !important; } .protyle-preview>.b3-typography p, .protyle-preview>.b3-typography [data-node-id], #preview .protyle-wysiwyg p,#preview .protyle-wysiwyg [data-node-id]{ border-radius: 0px !important; } .protyle-preview>.b3-typography h1, #preview .protyle-wysiwyg .h1{ font-size: 18px !important; font-weight: bold; border-bottom: 2px solid rgba(15, 76, 129, 1); text-align: center; } .protyle-preview>.b3-typography h2, #preview .protyle-wysiwyg .h2 { font-size: 16px !important; display: table; color: #fff !important; margin: 4em auto 2em; padding: 0 0.2em; background: rgba(15, 76, 129, 1); text-align: center; line-height: 1.75; } .protyle-preview>.b3-typography h3, #preview .protyle-wysiwyg .h3 { font-size: 16px !important; text-align: left; font-weight: bold; margin: 1em 8px 0.75em 0; padding-left: 8px; border-left: 4px solid rgba(15, 76, 129, 1); color: rgba(15, 76, 129, 1) !important; border-radius: 0px !important; } .protyle-preview .b3-typography h4, #preview .protyle-wysiwyg .h4 { font-size: 15px !important; font-weight: bold; color: rgba(15, 76, 129, 1); } .protyle-preview>.b3-typography h5, #preview .protyle-wysiwyg .h5 { font-size: 14px !important; font-weight: bold; color: rgba(15, 76, 129, 1); } .protyle-preview>.b3-typography h6, #preview .protyle-wysiwyg .h6{ font-size: 14px !important; font-weight: bold; } /* 图片居中 */ #preview .protyle-wysiwyg .p:has(span.img), .protyle-preview>.b3-typography p:has(span.img) { text-align:center; } /* 超链接 */ .protyle-preview>.b3-typography a { color: #338dd6; /* text-decoration: underline; */ } /* 行内代码 */ .protyle-preview>.b3-typography span[data-type~='code']{ color:#3779b3; background-color:#f3f4f4; } /* 代码块 */ .protyle-preview>.b3-typography .hljs, #preview .protyle-wysiwyg .hljs { background-color: #f8f9fa; } /* 表格框线 */ .protyle-preview>.b3-typography table tr th, .protyle-preview>.b3-typography table tr td{ border-color: #d1d3d6; } /* 引述块 */ .protyle-preview>.b3-typography blockquote{ border-left: 0em solid #4c6778; background-color: #73a8c70f; border: 1px solid rgb(224 239 249); border-radius: 7px !important; }
  • 思源笔记

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

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

    24652 引用 • 101148 回帖 • 1 关注
  • 公众号
    22 引用 • 146 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Achuan-2

    改是可以改,我以前主题的代码块就是 Mac 风格(后来觉得个人笔记没必要那么花里胡哨就删掉了),不过不知道为什么,思源复制到微信公众号,伪元素会丢失,其他 markdown 转微信公众号编辑器伪元素会保留,等我搞清楚,再加吧。

    1 回复
  • 其他回帖
  • a1007479270

    我复制过去时,图片全部不加载,无法上传到微信公众号,不知道怎么回事。

    1 回复
  • yalidabuda

    好嘞,我也发现这个问题了,但是俺不会搞 😂

    1 回复
  • 这个还会影响集市 README 显示,能排除掉集市吗?

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 217 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 170 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 2 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 97 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 17 关注
  • golang

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

    498 引用 • 1395 回帖 • 258 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 319 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    57 引用 • 25 回帖 • 5 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 638 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 541 回帖 • 2 关注
  • Sillot

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

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

    主仓库地址:Hi-Windom/Sillot

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

    注意事项:

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

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 736 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 44 关注
  • AWS
    11 引用 • 28 回帖 • 9 关注
  • SpaceVim

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

    3 引用 • 31 回帖 • 117 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    87 引用 • 122 回帖 • 629 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 5 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 383 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 4 关注
  • 微服务

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

    96 引用 • 155 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • Follow
    4 引用 • 12 回帖 • 8 关注