用Stylebot插件 修改Blogger/blogspot编辑器页面 显示被折叠的工具栏按钮

查看相关主题:

前言

书接上文 我们已经隐藏了bloger编辑器的右栏
但工具栏在空间足够的条件下, 还是产生了折叠分栏.
Blogger编辑页工具栏按钮折叠分栏，红框标出预览与发布
本文就来解决这个问题.

分析

通过 F12 开发者工具, 分析 工具栏的 HTML 内容
DevTools的Elements面板高亮class为Wdqgzf的工具栏

发现, 就在这个工具栏里面, 有些按钮被隐藏了. 也就是说, HTML内容里是有的, 但是页面上不显示.
DevTools检查工具栏按钮：部分按钮在HTML里但页面上不显示

面向GPT开发

因为GPT文本输入字数限制, 我们需要将工具栏的HTML内容保存为文件, 再上传给GPT.
用Chrome开发者工具查看flex样式并复制元素

HTML 环境

我有一个工具栏, HTML内容见文件
工具栏中包含一些按钮
有些按钮是显示的, 有些按钮是隐藏的
我现在需要将工具栏下的所有按钮都设置为显示

要求使用设定页面元素CSS的方式
按钮可能是动态的, 所以不要指定按钮的 class, 而要从按钮与工具栏的HTML层级关系分析.

把上述需求发给GPT, 得到
.Qy5T6b.O3LMFb.QduVPe * {
    /* 强制元素显示。display: initial 尝试恢复元素的默认显示类型，通常比强制 display: block 更安全。 */
    display: initial !important;

    /* 确保元素可见 (覆盖 visibility: hidden) */
    visibility: visible !important;

    /* 确保元素不透明 (覆盖 opacity: 0) */
    opacity: 1 !important;

    /* 移除可能导致元素被灰色化或隐藏的滤镜效果 */
    filter: none !important;
}

实践与调试

在 Stylebot 中设置刚刚GPT给的结果, 得到
Blogger编辑页工具栏按钮与.fmzcZd样式代码
可以看到有初步效果, 但是显示得太多了.
继续在F12模式下进行简单的分析.
DevTools的Elements面板红框标出Blogger工具栏的撰写视图节点
可以看到 下拉菜单选项啊, 说明文字啊, 都显示出来了.
如果我们限制 只显示到 按钮这一层, 会是什么效果呢?
问了一下GPT CSS语法,  改成这样
.Qy5T6b.O3LMFb.QduVPe > * > * {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}
效果有改善, 没有多余的文字和下拉菜单项了, 但是排列有点问题.
工具栏按钮排列分散，右侧为调整用的CSS代码
继续通过F12分析. 
Styles面板红框标出kKlVTb的display:flex

发现这些按钮元素原来的显示方式是 
display: flex;
所以我们继续优化为
.Qy5T6b.O3LMFb.QduVPe > * > * {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}
这下正常了.
调整后Blogger编辑页的预览、发布按钮与工具栏排列正常


Github


========

后记

本次 (2025-11-13) 面向GPT开发过程中, 使用的是
一开始我的思路是 把 折叠分栏中的按钮 "迁移"到 主工具栏中, 找GPT开发了一下子, 还有了初步效果, 只是位置不对, 需要优化. 
结果在优化分析的过程中发现,  主工具栏中有全部的按钮, 只是一些被隐藏了. 所以, 把"迁移"按钮的方案推翻.

========

相关推荐


评论
发表评论