互访功能页 (+ip)

留意到有些博友有互访的需求，还有不少人用某统计网站有每日来访 ip 要求。因此做了个小功能页，记录网址，并一键多开，方便博友们互助访问，ip++。 页面地址 https://dujun.eu.org/visit/ 使用说明 点击左下按钮 [申报网站] 填写自己的网站地址 点击中间按钮 [开始互访] 打开所有记录的网站 安全设置 以 Chrome 为例，一次弹出多窗口会被拦截，需要做如下设置： 点击地址栏网址左边图标，打开 [网站设置] 在 [隐私设置和安全性] 中，右边栏找到 [弹出式窗口和重定向]，设置为允许 视频演示 其他说明 部署这个功能页的服务器和域名都是白嫖的（AWS free + EU.org），如果访问慢请稍后再试，如果无法访问请留言或写信给i@dujun.io 就是一个互访 +ip 的小工具，人人为我，我为人人。有兴趣就写下网址，我自己每天会去点，至少保证各位博友每天 ip...

2022-10-12

友情链接模块发布

新增友情链接页面，入口在电脑端的侧边栏或手机端的搜索页的“友链”。 1. 前言 建站七年了，一直没有做友情链接的模块。诚然，博客这种古典互联网产品，友链是最典型的应用，缺失有点遗憾。期间也反复想过要做，但是有两方面问题没有找到满意的方案。 1.1 没有满意的友链样式 网上常见的友链有这些样式： 网站名称文字链接 头像加网址、网站描述 网站链接加最新 feed 头像、网站描述都是静态的，我觉得无趣。于是我尝试过抓取 feed，然后就有两个问题： rss 地址发现，需要匹配各种未知规则，除非手动填写地址； 有些网站没有 rss，如果直接爬取页面，匹配内容又很麻烦。 所有长期以来，友情链接的表现样式就把我卡住了。 1.2 没有满意的友链规则 相比样式，友链的规则逻辑是让我更想不好的。典型的交换友链方式是，博友之间直接联系，互相提供文字、链接、头像、截图等。我很不喜欢这样的流程，因为有恼人的几个因...

2022-10-06

鼠标气泡

宝宝日记的页面中规中矩，一直想加点活泼的元素，苦于没有找到理想的参考样式。 前天，在博友Design小院那里看到了鼠标气泡的效果，感觉很喜欢。寻迹找到了控件原作者的网站90's Cursor Effects。动效如下： 在源代码基础上主要做了两处修改： 增加气泡随机透明度，更显真实； 原配色在暗黑模式下过于显眼，改为牡丹粉红 #eea2a4。 完成的动效如下： 已实装于宝宝日记时间轴、宝宝日记详情页。

2022-08-24

波浪下划线

本站对文字的重点标记，经过了几次改版。 一、着重号 最初使用着重号。它的问题是会造成段落间距变大，同时大圆点标记过于醒目，抢夺阅读视线。 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

mac系统浏览器，隐藏文本光标（除输入框外）。css 如下： * { caret-color: transparent; } input:focus-within, textarea:focus-within { caret-color: auto; } 应用前效果（录自友站 Vian）： 应用后效果：

2022-06-28

看到博友 gd1214b 的文章《Web Feed 倡议书》，增加了 RSS 自动发现功能。 在 里增加： 效果如下：

2022-05-12

仿微信语音播放 svg

决定优化语音播放的动效，网上找了一圈没有满意的，最后自己用微信程序包中的 svg 来改。 svg 如下： 效果如下：

2022-04-08

iPhone 7屏幕更换

主力机是 iPhone 12，平时玩游戏用的是备用机 iPhone 7。这台 7 已经用了好几年，换过两次电池，一次屏幕。几天前屏幕又摔破了，漏液晶，花屏、触摸失灵。 纠结了一下，为了主力机的寿命，还是要有备用机。查了 iPhone 7/8 的二手价格后，果断在 pdd 买了个屏幕总成。 开始拆机。上次把前置摄像头排线弄断了。 干脆把前置摄像头和听筒都去掉了，游戏里用不到。 复活，再用五百年。

2022-03-04

圆形头像和方形头像

本站的评论列表头像展示样式，从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分： 圆形头像 聚焦主要面部特征，吸引注意力，有动感有活力。 适用于生人网络、泛娱乐，如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息，沉稳大气。 适用于熟人网络、严肃社交，如微信、支付宝。 作为独立博客，本应算是生人网络，但还是决定用方形头像。因为博友的回访，对评论内容的认真，都是互联网最初美好的样子。

2022-02-28

avatar 和 favicon

在博友𝑭𝒐𝒏𝒈.的网站注意到一个设计，在文章内容中的链接前加了小图标，受此启发，我完善一下相关样式。目前实现的完整路径是： avatar（带邮箱地址的评论） 抓取 Gravatar 头像（官网被墙，使用国内源 cravatar.cn、sdn.geekzu.org） 如果是 QQ 邮箱，尝试抓取 QQ 头像（博友 cfanlost 建议） 对于有网址的尝试抓取 favicon favicon 抓取根目录的 favicon.ico 文件 解析 html，抓取 apple-touch-icon、shortcut icon 链接前缀图标 博友网址显示 avatar 其他网址显示 favicon 无图标的显示默认图标

2022-02-28

分页： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71