博文

目前显示的是 2024的博文

在受限的VPS环境下 使用233boy的sing-box脚本 如果你希望强行取消脚本报错退出的逻辑

图片
在受限的VPS环境下 使用233boy的sing-box脚本. 在安装完后 , 如果想搭建带域名的协议, 如 vmess+websocket+tls 协议. 233脚本会校验你的域名是否解析到正确的IP. 这时, 也许你会遇到问题. 脚本会报错说你的域名没有正确设置DNS解析. 如果你对翻墙协议和搭建过程其实相当熟悉, 你确定域名的解析是设置正确的, 只是脚本中检测DNS解析的方法在受限的VPS环境下不能正常工作. 那么, 你可以强行取消脚本报错退出的逻辑.

在受限的VPS环境下 使用233boy的sing-box脚本 检测DNS域名解析问题

图片
在受限的VPS环境下 使用233boy的sing-box脚本. 在安装完后 , 如果想搭建带域名的协议, 如 vmess+websocket+tls 协议. 233脚本会校验你的域名是否解析到正确的IP. 这时, 也许你会遇到问题. 脚本会报错说你的域名没有正确设置DNS解析.

如果你不喜欢我的一键脚本在开始停那么一下

图片
众所周知, 我的 一键脚本提供了带参数的用法 , 这样可以省去安装过程中的交互, 脚本会认为你自己保证了参数的正确性. 如, bash <(curl -L https://github.com/crazypeace/xray-vless-reality/raw/main/install.sh) 4 8443 但是这样的使用方式, 在一开始的时候, 还是会暂停在这里, 让你确认运行过程中要用到的参数是否无误. 直到你按回车键后, 脚本才会继续执行. 如果你因为一些原因, 想连这个确认的步骤也加速跳过. 那么请读下去.

用Stylebot插件修改kejiland博客的颜色, 阅读更柔和 | 安知鱼主题博客通吃 anzhiyu theme

图片
kejiland博客的初始配色对我来说, 蓝色太饱和了, 有点刺眼. 所以用 Stylebot 插件修改一下CSS设置.

在 blogger 的内容中使用 markdown

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

在Linux上用socat进行网络环境测试 从外部测试TCP端口是否可用

图片
上一篇 里介绍了怎么在linux环境测试端口是否可用.  可以从 B linux VPS去测试 A linux VPS. 但是当我们使用常用的第三方测试 tcping.ping.pe, 或者从自己本地发起 tcping 测试 ( https://github.com/pouriyajamshidi/tcping ). 会遇到一个问题, socat 监听的端口只能连接一次. socat tcp4-listen:端口号 - 换句话说, tcping测试只有第一次连接成功, 然后linux端可以看到 socat 运行结束了, tcping也会看到后续测试都是失败的.

OVHcloud 免费1年的 .live 域名 需要提交付款方式(信用卡或PayPal)

图片
感谢 Shiina's Bulog https://blog.shiina.fun/2024/09/18/ovhcloud提供首年免费-live域名/ 其实整个过程中, 大的步骤和嫖其它免费域名一样的.  我就说几个可能需要提醒大家注意的细节吧.

写给死理性派的日抛隐形眼镜戴摘101

图片
本文的局限性 只讨论日抛.  只讨论透明近视镜(即, 不讨论美瞳, 不讨论散光). 只讨论中间价位的产品. 预设的读者是, 已经参考过一些隐形眼镜戴摘教程, 但还是没有学会的人. 会很啰嗦. 你可以按需取用, 或是跳过某些部分. 度数 近视 框架眼镜的近视度数与隐形眼镜的近视度数的换算表格在很多地方都可以找到. 我搬一份过来, 如下: source: https://www.eyeja.com/yanguangshi/1354.html 400度以下度数的数字不变化. 400度以上, 参考此表. 散光 大于100度的散光, 建议配散光隐形眼镜. 低于25度的散光, 可以忽略, 只按框架眼镜的近视度数换算隐形眼镜的近视度数. 50度到100度的散光, 可以将散光度数的一半, 加上框架眼镜的近视度数, 再换算隐形眼镜的近视度数. 计算工具 https://coopervision.com.cn/practitioner/tools-and-calculators/optiexpert/optiexpert-web#/calculator https://coopervision.com/practitioner/tools-and-calculators/optiexpert/optiexpert-web#/calculator 新手选择 品牌/型号 如果你没有朋友有合适的度数与你分享试用, 或者你没有特别的偏好. 那么我建议新手第一次尝试的话, 找2片装的  博士伦 清朗一日 Bausch & Lomb SofLens (* 我没有说这是最好的产品. 这里只是针对新手第一次戴摘, 或者试过其它的选择都没有成功戴摘的情况) 当然, 如果你的两只眼睛的度数不一样, 那么需要买两组. 原因如下: 1. 2片价格CNY9.9 2. 镜片染了蓝色. 好处是, 戴摘过程中, 更容易判断镜片的位置.  3. 就我自己的经验而言, 戴摘都更容易. 配戴准备 你试过别的方法都不成功, 那么我推荐的方法就是使用隐形眼镜配戴工具, 一般是一个小圆头镊子和小托盘. * 镊子注意头一定要圆润, 避免伤害隐形眼镜镜片. * 托盘要检查边缘不要有毛刺. * 托盘要正的/平的, 不要斜的.    (这个选择是针对我的教程的要求) 准备隐形眼镜润滑液 (* 注意, 不是隐形眼镜护理液!) (换

xkcd密码生成器 小优化 复制密码 复制助记词 不含空格

图片
为了方便使用, 我觉得 xkcd密码生成器 页面提供复制按钮是一个不错的主意.

GitHub Proxy 更新补记 把 perl-pe-para 放到 worker 上

图片
发现有个更新忘了记录下来. 补记于此: 以前我是把 perl-pe-para 参数放在 github 的repo上. 这样的弊端是, 里面的 perl-pe-para 参数的内容是写死的. 比如,

呼吁调用脚本时都写成 bash <(...) 的形式 这样方便ghproxy处理无限嵌套的脚本互相调用

图片
呼吁调用脚本时都写成 bash <(...) 的形式, 比如: bash <(curl -L https://github.com/crazypeace/warp.sh/raw/main/warp.sh) bash <(wget -qO- -o- https://git.io/v2ray.sh) 好处是, 方便ghproxy处理无限嵌套的脚本互相调用

如果你不喜欢 kejilion 的脚本默认打开上传信息

图片
如果你不喜欢 kejilion 的脚本默认打开上传信息 打开脚本, 找到 send_stats() { 在下面一行写上 return 再保存, 就行了. 

如果你不喜欢 kejilion 的脚本要同意许可协议才能使用

图片
如果你不喜欢 kejilion 的脚本要同意许可协议才能使用 打开脚本, 找到 UserLicenseAgreement() { 在下面一行写上 return 再保存, 就行了. 

Cloudflare worker代理任何文件链接 uniproxy

图片
在Telegram里逛到一个有意思的东西 进程监视器 v3.96 https://learn.microsoft.com/zh-cn/sysinternals/downloads/procmon 然后发现下载链接非常慢 https://download.sysinternals.com/files/ProcessMonitor.zip 3.3MB的包, 要下载31分钟? 如果是以前, 我就把这个链接放到我的 VPS上的离线下载器 里面. 再用filebrowser提供链接下载回来. 现在有了 uniproxy , 可以"代理"一个文件的链接. 相当于Cloudflare的worker帮我获取这个文件, 再返回给我.

惠普ENVY x360 13.3寸 HP ENVY X360 - 13-ar0000au 升级wifi至AX210 成功 2024-7-3

单纯记录一下. 如果有同样需求的朋友可以作为参考. 或者说, 不确定能不能干的朋友, 可以看到一个确定成功的实例. - 笔记本型号 2019款惠普ENVY x360 13.3寸 R7-3700U 翻转本 外壳印刷型号 HP ENVY X360 Convertible 13-ar0000AU CPU 3700U 原wifi RTL8822BE 官网产品资料页面 英文 https://support.hp.com/hk-en/document/c06296480 中文 https://support.hp.com/cn-zh/document/c06296481 - 升级原因是因为, 某天使用过程中断网, 然后无法搜到任何wifi. 重启电脑才恢复正常. 准备送给朋友的小门面作为前台工作机, 需要wifi工作稳定. 查询一圈之后, 选择升级AX210. - 淘宝上面AX210 CNY65包邮(2024-7-1的价格). 附送1个小起子, 2个小螺丝, 1个小铁片(真不知道这个铁片做什么用的). - 我 另外一台机器, 拆下来一个RTL8852AE , 尝试安装到本机上, 开机只识别蓝牙功能, 不识别wifi功能. 我也没继续折腾驱动程序. 反正是要换AX210的. - 拆机视频参考 https://www.youtube.com/watch?v=mabm2vtJmGE 硅胶垫下面螺丝挺多, 干脆硅胶垫彻底撕下来吧. 有2个6星螺丝, 没有对应的螺丝刀是拆不下来的, 如果用不合适的螺丝刀把螺丝拧花了会很麻烦. 后壳中央部位有卡扣, 我用了吸盘. 打开后盖第一件事情是拔电池排线! 用你的手或者塑料工具, 不要用金属工具! - 我的操作系统是已经更新到最新的win11. 换完wifi, 开机就正常工作了. 没有遇到驱动相关的问题. - 我想, 万一遇到驱动相关问题, 可以手机usb连接电脑再开网络共享, 然后上网找驱动.

Win7/Win10 32位环境 如何编译xray 1.8.4

图片
之前我们在VPS的linux环境下编译过xray. 如果你自己是 win7/win10 的32位环境, 如何自己编译呢?

解密rwkgyg-CFwarp脚本 原理与实践

图片
wget -N https://gitlab.com/rwkgyg/CFwarp/raw/main/CFwarp.sh 看第一眼, 就是 上次的加密方法 . 用上次的方法解密,  bash <(curl https://gitlab.com/crazypeace/tuic-yg-unpack/-/raw/main/unpack.sh) CFwarp.sh 发现脚本为分2部分. 前面部分是安装 bzip2, 后面部分是下载这个脚本并执行 wget -qN https://gitlab.com/rwkgyg/CFwarp/raw/main/1CFwarp.sh 那么就是说, 这个 1CFwarp.sh 才是本体. 下载了打开看一看.

bash脚本创建临时文件和目录 并在执行后删除 | 获取bz2-shell项目生成的临时解压文件

图片
有一种脚本加密的方法是通过 bzip2 加密后的脚本整体分为2部分, 前面部分是通用的解压流程, 后面部分是原脚本用bzip2压缩后的数据. 项目: https://github.com/FajarKim/bz2-shell 加密后的脚本示例: https://gitlab.com/rwkgyg/CFwarp/-/blob/main/1CFwarp.sh

Cloudflare的worker的JS里面 字符串不能包含 perl -pe空格

图片
一个非常简单的测试. 你创建一个worker, 然后把hello world修改为 perl -pe空格 * 注意字符串的末尾有个空格. 部署就会报错 API Request Failed: PUT /api/v4/accounts/9e0d39b714fdd7b1b66d46589d33ba59/workers/services/fragrant-hill-498d/environments/production?include_subdomain_availability=true (403)

惠普星13air HP Pavilion Aero Laptop 13-be0158AU 升级wifi至AX210 成功 2024-7-3

图片
单纯记录一下. 如果有同样需求的朋友可以作为参考. 或者说, 不确定能不能干的朋友, 可以看到一个确定成功的实例. - 笔记本型号 2021款惠普星13air 外壳印刷型号 HP Pavilion Aero Laptop 13-be0158AU CPU 5600U 原wifi RTL8852AE 官网产品资料页面 英文 https://support.hp.com/hk-en/document/c07605075 中文 https://support.hp.com/cn-zh/document/c07605076 - 升级原因是因为, 某天使用过程中断网, 然后无法搜到任何wifi. 重启电脑才恢复正常. 作为工作用的的电脑, 我无法接受. (谁也不想在线会议开到一半断网吧) 查询一圈之后, 选择升级AX210. - 淘宝上面AX210 CNY65包邮(2024-7-1的价格). 附送1个小起子, 2个小螺丝, 1个小铁片(真不知道这个铁片做什么用的). - 拆机视频参考 https://www.youtube.com/watch?v=m2r7B9EJ1n0 注意硅胶垫下面共5个螺丝. 其中, 不在四角的那个螺丝是更短一点的. HP在螺丝孔附近写了螺丝的型号 M多少 L多少 . 其中, M多少 是指多粗, L多少 是指多长. 所以, 短的那个螺丝, 孔附近的型号, 可以看到 L数字 是比其它几个要小的. 我用到了吸盘, 在后壳中部发力提 + 划片 来起头. 后壳中央部位有卡扣, 我用了吸盘处理. 划到USB-A口附近时, 要知道USB-A口整体是连在主板上的. 所以划片应该沿这样的路径来拆后壳. 打开后盖第一件事情是拔电池排线! 用你的手或者塑料工具, 不要用金属工具! - 我的操作系统是已经更新到最新的win11. 换完wifi, 开机就正常工作了. 没有遇到驱动相关的问题. - 我想, 万一遇到驱动相关问题, 可以手机usb连接电脑再开网络共享, 然后上网找驱动.

小米无线鼠标的USB接收器, 插在小米显示器上, 电脑不识别

遇到个特别奇怪的事情, 小米无线鼠标的接收器, 插在小米显示器上, 笔记本电脑(WIN10)不识别, 显示为USB设备异常.

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

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

Blogspot最适合我的 还是不用代码高亮 / 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总

Blogspot给代码段添加复制按钮

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

在受限的VPS环境下 使用233boy的sing-box脚本

图片
在233boy的群里, 总是遇到有人在受限的VPS环境下安装失败. 看了不少失败的案例, 一般是2个原因: 1. 访问github资源失败 2. 检测服务器IP失败

User JavaScript and CSS 失效, 换用 Stylebot

最近chrome更新了个什么东西, 一批修改网页的插件需要更新或者失效. 比如, 油猴, User JavaScript and CSS, ...

Caddy v2.8.2 必须显式指定 caddyfile 文件格式

图片
如果你刚刚更新了caddy的最新版本 v2.8.2, 或者刚刚用以前一直正常的一键脚本搭梯子, 最后发现caddy跑不起来. 检查发现报如下错误. Error: ambiguous config file format; please specify adapter (use --adapter) 那么, 你只要强制安装上一个版本 caddy v2.8.1 就好. 如下: sudo apt install caddy=2.8.1

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

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

Linux 命令行 curl 用POST方法 调用图床系统 API 添加二进制文件

图片
之前, 我们利用pastebin系统实现了用API添加文本文件 . 如果我们想保存二进制文件, 要怎么办呢? 这里, 我们利用图床系统imghost.

用FetchRSS制作国外主机测评zhujiceping的RSS [续:学习CSS选择器]

图片
在上一篇, 我们 使用FetchRSS的服务, 制作了zhujiceping的RSS . 但是, 在使用过程中, 发现在RSS阅读器中怎么也更新不到结果.

无服务器 自建短链服务 Url-Shorten-Worker 显示短链的二维码QRcode

图片
参考233boy的二维码工具. https://233boy.github.io/tools/qr.html 其中用到的二维码JS是 https://cdn.jsdelivr.net/gh/lrsjng/jquery-qrcode@0.18.0/dist/jquery-qrcode.min.js 并依赖 jQuery https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js 修改index.html. 在现有的短链文本框后再增加一个生成QRcode的按钮. 然后在现有的短链这一行与长链这一行之间, 添加一个div作为二维码的占位. 按下按钮的时候, 就生成二维码, 填充到那个占位的div里面.

用FetchRSS制作国外主机测评zhujiceping的RSS

图片
以前 用Feed43制作国外主机测评zhujiceping的RSS 可惜后来没了. 可能是因为RSS现在已经是一个小众圈子, 而服务器的代价又不小. 现在又有了一个 FetchRSS 的服务, 功能和原来的Feed43类似, 操作页面还友好了一些. http://fetchrss.com/rss/6614a5c5737dae52134807346614a59f0175012da513ef53.xml

无服务器 自建短链服务 Url-Shorten-Worker 支持中文 支持emoji

图片
需求 有朋友反馈, 如果短链自定义为中文, 就不行. 测试一下. 在管理页面中添加 "中文短链" 查询 KV 库, 添加正确. 在浏览器中测试, 报错不存在.

v2rayN-VLESS 支持 tlsHello分片

图片
需求 最近 wss 的翻墙方式被GFW针对SNI阻断了. 大家发现设置tls hello 分片能解决此问题. shadowrocket已经支持. 那么, 怎么在v2rayN里面进行设置呢?

无服务器 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 显示结果页面支持 Markdown

图片
需求 之前已经实现了 自建短链服务Url-Shorten-Worker变身日记本NetJournal 但是, 直接访问短链显示的是Markdown源码, 没有显示图文效果.

将图片以Blob的形式返回给浏览器 FireFox 乱码 其它浏览器正常

图片
还是之前的短链项目. 今天拿 FireFox 来调试, 发现图床的显示效果有问题. Edge 和 Chrome 显示正常.

Linux 命令行 curl 用POST方法 调用pastebin系统 API 添加文本文件

图片
我们已经有了 利用免费worker搭建的短链系统 , 通过 配置参数设置为网络记事本 Pastebin , 用于保存自己的翻墙节点订阅信息, 或者是clash的配置文件. 在某些场景下, 你在Linux环境下已经有了订阅信息的文件(或者clash的配置文件), 不想搞什么复制粘贴, 鼠标点点点, 就想命令行直接一键上传到短链系统(网络记事本 Pastebin)中. 那么, 可以使用 curl 命令, 用POST方法 调用短链系统的 API

无服务器 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 支持Markdown

图片
上一篇我们解决了网络日记本 NetJournal 从无到有的核心后台逻辑 . 现在要来解决使用效果了. 谁也不想日记本里面只能用文字+emoji+ascii艺术吧.  那想一想, 最好的解决方案就是 Markdown 了. 启发 找 GPT 一问, 给了一个很好的例子. https://devv.ai/zh/search?threadId=dbr3kt6te3uo 核心代码就是这一小段 document.getElementById('markdown-content').addEventListener('input', function () {   const markdownContent = document.getElementById('markdown-content').value;   const htmlPreview = document.getElementById('html-preview');   htmlPreview.innerHTML = marked.parse(markdownContent); }); 实践 把这一段抄到我们的index.html里面去, 添加一个card, 里面显示我们当前输入的Markdown文本的效果. 还可以把这样的显示效果融合到显示列表中. function buildValueMarkdown(longUrl) {   let valueMarkdown = document.createElement('div')   valueMarkdown.classList.add("form-control")     valueMarkdown.innerHTML = marked.parse(longUrl)   return valueMarkdown } buildValueItemFunc = buildValueMarkdown 在调试过程中, 发现一个问题. 如果我把日记内容写得比较复杂, 里面就会带上一些 [] ! () # 这类符号, 并且还有换行. 当我在index.html调用API去查询单条记录的时候, 报错说json格式有什么问题. 但是我用 loadKV 去查询全部的时候,

无服务器 自建短链服务 Url-Shorten-Worker 变身网络日记本 NetJournal

图片
前面我们已经实现了 网络记事本 PasteBin , 用于托管自己的一段文本. 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue 如果想作为自己的一份日记本的话, 用起来会有一点不顺手. 比如, 如果你把这个页面作为主要的操作页面, 而不是从别的地方写好了再复制粘贴过来, 那么这个页面并不能让你写一点了保存一下, 再写一点了再保存一下. 你点保存的时候会提示 key 存在冲突. 还有一点就是, 当你确定要修改某一篇日记时, 还要去显示列表中找到它, 有点不方便. 思路 一是实现一下, 在向数据库保存key-value时, 不要检测key是否已存在(在之前的短链系统中, 是检测了的) 二是增加读取指定key-value的小功能. 点击了 Load 按钮之后, 从数据库中把 value 读出来, 再把数据放到原本的操作界面上.  后续操作就可以按以前系统的操作方式使用就好了. 实践 worker.js 增加一个配置项 overwrite_kv 设置为 true 时, 添加key-value时就不检测key是否存在了. main.js 里面加一个读指定key-value的函数.  index.html 里面添加几个页面元素就不细讲了. ======= 完 Github:  https://github.com/crazypeace/url-Shorten-Worker/ 演示站:  https://journal.crazypeace.workers.dev/journaljournal

无服务器 自建短链服务 Url-Shorten-Worker 优化已保存数据的列表的显示 (2 END)

图片
上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

无服务器 自建短链服务 Url-Shorten-Worker 优化已保存数据的列表的显示 (1)

图片
在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

无服务器 自建短链服务 Url-Shorten-Worker 变身图床 Image Hosting 优化使用界面

图片
需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上. 思路 建一个 card (Bootstrap里的class). 把 左边页面中的功能 "借鉴"过来. 再建一个 "Next" 按钮, 用于把新card里面的数据同步到原有的元素中. 实践 代码的细节就不讲了. 都是一些细细碎碎. 唯一有点的可说的价值的就是, 被借鉴的网页是使用 Bulma 的CSS框架 的. 我考虑了一下, 我的项目里还是继续使用 Bootstrap. 为了更好的 input file组件, 我转为使用 Bootstrap V5 (之前使用的是v4). 然后显示操作结果的弹窗就有一些异常了. 请教了一下GPT, 再结合  Bootstrap的官方文档 , 里面有一些属性的名字有变化. 新建了一个“主题”,theme/imghost ======== 完 Github: https://github.com/crazypeace/url-Shorten-Worker/ 演示站: https://imghost.crazypeace.workers.dev/imghostimghost

无服务器 自建短链服务 Url-Shorten-Worker 变身图床 Image Hosting 基于base64编码

图片
需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据. 思路 我设计在KV中保存图片的base64数据. 因为这样可以在KV的后台中直接管理; 人眼阅读后台数据时, 不会有奇怪的字符; 在复制粘贴, 不同的系统之间复制转移, 会比较方便. 坏处是, 数据量会变大, 变大 33%. 实践 图片转base64先利用其它网站实现, 如  https://oktools.net/image2base64 这样一个gif图片 得到下面这一大段base64数据. 我们在pastebin的基础上, 使用这些base64数据当作value, 设置233.gif当作key. 保存之后, 我们可以通过233.gif再获取这些base64数据, 像这样: 求助 GPT, 得到下面这段代码来把 base64 数据转化为一个图片返回给http请求. 把这段代码的函数添加到worker.js function base64ToBlob(base64String) {   var parts = base64String.split(';base64,');   var contentType = parts[0].split(':')[1];   var raw = atob(parts[1]);   var rawLength = raw.length;   var uInt8Array = new Uint8Array(rawLength);   for (var i = 0; i < rawLength; ++i) {     uInt8Array[i] = raw.charCodeAt(i);   }   return new Blob([uInt8Array], { type: contentType }); } 然后在返回http请求之前, 多处理这么一步, 就行了. 效果如下: ======== 完 把代码整理漂亮一点, 再上传. 用一个配置项设置系统的类型. Github:  https://github.com/crazypeace/url-Shorten-Worker/ 演示站:  https://im

The Hot3 in Last 30 Days