企业官网建设流程全解析

我做了一个微信公众号排版工具，今天想聊聊这 57 次提交背后的故事——不是讲技术多牛，而是讲一个独立开发者在「能跑」和「敢用」之间反复横跳的真实心路。

如果你也受够了排版浪费时间、复制粘贴丢样式，文末有这个工具的体验地址（免费）。

一、为什么做这个工具

写公众号的人都知道痛点：

• 想专注写作，结果一半时间花在调字号、调边距上
• 看到喜欢的文章样式，只能靠截图估颜色、估间距
• 复制到公众号编辑器，背景色没了、引号变方块、加粗丢失
• 多个账号多套样式，没有统一复用
• HTML样式一键重排版

我决定自己写一个：所见即所得，一键复制到公众号不丢样式。

现在这个工具已经帮我节省了 10+ 篇文章、累计 5+ 小时的排版时间。如果你也在写公众号，应该能用得上（体验方式见文末）。

二、从 0 到「能跑」

最初版本很朴素：左边 Markdown 编辑器，右边预览，5 套主题，复制到剪贴板。第一次提交 70dbf2b，功能齐全、能跑起来。

但「能跑」离「敢用」差了十万八千里。

三、那些让我崩溃的"小问题"

1. 字体引号的诅咒

复制到公众号，加粗的**之间出现了<span style='font-family:"">这种垃圾属性。

我以为是 markdown-it 的问题，改了三版解析器；后来发现是字体族font-family里的引号被公众号编辑器识别为属性分隔符。

修复：去掉引号，加转义，重构 buildInlineHtml 流程。
相关 commit：a09a7e8、71dcfc3、a965062

2. 背景色复制过去就消失

设置了好看的背景色，复制到公众号变成白底。

排查发现：公众号编辑器会丢弃外层 div 的 background-color，必须用 section 标签 + 强制十六进制（不能写变量）。

修复：外层用<section>包裹，颜色全部展开为#xxxxxx。
相关 commit：3199323、d8bd279、1641f96

3. 加粗与中文相邻时解析失效

**加粗**内容这种中文紧贴的情况，markdown-it 解析失败，加粗丢失。

加了正则兜底 + 单测回归，再没复发。
相关 commit：422fe18

4. 一键复制按钮"点不动"

线上用户反馈按钮无反应。本地一切正常。

最后发现是 Clipboard API 的 MIME 兼容性问题，公众号环境只支持text/html一种。
相关 commit：3aa7345、915a243、5a5c8b0

每一个 bug 都是用户骂出来的。如果你试用时遇到问题，直接留言，我改。

四、第一次大重构：从单文件到模块化

功能稳定后，App.tsx 已经膨胀到 1500+ 行，主题配置全部堆在themes.ts一个文件里（1026 行）。

我意识到：个人项目最怕的不是写不出来，是改不动。

于是做了三次大手术：

• 拆分组件：App.tsx → EditorPanel / PreviewPanel / ThemePanel / FormsPanel / CardsPanel / ModulePanel + 6 个 hooks
• CSS 模块化：950 行的 styles.css → 8 个职责分明的子文件
• 主题系统重构：从硬编码 →mergeVars配置驱动，新增主题只需 5 行

结果：新增一套主题从 200 行代码降到 5 行。
相关 commit：afeb213、58f5270、93755c3、abd2336

五、40+ 套主题，6 大风格

按"简约 / 活泼 / 专业 / 文艺 / 科技 / 节日"分类，精选了 40+ 套主题，涵盖：

• 默认公众号风格、极简白
• 商务蓝、暖色编辑
• 樱花、春日、清明等节日主题
• 深度阅读、技术风格

每套主题不只是改颜色，还包含：标题样式、加粗颜色、引用样式、代码块、列表、分割线。

最让我得意的是"现代商务蓝"——给标题加蓝色圆角背景，加粗文字用强调色，被好几个做付费内容的朋友直接拿去用。

如果你有想要的主题样式，留言告诉我，我加到下一版里。

六、那些"看似很小"的修复

• Ctrl/Cmd+B复制到公众号，Ctrl/Cmd+S导出草稿
• Toast 居中、自动消失
• 段后距实时调节
• 主题支持分类筛选
• 草稿自动保存到本地
• 模块库支持拖拽排序、标签筛选、导入冲突策略

每一个都对应一个真实的写作场景。做工具最怕"我觉得用户不需要"，但其实用户每天都在骂。

七、为什么值得花这么多时间

我自己的公众号用这个工具写了 10+ 篇文章，每篇节省 30 分钟排版时间。

更重要的：我再也不会因为排版难看而犹豫要不要发。

这就够了。

八、技术栈（给想抄作业的同学）

• React 18 + TypeScript + Vite：开发体验拉满
• markdown-it：Markdown 解析
• CSS 变量 + 内联样式双轨：预览用 var() 保持可调，复制展开为具体值
• 配置驱动主题系统：mergeVars 组合，零硬编码
• 本地存储 + 剪贴板 API：无后端，纯前端

代码 4500 行，57 次 commit，从 5 月 7 日到 6 月 2 日。

九、这个工具适合谁

如果你符合以下任意一条，这个工具值得一试：

✅写公众号但不想被排版绑架的人
打开就能用，不需要注册，数据全部存在本地浏览器里，关闭页面也不会丢。

✅从网页或 Word 复制内容过来格式全乱的人
内置「一键重新排版」功能——把乱糟糟的 HTML 粘贴进去，自动清理成一键可用的 Markdown + 样式。

✅想要统一多账号排版风格的人
40+ 套主题，覆盖简约、活泼、专业、文艺、科技、节日 6 大风格，选定后一键套用，永久复用。

✅想要偶尔加点视觉模块（封面卡、提示卡、步骤卡）的人
模块库支持保存、标签分类、拖拽排序，下次直接复用，不用每次重新调。

✅完全免费，没有任何套路
不需要关注公众号，不需要转发，不需要付费——就是我自己写的工具，顺便分享出来。

十、关于开发过程中的工具

开发这个排版工具的过程中，我用 MonkeyCode 这个 AI 编程平台辅助代码生成和调试——确实帮我省了不少写重复代码的时间。

他们最近在办一个「AI 编程马拉松」活动，完成任务可以免费领取积分，想体验 AI 编程平台的同学可以去看看：

👉 通过我的邀请链接参加（不多说，活动页面比我讲得清楚。）

十一、如何获取这个工具？

第一步：关注公众号「米可乐的AI副业实录」

为什么关注？

• 我会持续更新这个工具（新主题、新功能）
• 公众号里会分享更多 AI 编程做工具的真实记录
• 偶尔发点排版技巧、公众号运营干货
• 如何你还有写标题的困扰，我还有一个爆款标题的系统工具

第二步：后台私信「排版工具」

我会自动回复体验网站地址 + 使用说明。

完全免费，不需要转发，不需要集赞。

因为这个工具是我真实在用的，我也知道写公众号的人最缺的是时间，不是钱。

如果你也在为了排版困扰，欢迎试用（地址通过私信获取），有任何问题留言告诉我。

#公众号工具 #独立开发 #技术复盘 #React