原创 ElfeXu 2024-11-21 19:26 上海
不想在飞书上写文章的，可以尝试我这个办法
前阵子大聪明的带带弟弟排版器[1]在飞书上发布了，很受欢迎。大家普遍反馈最棒的一点是图片可以一次性复制粘贴。
我之前一直用阿禅可能吧的排版器[2]排公众号文章，对于图片我有一套很顺畅的换图方式，一篇文章几十张图操作不超过半分钟，就感觉也还好。这回尝试了下大聪明的排版器，能批量贴图真的开心很多，才想起该迭代工具。
但是，我日常笔记都在 Obsidian 里，更喜欢本地用 markdown 写文章，不想换飞书。那就自己动手丰衣足食啦。
效果展示
我用键盘敲下的字符是这样的（图片部分通过复制粘贴得到）
在 Obsidian 里显示是这样的：
复制粘贴到公众号编辑器里是这样的：
实现步骤
一、给 Obsidian 安装插件
（Obsidian 本身的安装和使用可以看小七姐写的保姆级教程[3]，本文就不啰嗦了。）
打开 Obsidian 的第三方插件库，搜 html，看到好多转换器，其中第二排第二个说复制内容 as HTML，并且包含图片。就它了！
点击安装后进入设置界面，把 Embed external images 打开，这样图片就能直接复制了。
再设个好记的快捷键，我选 shift+ctrl+c。
找一篇本地和网络各种来源的几十张图片的笔记，shift+ctrl+c，去公众号粘贴，果然，所有图片都稳稳当当出现在公众号里了。好用！
二、修改 CSS
目前粘贴出来的内容几乎没有任何格式，要让它好看就得定制自己的 css。
把设置里“custom template”选项打开，复制默认的 css 文本，贴给 claude。
提出我的格式要求：
把 claude 帮我写的 css 贴回设置里的文本框，再次尝试，复制粘贴出来的文章就有格式了。再提出一些修改意见让 claude 迭代。两轮后完工。
最后贴到设置里的 css 是这样的：
/* 标题样式 */h1, h2, h3, h4, h5, h6 { color: #ff4c00; margin: 1.5em 0 0.8em; font-weight: 600; line-height: 1.4;}h1 { font-size: 36px; border-bottom: 3px solid #ff4c00; padding-bottom: 0.3em;}h2 { font-size: 30px; border-bottom: 2px solid rgba(255, 76, 0, 0.8); padding-bottom: 0.2em;}h3 { font-size: 24px; border-bottom: 1px solid rgba(255, 76, 0, 0.6); padding-bottom: 0.1em;}h4 { font-size: 20px; }h5 { font-size: 18px; }h6 { font-size: 16px; }/* 基础段落样式 */p { font-size: 15px; line-height: 1.6; color: #333; margin: 1em 0;}/* 脚注中的段落样式 */.footnotes p, section[class="footnotes"] p { font-size: 12px !important; color: #666 !important; line-height: 1.5 !important;}/* 强调文本 */strong, b { color: #ff4c00; font-weight: 600;}/* 列表样式 */ul, ol { padding-left: 1.5em; margin: 1em 0;}ul li { list-style: disc;}ul li span { color: #333; font-weight: normal;}ol li { font-weight: 600;}ol li span { color: #333; font-weight: normal;}/* 代码块 */code, kbd, pre { font-family: "Roboto Mono", "Courier New", Courier, monospace; font-size: 14px; background-color: #fff5f2; border-radius: 4px;}pre { padding: 1em; margin: 1em 0; overflow-x: auto; border: 1px solid rgba(255, 76, 0, 0.1);}/* 图片 */img { max-width: 100%; border-radius: 8px; margin: 1em 0;}/* 表格 */table { width: 100%; border-collapse: collapse; margin: 1em 0; background: white; border: 1px solid #eee;}table th { background-color: #fff5f2; color: #ff4c00; font-weight: 600; text-align: left; padding: 0.8em; border: 1px solid #eee;}table td { padding: 0.8em; border: 1px solid #eee;}/* Callout 样式 */div[style*="callout"] { margin: 1em 0; padding: 1em; border-radius: 8px; border: 1px solid rgba(255, 76, 0, 0.1); background: #fff5f2;}div[style*="callout-title"] { padding: 0.8em; color: #ff4c00; font-weight: 600; border-bottom: 1px solid rgba(255, 76, 0, 0.1);}div[style*="callout-content"] { padding: 1em; background-color: white !important;}/* 任务列表 */li[style*="task-list-item"] { list-style: none; padding-left: 0;}input[type="checkbox"] { margin-right: 0.5em;}/* 引用块 */blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 4px solid #ff4c00; background-color: #fff5f2; color: #666;}/* 链接样式 */a { color: inherit; text-decoration: underline;}/* 分隔线 */hr { border: none; border-top: 2px solid rgba(255, 76, 0, 0.2); margin: 2em 0;}/* 代码块 */pre { padding: 1em; margin: 1em 0; max-height: 350px; overflow-y: auto; /* 只保留垂直滚动 */ border: 1px solid rgba(255, 76, 0, 0.1); white-space: pre-wrap; /* 允许自动换行 */ word-wrap: break-word; /* 确保长单词也能换行 */ overflow-x: hidden; /* 隐藏横向滚动条 */}code, kbd, pre { font-family: "Roboto Mono", "Courier New", Courier, monospace; font-size: 14px; background-color: #fff5f2; border-radius: 4px; white-space: pre-wrap; /* 允许自动换行 */ word-wrap: break-word; /* 确保长单词也能换行 */}
再次测试，就是你们看到的这篇文章的样式了。满意，收工。
一些感想
从开始有想法到最终搞定这个功能其实只花了一小时（中间还有十几分钟尝试做网页版插件的歪路）。但直到用起来了，我才感受到写公众号发文章体验能有多丝滑：现在我的每一个小笔记都想发就发完全零阻力，改动也是零阻力每次改后更新只需两秒钟。
立刻觉得自己之前的将就是多么不可原谅了……是的我有一些借口：审美不行 CSS 调不出可能吧的效果，流程已经优化过了也不算麻烦，需求总会变总有些边边角角功能搞不定还是得手动……但比起现在享受到的顺畅，以及这种顺畅可能带来的质的变化，之前的理由太立不住脚了啊。
还是得勤快点多折腾。有 AI 在，折腾这些事儿，都超级简单呢。
带带弟弟排版器 https://mp.weixin.qq.com/s/Qh-oLJBRLFPlcd29f4ka4A
阿禅的可能吧 Markdown 转公众号排版 https://knb.im/mp/
小七姐的保姆级 Obsidian 教程 https://vxc3hj17dym.feishu.cn/wiki/JlXcwBdUjiB4makSaAPcME9WnIc?from=from_copylink
