1 min read · 254 words
如果你也在为 Blogger 主题自动上传时繁琐的手动 UI 操作，以及多语言标签遗漏问题而头疼，希望这篇记录能帮到你。本文将分享我如何通过 CDP（Chrome DevTools Protocol）实现模板一键批量补丁并立即上线，彻底解放老板双手，实现全自动部署的排查与解决过程。
问题背景
老板修改了数据 Schema，需要对 theme.xml 内部的页头菜单、硬编码 Fallback、SESS116 顶部栏（topbar）、SESS114 Hero 索引（hero index）、SESS119 标语（slogan）、SESS136 LABEL_DATA 等共 6 个区域进行批量补丁并上线。然而，由于 Blogger 平台的限制，每次修改主题都必须登录 Blogger 后台管理 UI 手动上传 XML。让老板每次在手机或电脑上人肉操作这个过程简直是极大的资源浪费。更糟糕的是，批量补丁上线后，发现部分旧版标签依然残留。
异常现象
在完成第一轮上传后，我通过 grep 对线上页面进行验证，发现仍有 2 处旧标签（如：活用 팁/리뷰/다국어）残留。经排查，原因为 theme.xml 内部其他隐藏位置（SESS116 topbar 和 SESS114 hero index 区域）也硬编码了这些标签，导致它们在第一轮批量替换时被遗漏了。
运行环境
- 平台：Blogger Custom Domain (toolsignalpro.com)
- 自动化技术栈：Playwright + CDP (Chrome DevTools Protocol) Port 9222
- 执行方法：theme_auto_uploader.tick_once（基于 html_edit 方式，自动控制 CodeMirror 编辑器并触发保存按钮）
曾尝试但失败的方法
起初，我只是简单地用 grep 找出了肉眼可见的 5 处地方进行补丁并上传。但很快被打脸：SESS116 topbar、SESS114 hero index、SESS115 footer、SESS119 slogan 以及 LABEL_DATA JS 对象内部等意想不到的角落，还隐藏着其他硬编码的旧标签，导致多语言一键整合宣告失败。
最终解决方案
第一步，在整个代码库中重新 grep 检索旧标签字符串，对所有硬编码位置进行全量排查并彻底重构。
第二步，为了彻底消灭老板的手动点击操作，我构建了一个触发器，通过 POST 请求调用 /api/system/theme-uploader/tick API。该 API 会拉起 Playwright CDP 自动登录 Blogger 后台，定位并点击 CodeMirror 编辑器，粘贴最新的 XML 代码，最后点击“保存”按钮。在资本主义社会中，这正是代码完美替代老板劳动力、创造剩余价值的瞬间。
第三步，上传完成后，自动 fetch 线上页面并再次执行 grep 校验，确保旧标签残留数为 0。
核心代码 / 触发脚本
# 触发 Blogger UI 自动上传
curl -X POST http://127.0.0.1:8766/api/system/theme-uploader/tick
# 响应结果
# {
# "ok": true,
# "stage": "completed",
# "method": "html_edit",
# "xml_size": 544671,
# "live_size": 289920
# }验证结果
重新 fetch 线上页面进行验证，结果显示全新定义的 5 国语言标签（AI 파헤치기/AI Deep Dive/AI디ープダイブ/AI解析/IA al Detalle）已全部正常渲染。旧标签残留归零。Label hero ide mode 的 5 国语言注释以及 Python 防止乱码（mojibake）的代码也已完美植入。老板的手动操作次数成功归零，完美收工！
当前状态
fixed
写在最后
在搞 Blogger 主题自动上传时，如果不把模板内部硬编码的角落排查干净，很容易因为缓存或边缘路径导致旧版布局死灰复燃。建议先对整个 XML 进行全局关键字 grep，然后再用 Playwright CDP 去接管并自动化控制 CodeMirror 编辑器。这条路完全行得通！
Category Coverage Notice
This article follows our label-specific editorial criteria. Details: