白嫖worker 自建短链服务 Url-Shorten-Worker 美化 Bootstrap 设计框架 照猫画虎

查看相关主题:

准备美化一下 https://github.com/crazypeace/Url-Shorten-Worker/

看了一下源项目，使用的是 Bootstrap 4


参考：

https://getbootstrap.com/docs/4.0/components/input-group/

我们准备抄这个设计格式


找到对应的示例是:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

 最终效果：




评论

发表评论

The Hot3 in Last 7 Days

KV-woker 纯练手项目 保护 _ 开头的 Key VS code 重构 JS 代码 提取代码为函数

图片
KV-woker 项目准备实现的功能列表见此: https://zelikk.blogspot.com/2024/12/kv-woker-1.html 今天实现: 保护 _ 开头的 KV对. 因为我们的目标是把配置项都放到 KV 中保存. 按目前的设计, 需要把理更多的配置项的 KV 放到 protect_keylist 中. 如果未来系统有配置项的扩充, 那么就要记得在 protect_keylist 中添加, 这是不优雅的.  我们可以约定, 配置项在 KV 中都以 _ 开头保存. 这一点和自动生成短链的方法也不冲突, 自动生成短链的字符中不含有 _ 符号. 本项目目前保护两个KV, _admin_pwd_ 和 _user_pwd_ , 不允许用户 修改, 删除, 查询. 目前的实现, 是设置了一个数组 protect_keylist 在业务逻辑中, 使用判断数组中是否有元素的方式 List.includes(key) , 来判断是否是属于需要保护的key. if (protect_keylist.includes(req_key)) 这一功能的效果就是: https://newkvdb.crazypeace.workers.dev/_user_pwd_ 显示404 https://newkvdb.crazypeace.workers.dev/_admin_pwd_  显示404 而且在  https://newkvdb.crazypeace.workers.dev/kvdbkvdb LoadKV, 是查询不到 _admin_pwd_ 和 _user_pwd_ 的 value 的 第 1 步 先将 if (protect_keylist.includes(req_key)) 这个判断重构为一个函数 鼠标拖选 "protect_keylist.includes(req_key)" , 右键, "Refactor...", "Extract to function in global scope",  输入新函数的名字, "checkProtectKey" 回车Enter确认 你会发现, 之前选中的文字被替换为了一个函数调用 而文件的末尾, 新增了一个函数, 函数内容就是你之前选中的语句...
Read more »

白嫖worker 自建短链服务 Url-Shorten-Worker 变身文件保管站 File Storage 保存到 R2对象存储 搭建手册

图片
Github https://github.com/crazypeace/Url-Shorten-Worker 变身文件保管站 File Storage 保存到 R2对象存储  先上演示视频 申请Cloudflare账号，略。 * 以下操作过程中, 标颜色的信息 , 你最好另外单独记好. 这样操作流程比较顺畅. 创建R2 记住这个R2的名字，以 r2test 为例 设置公开链接 记住这个R2公开链接,  https://pub-*****.r2.dev 设置 CORS 策略 [   {     "AllowedOrigins": [       "*"     ],     "AllowedMethods": [       "PUT",       "GET",       "HEAD",       "DELETE"     ],     "AllowedHeaders": [       "*"     ]   } ] * 注, 说实话这里有一点点粗暴, 但是问题不大.  创建R2 API 回到R2 overview页面, 记住这个 Account ID 点击 Manage 按钮 点击 "Create User API token" 按钮 选择 "Object Read & Write" - "Specify bucket(s)" - 选择你刚刚创建的 R2   r2test   记住生成的  Access Key ID ,    Secret Access Key 创建KV 记住这个KV的名字，以 kvtest  为例 创建Worker服务 设置绑定KV 变量名称必须设置为 LINKS ， KV的名字选刚刚创建的  kvtest * LINKS 是在脚本中要引用的，所以要设置这个。 编辑Worker的脚本内容 把原有的...
Read more »

白嫖worker 自建短链服务 Url-Shorten-Worker 变身文件保管站 File Storage 保存到 R2对象存储

图片
前言 之前 我们实现了 Url-Shorten-Worker 变身图床 Image Hosting 把图片转为Base64保存到KV 其实不只保存图片, 也是可以保存各种文件的. pdf啊, zip啊, 等等 都可以的. 那么就会遇到KV保存容量限制的问题. 思路 如果我们把文件保存到 R2 对象存储呢? 面向Agent开发 Hermes 对接 mimo-v2.5-pro Hermes 对接 claude-opus-4.8 下面的引用框里面都是我发给Agent的自然语言 把 https://github.com/crazypeace/Url-Shorten-Worker 项目 clone 到本地, 把整个项目学习分析一遍 我要做这样一个新开发, 你与我讨论方案, 不要实施. 开发一个新的系统模式 保存到R2对象存储的文件保管站 file-r2 把图片保存在R2数据库, 把 R2数据库 的链接作为 value, 保存在 KV 用户操作的前端页面保持与 imghost 项目一样 很多细节上的设计, 打磨, 测试, 反复 略. Github https://github.com/crazypeace/Url-Shorten-Worker 简要使用说明 如果你已经参考 以前的教程 搭建了以前的项目. 那么你需要: 更新 worker.js 注意设置  theme: "theme/file-r2-lite", system_type: "file-r2", 再设置5个变量 R2_ACCOUNT_ID        - R2 账户 ID  R2_ACCESS_KEY_ID     - S3 API Access Key ID  R2_SECRET_ACCESS_KEY - S3 API Secret Access Key  R2_BUCKET_NAME       - R2 存储桶名称  R2_PUBLIC_URL        - R2 公开访问 URL, 如 https://pub-xxxx.r2.dev  其实这5个变量, 我比较推荐你与一个有识图功能的AI...
Read more »