新增画廊模式 我的博客系统一直有个缺撼是没有画廊模式，所以我不写有大量图片的文章——横竖图宽度不一，并且页面过长，极不美观。我没有想到好的开发方案，搁置至今。但是为了写《2025 CMS 杭州车展小记》，我重新拾起这个历史包袱攻克之。 开发画廊的困难不在前端，而在后端如何组织数据。我研究过 WordPress 块编辑器的图库，以及插件实现的画廊。一来操作步骤繁琐，二来存入数据库的是 html 代码，都不如意。我的设计理念是人只需最简洁的操作，剩下全由程序完成。我只想基于 Markdown 本身实现，不想引入新的复杂操作。 我注意到 Markdown 解析图片有以下情况： 同一行排列，两个 由相应数量的空格分隔： ![][1]![][2] [1]: img1.jpg [2]: img2.jpg 换行排列，两个 由 分隔： ![][1] ![][2] [1]: img1.jpg [2]... 2025-06-09
新增评论置顶功能 我对评论模块进行了优化，增加了置顶功能。具体逻辑是将文章页评论列表的排序改为三段序列：主评论被置顶的提升到最上方，主评论下有子评论被置顶的整体提升到次上方，其他的保持不变。 在合法合规的前提下，每个人有平等的话语权，所以评论没有优劣之分——不论文笔，不论意义，应当自然排序。不过写《老婆给我转发了一个腹肌》这篇文章，我预感到老婆会评论，那就产生了一个需求——文章涉及的当事人发声，一般有必要置顶。另外需要置顶的场景包括评论者对文章进行了勘误，或者提出了很有价值的补充解释。故此我开发了评论置顶功能。 2025-06-04
博客系统软著到手 前言 我最早在尚寂新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
新增亲子日记封面保护 新增亲子日记封面保护机制：可信设备展示缩略图，陌生设备展示模糊图。可信设备（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
“杜郎俊赏”的由来 Google 搜索“杜郎俊赏”，我的网站排在第一页了。虽然没什么用，但是觉得很牛逼。因为在字面上“杜郎俊赏”不是我自己生造的词，而是出自南宋词人姜夔《扬州慢·淮左名都》： 杜郎俊赏，算而今、重到须惊。 词中“杜郎”指的是唐代诗人杜牧，他曾在扬州为官，留下了许多赞美扬州的诗篇；“俊赏”则是赞其风流倜傥，有卓越的鉴赏水平。此处大意是：杜牧这位俊逸清赏的游冶大家，对昔日繁华的扬州不吝赞赏，但若是如今故地重游，面对战后的荒凉景象，也会感到震惊和悲哀。原词通过对比扬州的昔盛今衰，抒发了对历史变迁的哀思。 不过我的站名“杜郎俊赏”只是借用了字面，意思全然不同。说起由来很简单，域名备案要求写站名，不得包含“博客”、“空间”等字样，且建议不使用常见词。我搜索一番，第一眼看到“杜郎俊赏”就非常喜欢。我的名字“杜俊”就在字面里，跟域名"dujun"达成了统一。“杜郎”指代我自己；“俊赏”表达的是“俊”字系列组... 2024-09-16
更换天气信源 宝宝日记后台编辑器根据定位自动获取当日天气信息。这项功能开发于 2017 年，当时选定的方案是采集中国天气网页面，通过正则表达式提取相关数据。但现在偶然发现其天气信息与墨迹天气 APP 有差别，我到中国气象局官网验证，与墨迹天气是一致的，也就是说中国天气网数据是错误的。不准确的信源毫无意义，马上决定更换。 经过对比，最终选定和风天气作为新的天气信源，免费版接口支持每天1000次请求。 注册 在官网注册账号（需要邮箱和手机号），创建一个免费订阅，记录 KEY 值。 调用 详见文档：https://dev.qweather.com/docs/api/weather/weather-daily-forecast/ 接口调用 PHP 代码参考： declare(strict_types = 1); /** * 天气 (和风天气) */ class Vendor_Weather { //... 2024-09-11
