杜郎俊赏 - dujun.io

本站启用 Brotli 压缩

作为老一辈 BUG 开发艺术家,我难免有很多经验主义。比如祖传 nginx 配置使用 Gzip 压缩,我从未怀疑过其正确性,直到使用 EdgeOne 后知道了 Brotil 压缩: 节点对资源进行 Gzip 或 Brotli 压缩,减小传输文件大小,提升请求资源的加载速度。若同时开启了 Gzip 和 Brotli 压缩,优先响应 Brotil 压缩。 EdgeOne 优先响应 Brotil 引起了我的重视。搜索后了解到以下关键信息: Brotli 是 Google 在 2015 年 9 月推出的一种压缩算法,相比其他压缩算法具有更高的压缩效率。Brotli 使用变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方法进行数据压缩。Brotli 压缩算法具有多个特点,包括: * 针对常见的 Web 资源内容,Brotli 的性能比 Gzip 提高了 17-25%; * 当 Brot...

2025-06-22

本站已接入 EdgeOne

my-blog-has-been-integrated-with-the-edgeone-free-plan封面
遭受持续攻击 本站从月初开始流量异常升高,到了9号演变为明显的攻击,持续至今。前期只是造成拥堵,我没当回事,心想攻击者过一两天就会失去兴趣。没想到攻击愈演愈烈,高峰时导致网站彻底瘫痪。我不得不正式应对,第一个想法就是接入 Cloudflare。 接入 Cloudflare 个人博主当然用不起高防,幸亏有赛博菩萨 Cloudflare 给了我兜底的安全感。Cloudflare 是世界上最优秀最易用的加速和防护平台,只需极少的配置,几分钟就能接入它的 DNS + CDN。一键开启“Under Attack 模式”,世界瞬间清净了。 解决了燃眉之急,接下来就仔细研究优化。Cloudflare 非常完美,唯一的瑕疵是在国内降速,所以能应急,但不适合常规使用。正在这个时候,我关注到了 EdgeOne 的内测活动。 接入 EdgeOne 边缘安全加速平台 EO (TencentCloud EdgeOn...

2025-06-21

新增画廊模式

the-gallery-mode-has-been-released封面
我的博客系统一直有个缺撼是没有画廊模式,所以我不写有大量图片的文章——横竖图宽度不一,并且页面过长,极不美观。我没有想到好的开发方案,搁置至今。但是为了写《2025 CMS 杭州车展小记》,我重新拾起这个历史包袱攻克之。 开发画廊的困难不在前端,而在后端如何组织数据。我研究过 WordPress 块编辑器的图库,以及插件实现的画廊。一来操作步骤繁琐,二来存入数据库的是 html 代码,都不如意。我的设计理念是人只需最简洁的操作,剩下全由程序完成。我只想基于 Markdown 本身实现,不想引入新的复杂操作。 我注意到 Markdown 解析图片有以下情况: 同一行排列,两个 由相应数量的空格分隔: ![][1]![][2] [1]: img1.jpg [2]: img2.jpg 换行排列,两个 由 分隔: ![][1] ![][2] [1]: img1.jpg [2]...

2025-06-09

新增评论置顶功能

the-comment-pinning-feature-has-been-released封面
我对评论模块进行了优化,增加了置顶功能。具体逻辑是将文章页评论列表的排序改为三段序列:主评论被置顶的提升到最上方,主评论下有子评论被置顶的整体提升到次上方,其他的保持不变。 在合法合规的前提下,每个人有平等的话语权,所以评论没有优劣之分——不论文笔,不论意义,应当自然排序。不过写《老婆给我转发了一个腹肌》这篇文章,我预感到老婆会评论,那就产生了一个需求——文章涉及的当事人发声,一般有必要置顶。另外需要置顶的场景包括评论者对文章进行了勘误,或者提出了很有价值的补充解释。故此我开发了评论置顶功能。

2025-06-04

博客系统软著到手

i-have-obtained-the-software-copyright-of-my-blog-system封面
前言 我最早在尚寂新2022年9月的文章看到可以用博客主题申请软著(计算机软件著作权),感到新奇。但看到后面需要打印大量资料并邮寄,便放弃了。后来到了今年1月在ImQi1的文章看到现在申请软著只要在线上传文件,不用打印邮寄,便重新燃起了兴趣。 今天终于拿到了博客系统的软著,分享一下亲身经历。从开始行动到拿证总计 58 天——当然实际没投入多少精力,主要是等待的时间长。 准备工作 申请软著的官网是:https://www.ccopyright.com.cn。 注册账号(1月19日) 打开官网,点击右上角【注册】,身份选择【个人】,验证【手机号】之后就完成了注册。 实名认证(1月19日 - 1月20日) 登录后台进入【账号管理】,点击【实名认证】,填写真实信息,上传身份证正反面及手持身份证的照片。提交后被告知“将在1-3个工作日内审核”。在完成实名认证前无法进入软件登记页。 1月19号晚上首次...

2025-03-17

音频展示增加音乐类型

因服务器带宽小,我只上传低品质、小容量的媒体文件。视频命名为“短片”,音频则命名为“语音”,顾名思义主要来自日常生活手机记录。需要给文章配乐时我会嵌入平台音乐代码,所以对本地音频文件的展示只有语音形态。但是刚发生的一件事让我决定增加音乐形态的展示。 事情经过是我写的哪吒2文章开头引入了片尾曲,发布的时候是正常的,但前天发现了一个“bug”——音乐无法完整播放,进度到一分钟就会跳回开头。起初我以为是自己的程序出问题,调试了一番不明所以。然后突然意识到,这个表现很像是试听的逻辑。到平台一看,果然是因为这首歌从普通转为vip了。我很无奈,第三方的东西终究靠不住。当下决定将音频处理拆分为语音和音乐两种类型。音乐展示的功能未来可以不用,但不能没有。 需要改动的地方是增加音乐图标和音乐播放器。 类型区分 我坚持一个原则,增加功能不增加系统复杂度,所以用现有参数区分语音和音乐:有发言人或语音转文字等附加...

2025-03-06

新增熟人可见功能

我一直没有做评论可见功能。因为博客是我兴趣使然的自留地,没有运营诉求。我很珍视朋友们的评论互动,但是评论数字本身我不在乎。评论可见可能带来无意义的内容,这是我最排斥的原因。 然而看到obaby发评论可见的口令红包,我意识到确实存在只对特定人群开放内容的场景。比如发红包,比如一直让我头疼的如何解决生活照的安全隐患。所以我决定开发这个功能。基于前文提到的理念,我没有做传统的评论可见,而是熟人可见——虽然底层逻辑依然是基于评论的。 实现逻辑很简单。在当前终端设备发表过评论,并被审核通过的,就标记为可信评论者——本文简称为熟人。相对的,爬虫机器人、不评论和发恶意/无意义评论的都是被限制的陌生人。在文章中用特定闭合标签包裹仅熟人可见的内容。熟人和陌生人,对熟人可见内容都是无感的。这句话的意思是熟人不知道哪些内容是被隐藏的,而陌生人压根不知道存在隐藏的内容。这个设计的核心价值观就是不诱导评论。 要做到...

2025-02-02

新增语音转文字效果

我做了一个栏目叫做“有话直说”,用于表达负面或激烈的情绪。以语音的形式来直观生动地呈现,同时在 RSS 结果中排除,避免被搜索引擎爬取。我感觉不错,但是obaby说要加语音转文字。怎么办呢?自己的榜一自己宠,连夜做了功能。 分享一下设计思路。前端比较简单,就是点击后向下展开一个气泡框。前端唯一的思考就是怎么做点击交互,首先当然是参考微信,但是存在两个问题。一是长按语音条呼出操作界面,在手机端比较自然——得益于微信等软件的用户习惯培养——但是在电脑端这就很怪。二是微信长按呼出的是一组功能键,而我只有一个功能。长按呼出界面,再点击里面唯一的按钮,这就是典型的脱裤子放屁。最终我的方案是在语音条上显式地放置一个图标 作为按钮。 再来说后端。我只是要做语音转文字的【效果】,并不需要真实的即时转换,实现起来就是将整理好的文字录入后台。那么最大的难点是怎样保存这个文本。最简单的就是用一组闭合标签包裹...

2025-01-25

新增亲子日记封面保护

new-protective-cover-for-the-baby-diary封面
新增亲子日记封面保护机制:可信设备展示缩略图,陌生设备展示模糊图。可信设备(Cookie标记)包含博主(我本人)、知道日记口令的(我家人)、当前设备发表过评论并被审核通过的。图片表现如下: 老婆跟我抱怨过很多次,首页展示宝宝照片封面有隐私风险,这次解决了这个问题。最初就想到用图片模糊来处理,但碍于影响浏览体验没有下决心。现在想通了,除了我和家人,并没有人会在乎宝宝每天的成长照片。 因为前面已经做了权限验证,所以加一道拦截非常容易。实际开发这个功能的时间花在纠结用哪种模糊效果上,我筛选后的方案分别是Low Poly、毛玻璃和油画。 Low Poly 是我最感兴趣的方案,用了最长的时间来研究和测试。但经过反复验证,应用在小尺寸的封面图上效果很糟糕,将单元调大就毫无细节,调小就有锯齿感,无奈放弃。而毛玻璃效果有令人不适的粗糙感,也淘汰了。最后我选定的方案是油画效果,画面足够模糊,同时细节又足够丰...

2024-11-18

双击全选代码文本

我代码高亮是几年前参考Prism改写的,留有一个遗憾是缺失复制代码文本的功能,因为我一直没有找到理想的交互方式。常见的办法是在右上角放一个常驻或悬停可见的复制按钮,点击后自动将全文复制到剪贴板。我不认可这个设计,一是按钮造成一小块遮挡,二是移动鼠标去找一个按钮进行复制不是很自然的交互,特别是文本较长需要往上回滚的情况下。 我平时习惯双击选中一段文本,按照这个方式增加了双击全选代码文本的功能——仅全选而不自动加入剪贴板,防止误触。 $pre.on('dblclick', () => { let range = document.createRange(), selection = window.getSelection(); range.selectNodeContents($pre[0]); selection.removeAllRanges()...

2024-09-26

分页: 1 2