博文

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

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

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

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

无服务器 自建短链服务 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 去查询全部的时候,
发表评论
Read more »

无服务器 自建短链服务 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
发表评论
Read more »

无服务器 自建短链服务 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))
1 条评论
Read more »

无服务器 自建短链服务 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
发表评论
Read more »

无服务器 自建短链服务 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
发表评论
Read more »

The Hot3 in Last 30 Days

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程

图片
源码 GitHub  https://github.com/crazypeace/Url-Shorten-Worker 演示站  https://urlsrv.crazypeace.workers.dev/bodongshouqulveweifengci 申请Cloudflare账号，略。 创建一个KV 记得这个KV的名字，以  urlsrv  为例 查看此KV 添加一个条目Entry 密钥key为 password ，值value为一个随机字符串. * password 这个key是在脚本中要引用的，所以要设置这个。 随机字符串可以使用http://git.io/xkcdpw生成 随机字符串以  yejiandianci  为例 创建Worker服务 设置绑定KV 变量名称必须设置为 LINKS ， KV的名字选刚刚创建的 urlsrv * LINKS 是在脚本中要引用的，所以要设置这个。换句话说，如果你使用别的脚本，可能这个变量名称就不是LINKS了。 编辑Worker的脚本 把原有的内容全部删掉 换成： https://github.com/crazypeace/Url-Shorten-Worker/blob/main/worker.js 的内容 保存并部署 ====== 完 要访问 你的worker域名/ yejiandianci  来打开使用页面 如：https://snowy-disk-fd82.ciys.workers.dev/yejiandianci ====== 后记 你可以通过 在你自己的域名下worker页面添加一个路由指向worker 的方式来实现比如  https://1way.eu.org/mtSzm6  替代 snowy-disk-fd82.ciys.workers.dev/yejiandianci 的效果。 ====== 配置参数的作用 const config = {   result_page: false, // After get the value from KV, if use a page to show the result.   theme: "", // Homepage theme, use the empty value for default theme. To use urlcool
Read more »

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io

图片
  你以为的操作流程 操作 Cloudns 注册 www.cloudns.net 略 登录之后， 前缀随便取一个顺眼的. 后缀 不要选 .cloudns.cl (我试过, 添加不了 Cloudflare) .cloudns.asia 可以. * 欢迎大家在评论中分享哪些后缀可以使用. 操作 Cloudflare 注册 www.cloudflare.com 略 Add site 把你在 Cloudns 申请的域名写进去. 注意是域名全名, 别只写前缀. 应该是类似下面这样: xxx.cloudns.yyy 滚到最下面, 选 免费的 plan 一路 下一步, 注意这两个 nameserver 切换到 Cloudns  把原有的 NS 设置都删除 添加 NS 类型的 DNS 记录  * 注意, Cloudflare 告诉你的那 2 个 nameserver 都要添加 添加完应该是像这样子的 切换到 Cloudflare 下一步让 Cloudflare 检查你刚刚设置的 nameserver, 然后耐心等一下. 检查通过后, Cloudflare 会给你发通知邮件的. 然后, 你可以按你以前学习的方式添加DNS解析. 比如, 像下面这样 但, 这时候你会发现不对劲.  不管等多久, DNS解析都不生效. 接下来就要搞一些骚操作.
Read more »