博文

目前显示的是标签为“blogger”的博文

Cloudflare worker 反代 blogspot 实现免翻墙域名镜像站 path关键词屏蔽

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

Cloudflare worker 反代 blogspot 实现免翻墙域名镜像站 绑定KV屏蔽path列表

图片
灵感 我有了一个想法, 想提高我这个博客在GFW墙内搜索引擎的曝光. 思路 1. 需要有一个没有被墙的域名, 用来访问我的博客 2. 我不想使用blogspot的自定义域名方案.  一是, 我原来的域名已经在墙外的搜索引擎中存在多年. 二是, 如果改为使用自己的域名, 我就需要维护域名的解析. 如果遇到攻击, 域名解析受影响, 我需要额外做不少工作.  3. 所以我需要一个没有被墙的域名作为镜像站 4. 作为墙内可以直接访问的域名, 显示的内容也应该是不涉及翻墙的. 所以需要屏蔽掉直接描述翻墙节点搭建, 翻墙工具使用的博文. 具体细节 1. Cloudflare worker反代是好多年的技术了. 可以做到显示 html 的效果. 2. 图片 来自 https://blogger.googleusercontent.com 可以用 uniproxy 的技术. 在第1步获得html之后, 把里面所有访问 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...
发表评论
Read more »

不换行空格NBSP问题的后续

图片
上一篇讲到我发现了我的博文的代码段有可能含有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 我的项目的使用者不需要做改动.
发表评论
Read more »

在 Blogger 的内容中使用 markdown

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

Blogger给blockquote代码段添加复制按钮

图片
上回书说到 , 我还是回到了用blockquote显示代码的方案. 那么, 没有复制按钮还是不方便呀.
发表评论
Read more »

Blogger最适合我的 还是不用代码高亮 / code-prettify / Prism / highlight.js

图片
除了 google 的  code-prettify , 其实我也尝试过 Prism 和 highlight.js Prism 用法 在blogspot的模板里添加 <link href='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css' rel='stylesheet'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js'/> <script src='https://cdn.jsdelivr.net/npm/prismjs@1.29.0/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总...
发表评论
Read more »

Blogger给代码段添加复制按钮

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

Blogger引入google的code-prettify实现代码高亮

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

用Stylish插件修改blogger编辑器宽度

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

Blogger 切换到 Google Analytics (分析) 4

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

Blogger 模板 Notable 首页出现精选博文FeaturedPost 后排版问题 博文之间广告宽度

图片
之前这个修改可以让 首页显示热门博文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) }
发表评论
Read more »

Blogger模板Notable系列去掉首字母变大占两行的CSS样式

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

Blogger修改模板文件 将非标题的超链接的字体 改为代码字体 方便打印 后识别

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

Blogger 模板 Essential 右侧增加AdSense区域

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

Blogger 模板 Essential 首页显示热门博文PopularPosts

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

Blogger 模板 Essential 去掉返回按钮 显示菜单按钮

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

显示代码优先使用 Source Code Pro 字体

font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace
发表评论
Read more »

Blogger修改Google AdSense样式 提醒用户 '此为广告'

图片
作为个人博客, 希望能从Google AdSense挣到一点广告费. 但是Google添加的广告有些确实一眼看过去容易让读者误以为是网站正文插图. 
发表评论
Read more »

Blogger的精选博文FeaturedPost只在首页Homepage出现

图片
也许你有希望重点宣传的博文，或者你想置顶一篇声明，于是你在Blogger里设置了 精选博文。也许你觉得在首页显示“置顶”博文的摘要就够了，不用在打开某篇博文还要显示这个。那么……
4 条评论
Read more »

Blogger应用text-autospace.js给中英文之间 添加空格 用Github Pages解决MIME type mismatch问题 引入jquery解决$ is not a function问题

图片
添加<script src='https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js'/> 添加<script src='https://crazypeace.github.io/text-autospace.js/text-autospace.min.js'/>
发表评论
Read more »

The Hot3 in Last 7 Days

隐形眼镜 的 包装 和 直径 对使用的影响

图片
隐形眼镜 用了比较久的一段时间了. 今天我分享一下隐形眼镜 的 包装 和 直径 对使用的影响吧. 1. 盛装隐形眼镜 的"容器"的内边缘 爱尔康 库博光学 可以看到, 库博光学的边缘转角的角度更大, 而且边缘有一条小边向内延伸, 摸起来还有点刮手. 那 这样的边缘使得 用户 把镜片拿出来的过程, 需要更小心, 不要让镜片被 这个边 刮到. 而 爱尔康 没有这个问题. 博士伦 我手里目前没有实物, 我使用过的 博士伦 也是没有这个问题的. 2. 镊子取镜片时的角度 爱尔康 的 "容器" 的外型外形是水滴型, 如下: 水滴的尖的位置就方便镊子插进去取镜片, 如下: 库博光学 的"容器"的外形是个圆型, 如下: 所以镊子插入的角度会更陡, 也就更不方便夹取镜片. 3. 镜片的直径 爱尔康 水润 Alcon Dailies All Day Comfort 白盒 镜片直径 13.8mm (区别于 爱尔康 多水润 Alcon Dailies Aqua Comfort 蓝盒) 库博光学 清氧清/珂朗清 CooperVision clariti 镜片直径 14.1mm 就这 0.3mm 的差别, 就使得我的较小的那一只眼睛, 佩戴体验有明显的区别. 我的观点不是说直径小的就更好. 我是说, 不要小看隐形眼镜的参数的一点点差别, 多试试不同的品牌和型号, 找到适合你的那一个. 对于我自己而言, 目前看来 爱尔康 多水润 Alcon Dailies 就是比较好的选择, 又便宜又好用. 4. 其它参数 材质啊, 含水率啊, 透氧量啊, ... 我实际佩戴过程中, 眼睛的感觉没有明显的区别.
Read more »

