开源实例系列

前言 作为一名技术，自然对开源世界心向往之。常有朋友问我如何搭建博客，WordPress 怎么样。我想最好就是生成一个实例，让他们亲身体验前后台的使用，客观了解是否适合自己。推而广之，我希望将各种知名的开源项目部署在相同服务器上展示。一方面可以宣传开源，另一方面让大家在同等条件下直观地对比各种系统。 本篇为开源实例系列文章的导航页。 个人实例 动态博客 WordPress 开源实例之WordPress Typecho 开源实例之Typecho emlog 开源实例之emlog Z-Blog 开源实例之Z-Blog Halo 开源实例之Halo Drupal 开源实例之Drupal JPress 开源实例之JPress Tale 开源实例之Tale Ghost 开源实例之Ghost Mblog 开源实例之Mblog Serendipity 开源实例之Serendipity FlatPress...

2022-11-18

CleanCSS - 移除未使用的 CSS 代码

应用：CleanCSS 地址：https://dujun.eu.org/cleancss 功能：分析页面中引用的 CSS 文件，打包成单一的干净文件用于替换所有引用 适用：独立页面 一、缘起 我导航站用了开源项目WebStackPage，首次静态资源加载有 1.5M，一部分原因是它使用了第三方库，比如 Bootstrap。当然，第三方库只有少量代码实际被用到，所以我就想找个办法，把未使用的 CSS 代码移除，使得静态文件更小。 二、方案 很快就找到了这个网站https://unused-css.com/。它可以很好地实现我的需求，不过有一个小问题，它是收费的，最低 25 美元一个月。 Only paying users can download clean CSS files. 那怎么办呢？那就自己开发一个工具吧。 三、分析 清理 CSS 代码需要这么几步： 抓取页面 HTML 内容 找到...

2022-10-31

应对 DDoS 攻击的防御策略

1. 背景 本站部署在腾讯云，并使用了云盾CDN。本月到现在被 DDoS 攻击两次，造成总停服时长 12 个小时。 10 月 5 号，详见：《被 DDoS 攻击导致封停了六小时》 10 月 20 号，详见：《这个月第二次被 D 了》 2. 攻击分析 攻击者应该是很熟悉腾讯云的，使用 UDP Flood 攻击，每次只攻击两分钟，攻击带宽峰值远高于腾讯云的基础防护 2Gbps。 攻击开始后立即引起腾讯云的 ip 封堵，腾讯云的理由是： 通常发生大流量攻击时，运营商考虑网络稳定性因素会进行封堵，从而避免攻击影响到其他未被攻击的用户，保障整个云平台网络的稳定。 两分钟的攻击就可以造成 6 个小时的封堵。找腾讯云客服咨询，购买高防产品才可以自助解封，否则只能等待到期后自动解封。 3. 官方策略 咨询腾讯云客服，给出了两套策略。 3.1 购买高防产品 客服给出的第一个建议就是购买高防产品。但作为个人网...

2022-10-21

JavaScript 强混淆

我的网站是纯内存缓存读 + js 渲染 spa，现在的瓶颈就是硬件配置低、带宽小，程序架构上可以说追求到极致了。其中，js 渲染是全站性能优化的关键一坏，服务器只负责吐出原始数据，而把路由解析、数据处理、布局渲染的计算压力都转嫁给了浏览器。 如此重要的前端部分我当然花了很大的心思。js 是明文的，只能做混淆。但是如果混淆得足够好，逆向成本过高，也是可以达到很好的代码保护。网上有很多 js 代码混淆的方法可以参考，但有些会让文件大小增加好几倍。这里我分享一下自己 js 强混淆的思路。 我实现 js 强混淆的关键一点就是字面量表达式。 原生写法： str.trim(); 字面量表达式： str['trim'](); 有了这个基础，混淆要做的就是进一步隐藏字符串了。我用了 ASCII 转码和 base64，使得字符基础变量简化为 64 个 base64 编码字符，以及特殊的空格和换行符。 以“我...

2022-10-19

互访功能页 (+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

分页： 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