Blogger切换HTML/Compose模式时自动修改标签致功能异常求助

这问题我之前帮不少Blogger用户踩过坑，核心原因就是Blogger的Compose编辑器自带的自动格式化机制——它会把识别为“非标准”或者“可能不安全”的HTML/CSS代码自动修改，尤其是自定义类名、内嵌样式这类内容，切换模式保存后直接就崩了。下面给你几个靠谱的解决方案：

方案1：全程使用HTML模式编辑，彻底避开Compose #

一旦你在帖子里加入了自定义的折叠代码，就别再碰Compose模式了：

• 编写、修改内容全在HTML模式下完成
• 直接在HTML模式点击保存/发布，不要切换到Compose预览或修改
• 如果需要预览效果，用Blogger的“预览”按钮，别通过Compose模式看

这个方法最直接，从根源上避免编辑器修改你的代码。

方案2：把CSS样式移到主题的自定义CSS中，减少帖子内的代码量 #

Blogger的帖子编辑器对内嵌CSS容忍度极低，但主题的自定义CSS区域是安全的，不会被修改：

1. 进入Blogger后台 → 主题 → 点击“自定义”按钮
2. 在自定义面板里选择“高级” → “添加CSS”
3. 把你的折叠功能完整CSS代码粘贴进去：

.cattext input { display: none; margin: 0 10% 0 0; }
.catlink { float:right; margin: 0 10% 0 0; }
input { display: none; }
/* 把你剩下的.cattitle相关样式也补充在这里 */

4. 保存主题后，回到帖子的HTML模式，只保留对应的HTML结构（比如触发按钮和内容容器），去掉帖子里的内嵌CSS。这样帖子里的代码更简洁，编辑器也不会乱改。

方案3：用HTML小部件替代帖子内代码（适合固定模块） #

如果这个折叠内容是全站通用的模块（比如侧边栏、页脚），或者每个帖子都固定出现的部分：

1. 进入Blogger后台 → 布局 → 添加小部件
2. 选择“HTML/JavaScript”小部件，把你的完整折叠代码（HTML+CSS）粘贴进去
3. 调整小部件的位置，保存布局
   这种方式下，代码完全脱离帖子编辑器的控制，绝对不会被修改。

注意事项 #

• 每次修改带自定义代码的帖子前，先复制备份当前的HTML代码，万一编辑器搞坏了能快速恢复
• 尽量避免在帖子里写style=""这类内嵌样式，全部改用外部CSS类，编辑器对外部类的修改概率更低

内容的提问来源于stack exchange，提问作者Faiz Sheikh