ICDYCT / 我能, 你也行 / I Can Do, You Can Too

Stylebot https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha 思路基于 上一篇 用Stylish插件修改blogger编辑器宽度 我今天有个想法, 专心写的时候, 右边栏那些 东西我其实不关心. 不如把它们隐藏起来好了.  这样我的编辑区域又能变大一点. 经过一番 F12 工具的使用. 最终结果 www.blogger.com/blog/*/edit/* /* 左栏撑满 */ .fmzcZd {     padding-right: 20px; } /* 编辑区最大化 */ .a89Sje {   max-width: 100%; } /* 右栏隐藏 */ .vW7mGd {   display: none; } 使用效果如下 尾巴 其实对我来说, 还不算 完美.  因为工具栏 还是有个 ...  但实际上的宽度是够的 Github https://github.com/crazypeace/blogger-editor-css

前言 书接上文 我们已经隐藏了bloger编辑器的右栏 但工具栏在空间足够的条件下, 还是产生了折叠分栏. 本文就来解决这个问题. 分析 通过 F12 开发者工具, 分析 工具栏的 HTML 内容 发现, 就在这个工具栏里面, 有些按钮被隐藏了. 也就是说, HTML内容里是有的, 但是页面上不显示. 面向GPT开发 因为GPT文本输入字数限制, 我们需要将工具栏的HTML内容保存为文件, 再上传给GPT. 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给的结果, 得到 可以看到有初步效果, 但是显示得太多了. 继续在F12模式下进行简单的分析. 可以看到 下拉菜单选项啊, 说明文字啊, 都显示出来了. 如果我们限制 只显示到 按钮这一层, 会是什么效果呢? 问了一下GPT CSS语法,  改成这样 .Qy5T6b.O3LMFb.QduVPe ...

前面实现了一个反代 blogspot 实现免翻墙域名镜像站 .  用KV中保存需要屏蔽的path的方式, 做到了, 指定path显示固定页面, 而不是原页面的功能. 有的用户也许会觉得, 写了一篇不想在墙内显示的博文, 还要去KV里面添加一条记录, 好麻烦呀. 还有一个办法, 就是对path先进行关键字筛选, 含有关键字的path, 直接就显示固定页面, 不需要去查KV了. 比如, 我在写博文的时候, 就有自定义链接的习惯, 会在 xxx.html 的这个xxx里面 包含博文的主题 https://crazypeace.eu.org//2022/01/v2ray-caddy-ws-tls-cdn.html 利用GPT开发, 把 项目的work.js 丢进去, 附上这么一段话 GPT返回的结果有问题. 直接return Response 再多打几句. 这样的结果就对了. 更新到Github https://github.com/crazypeace/cf-worker-proxy-blogspot

灵感 我有了一个想法, 想提高我这个博客在GFW墙内搜索引擎的曝光. 思路 1. 需要有一个没有被墙的域名, 用来访问我的博客 2. 我不想使用blogspot的自定义域名方案.  一是, 我原来的域名已经在墙外的搜索引擎中存在多年. 二是, 如果改为使用自己的域名, 我就需要维护域名的解析. 如果遇到攻击, 域名解析受影响, 我需要额外做不少工作.  3. 所以我需要一个没有被墙的域名作为镜像站 4. 作为墙内可以直接访问的域名, 显示的内容也应该是不涉及翻墙的. 所以需要屏蔽掉直接描述翻墙节点搭建, 翻墙工具使用的博文. 具体细节 1. Cloudflare worker反代是好多年的技术了. 可以做到显示 html 的效果. 2. 图片 来自 https://img.crazypeace.eu.org/https://blogger.googleusercontent.com 可以用 uniproxy 的技术. 在第1步获得html之后, 把里面所有访问 https://img.crazypeace.eu.org/https://blogger.googleusercontent.com 的链接前面加上 uniproxy  3. CSS 对于 blogspot 来说, 是内嵌在html中的. 4. js 我不想管了, 在我的blogspot中, 对页面的阅读影响不大.  5. 跳转到其它页面的链接 在第1步获得html之后, 查找替换, 把blogspot域名替换为免翻墙域名. 6. worker绑定一个KV, 里面保存我不希望在墙内显示的链接. 当访问这些链接时, 显示一个固定的页面. 落实 反代 worker 在google中搜索"cloudflare worker 反代 代码", 没想到直接就给了AI结果 因为本项目体量不大, 而现在的各个GPT上下文都足够大, 哪怕我的M$ copilot使用受限了, 我也可以直接把全量代码复制粘贴, 再附上我的功能描述, 丢给gemini啊 chatgpt啊 去生成代码. chatgpt 5.0 有限额, 但是我的项目比较简单, 哪怕降级成 GPT-4 也有用. 具体的调试过程还是有点繁琐的, 就是遇到个问题, 复制代码加上报错信息(或者是自己想要做到什么功能的描述), 丢给GPT, 得到答案, 再部署应用, 再测试, ... 不断循环, ... 最终成果 Github htt...

