新增熟人可见功能 我一直没有做评论可见功能。因为博客是我兴趣使然的自留地，没有运营诉求。我很珍视朋友们的评论互动，但是评论数字本身我不在乎。评论可见可能带来无意义的内容，这是我最排斥的原因。 然而看到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
删除开源实例系列题图 我删除了所有开源实例系列文章的题图。 事情的起因是obaby的图片被举报了，让我感受到人间险恶。对我来说，别人分享美女图片是菩萨行为，想不通有人会去攻击。这让我如鲠在喉，当时决定排查所有文章，替换敏感的图片。所谓过期蜜糖就是毒药，题图在文章刚发布的时候有点趣味，然后就只剩下把柄了——你也不知道哪天会被网络孤儿盯上。 我用在线鉴黄工具审查所有图片，花了四天时间只处理了极小的一部分，剩余的工作量令人发麻。更加绝望的是，我要追求的“高质量的性感”和过审之间存在难以平衡的矛盾，很多情况下，为了过审不得不将我喜欢的“美”的图片替换成了平平无奇的图，这已经背离我的初衷，丧失了乐趣。 开源实例配题图这个创作计划缘于obaby的网站风格和采集器，坚持了一年时间，生产了 419（咦？）张图片。图片的制作（万里挑一、去水印、高清重制）花费了巨大的精力，一夜之间将它们全部删除，不说可惜是不可能的。但这个系列就是... 2023-11-15
关于近期开源实例服务不稳定的说明 概述 因网络故障和服务器迁移，开源实例近期无法提供稳定服务。如需体验相关项目，可参考镜像开源代码，自行用 Docker 部署到本地。 详情 网络故障 本系列开源实例部署在工控小主机，机器放在公司，使用有线网络正常运行 10 个月，但是从上周开始突然无故断网。公司网络由园区统一提供，每个工位都有网口，尝试使用其他工位的网口，仍然发生断网的问题。 目前不知道是否短期的网络故障。如果公司网络不再稳定，将考虑拿回家里运行。 服务器迁移 主机内网穿透使用 AWS 免费服务器做转发。本月服务器到期，需要迁移，期间服务将会中断。 影响范围 上述问题影响所有开源实例、dujun.eu.org 及其所有子域的服务。 本文置顶，待问题解决后取消置顶，不再另行说明。 2023-09-09
友情链接模块发布 新增友情链接页面，入口在电脑端的侧边栏或手机端的搜索页的“友链”。 1. 前言 建站七年了，一直没有做友情链接的模块。诚然，博客这种古典互联网产品，友链是最典型的应用，缺失有点遗憾。期间也反复想过要做，但是有两方面问题没有找到满意的方案。 1.1 没有满意的友链样式 网上常见的友链有这些样式： 网站名称文字链接 头像加网址、网站描述 网站链接加最新 feed 头像、网站描述都是静态的，我觉得无趣。于是我尝试过抓取 feed，然后就有两个问题： rss 地址发现，需要匹配各种未知规则，除非手动填写地址； 有些网站没有 rss，如果直接爬取页面，匹配内容又很麻烦。 所有长期以来，友情链接的表现样式就把我卡住了。 1.2 没有满意的友链规则 相比样式，友链的规则逻辑是让我更想不好的。典型的交换友链方式是，博友之间直接联系，互相提供文字、链接、头像、截图等。我很不喜欢这样的流程，因为有恼人的几个因... 2022-10-06
波浪下划线 本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 text-emphasis: filled circle; text-emphasis-position: under; 效果如：对照文字、着重号标记的文字 二、虚线下划线 着重号用了没多久，就改成虚线下划线了。 border-bottom: 2px dotted; 效果如：对照文字、虚线下划线标记的文字 三、波浪下划线 虚线下划线没什么问题，但是今天突然觉得平庸了，决定改成波浪线。 代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下： padding: 5px 0.2em; background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, cu... 2022-08-02