商业化电报关键词提醒机器人 telegram keyword monitor bot

图片
书接止文. 今天接着说商业化电报关键词提醒机器人 telegram keyword monitor bot 的一些思考. 也就是, 你可以怎样用项目去卖钱. Github https://github.com/crazypeace/tg-keyword-monitor-bot 再复习一下本项目的架构 卖的是搭建项目的劳动 对于项目的使用者来说, 如果还要操作linux系统, 修改配置文件来修改关键字, 使用起来会不方便. 本项目提供向机器人发命令来修改关键字的操作方式, 使用者不需要接触linux环境. 示例, 甲方 提供 tg账号, 作为采集者, 把信息源的群都加好. 你把这个项目搭起来, 把甲方的tg账号设置为 管理员 和 消费者. 使用方式就是, 如果要监听更多的群, 甲方自己操作tg账号去加群. 如果要修改关键字, 甲方自己操作tg账号和机器人交互修改关键字. 甲方在tg账号上接收机器人发送的关键字消息. 卖的是信息源 比如, 某些群 加群要收费, 或者不接收新群成员了.  而你手里有已经加了这些群的tg账号, 作为 采集者. 示例,  在同一个大圈子里, 不同的甲方有不同的关键字需求. 你的采集者是同一个tg账号. 你为每一个甲方, 分别 运行一个项目. (可以共用VPS, python环境. 建不同的目录就行了) 其它设置都和标准流程一样, 只是设置同样的 采集者 (配置文件中的 user_phone 参数) 卖消费者权限 如果这个行业关注的关键字相当同质化, 你也掌握了信息源. 想降低维护成本, 你可以直接卖消费者权限. 示例, 你可以直接修改配置文件的 result_id_list 列表, 添加不同的 接收关键字消息的 tg 账号的ID. 你也可以把一个tg频道的id 设置为 result_id_list. 然后把 发布者的 bot 添加为频道的管理员, 这样就可以发关键字通知了. 你可以把频道设置为私有的, 你控制订阅这个频道的权限就行. 你收了钱, 再把某个tg用户添加进频道. 我自己公开了一个关键字消息的频道示例: https://t.me/FuckGFWNewbieNeedHelp 使用多个采集者 不希望一个tg账号加太多的群, 担心一下子被封号的风险. 或者是你已经触达500个群组的上限. 运行多套程序, 分别使用不同的采...
Read more »

搭建电报关键词提醒机器人 telegram keyword monitor bot

图片
前几天 开发了一个电报关键词提醒机器人 已上传Github https://github.com/crazypeace/tg-keyword-monitor-bot 本文描述搭建过程. 首先, 你可以看看Github项目的readme, 那是一个从头到尾按操作顺序手把手的图文教程. 如果你觉得那篇教程有点云里雾里, 那么下面, 我换一个角度来描述. 系统架构 信息源 -> 采集者 -> 本程序 -> 发布者 -> 消费者 系统中的各部分 信息源 是 你想监听的各个tg群组, 频道 采集者 是 一个tg账户   * 推荐你注册一个新tg账户来玩. 本程序 是 本项目 main.py   * 本程序需要 api_id, api_hash. 需要到  https://my.telegram.org/apps 申请. 这里需要登录tg账户, 可以是 采集者同账户, 也可以是不同的账户.  发布者 是 一个tg机器人   * 本程序需要 bot_token, 需要向  https://t.me/BotFather 申请. 向 @BotFather 发起机器人申请的tg账户, 可以和前面同账户, 也可以是不同的账户. 消费者 是 接收关键字通知消息 的用户或群组或频道 本项目的运行环境 安装python 一般你用的比较新版本的操作系统 Debian / Ubuntu, 已经自带了.  略 安装 pip apt install -y python3-pip 拉取项目 apt install -y git git clone https://github.com/crazypeace/tg-keyword-monitor-bot cd tg-keyword-monitor-bot 安装python依赖 pip3 install -r requirements.txt --break-system-packages config.yaml.default 复制为 config.yaml 系统中各部分之间的关系 信息源 与 采集者 之间的关系 你自己登录 采集者账户 的身份, 加入信息源. 入群验证, 不公开群需要别人拉你, 需要管理员审批, ... 等等等等 这些问题, 需要你自己解决. ...
Read more »