上一篇讲到我发现了我的博文的代码段有可能含有NBSP的问题. 今天偶然发现, 复制代码段的按钮, 得到的结果会含有NBSP. 比如, 下面的例子. 用鼠标选择, 右键菜单复制, 得到的结果是左边的. 点击代码段的复制按钮, 得到的结果是右边的. (包含一些NBSP字符) 我拿我的代码和问题描述去问 claude. 方案1 将innerText改为textContent 具体实施 https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button1.js 测试结果不对. 不仅继续含有NBSP, 而且换行也没有了. 拿上面的问题继续问 claude 方案2 在innerText得到的结果中, 针对性地清理NBSP 原有的代码是"浓缩"为一整行的JS, 我很难在里面找到特定的位置修改, 也担心眼睛看花修改错. 所以我把原有的一整行JS丢给claude, 要求修改后输出同样的一整行给我. 我再落实到自己的代码中, 具体实施 https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button2.js 测试结果不错, NBSP没有了.  不过, 原文中的 1个空行, 会变成2个空行. 不影响使用, 不管了. ======== 最终采用方案2, 同步到原项目中 https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button.js 我的项目的使用者不需要做改动.

群里有人讨论如何在blogger中使用markdown 思路 以前在 短链转markdown日记本 的方案中, 页面内容<textarea>中是markdown格式文本, 外面再挂一段简单的JS转换markdown到HTML.

上回书说到 , 我还是回到了用blockquote显示代码的方案. 那么, 没有复制按钮还是不方便呀.

除了 google 的  code-prettify , 其实我也尝试过 Prism 和 highlight.js Prism 用法 在blogspot的模板里添加 <link href='https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css' rel='stylesheet'/> <script src='https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js'/> <script src='https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js'/> 效果 Prism没有自动识别代码的功能. 需要写blog时, 切换到html模式手动写 pre code 以及指定代码类型 可以有下面这样的效果. (当然, 配色方案能找到很多选择) highlight.js 用法 <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/> <script>hljs.initHighlightingOnLoad();</script> 效果 highlight.js可以自动识别代码类型, 不过也不怎么准, bash识别成 Ruby 如果想bash识别准确, 每行命令前面要打那个#号. 那这样又不方便直接复制之后在命令行里直接粘贴运行了. 对JS代码的判断还正常. 还有一个最大的问题, 我把blockquote替换为pre code之后, highlight.js总...

之前我们实现了给代码段添加高亮. https://crazypeace.eu.org/2024/05/blogspot-code-prettify.html 但是如果一行太长, 就会这样. 用鼠标拖着去选择, 很不方便. 这时候如果有个复制按钮就好了. 之前一直以为很复杂. 今天既然又有冲动了, 就查一查吧.

最早的时候, 我是用 CSS定义blockquote来实现某种意义上的显示代码 . 这两天, 看到一个推荐google的code-prettify项目的博客 https://www.shushen.xyz/ 就想到怎么把这个引入到 blogger 里面来.

blogger的系统有一点点 "过时". 在编辑博文的时候, 我觉得编辑器的宽度有点太窄, 特别是在比较大的显示器上, 显得没有充分利用. 可以打开开发者工具, 找到这个页面元素, 把width属性改大一点. 但是这样修改的结果, 只要刷新页面就复原了. 为了能每次打开这个编辑器页面都可以自动修改. 可以使用插件实现.

去年10月和最近两天，我的博客都有异常的流量访问。 不用自己的域名和服务器搭博客的好处是，随便这些流量怎么跑，对大公司（Google）来说，都是小意思。对我自己来说，属于完全不用花精力去思考。

得到你的 GA4 代码 登录 https://analytics.google.com/ ，点击 "全部网站数据" 选择 GA4 看到你需要添加的代码 G-XXXXXXXXXX 设置Blogger 效果

之前这个修改可以让 首页显示热门博文PopularPosts 但是在Blogger的 Notable 类模板下，首页的排版显得很奇怪。 经过分析，是"更多博文"的浮动排版造成的影响。 修改模板文件 修改前： .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } 修改后： .blog-pager{ text-align: center; margin: 2em 0; } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); font:$(feed.button.font); text-transform:uppercase } 效果： =========== 其它修改一并记录一下： 广告前后留空太多 修改前： .shown-ad {     margin-bottom: 85px;     margin-top: 85px; } 修改后： .shown-ad {     margin-bottom: 45px;     margin-top: 45px; } 博文之间广告宽度 修改前： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 604px) } 修改后： .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 204px) }

 当在Blogger中使用Notable系列模板时，每篇文章的首字母会变大，占两行。如下： 在一些以文字为主的博客站也许很合适，但是放在技术类的站我个人觉得就不太适合了。

我的搭建节点的教程有个目标就是——爷爷奶奶也能成功，只要能认识字母，会操作键盘和鼠标，就能成功。 我设想的一个使用场景是——把教程的字体调大后打印出来, 读者照着纸质的教程操作. 那么超链接的可读性是需要得到保证的.

Blogger 模板 Essential 右边有2个长条状的Google Adsense区域. 我觉得我的页面会比较长, 所以足够添加第3个Adsense区域. 那么就要修改Blogger的模板文件了

写博客的产出不稳定的，如果出现了受欢迎的博文，希望能多持续一段时间，也想推荐给"过客"。所以我想在首页也显示热门博文。

换了一个新模板Essential，我觉得还是比较满意。不过进入博文页面的时候左上角有一个返回按钮，而菜单按钮"三"不见了。我希望用菜单按钮把左侧的Google翻译、RSS Feed呼出来、归档、标签云；如果想返回的话，使用浏览器自带的功能就可以了。

font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace