这个话题下有 52 篇手记。
博客在六天里从一套样式变成了六套主题。第一版只叠了一张 1528 行的覆盖样式表，颜色换了、骨架没变，第二天推倒重来：每套主题一套独立模板，评论、表情、AI 助手等组件抽成共享片段，脚本一行不改。本文记录这套结构的划分与回退机制、Thymeleaf 片段选择器和 CSS 层叠带来的几个坑、去掉点击后的焦点框时要对付的 120 条规则，明暗切换的圆形扩散为什么在流萤上看不出来、又为什么一顿一顿，用无头 Chrome 做流畅度测试找到的几处主线程空转，以及不部署就在线上页面验证本地样式的方法。
一台 2 核 1.7 GB、出口约 4 Mbps 的服务器上跑着六个 Spring Boot 应用。本文记录一次先测量、后动手的全面体检：证书自动续期与每日备份，用 rsync 加可复现构建把发版上传从 50 分钟压到十几秒，把占文章页 85% 的内联脚本逐字节核对后外置，第三方前端库改用固定版本副本，归档页从 260 毫秒降到 40 毫秒，修正软 404 与扫描器噪音，并记录音乐版权误判的真实原因，以及测完内存数据后决定不做的取舍。
起点只是评论区的「博主」标签不见了，往下追却牵出了写放大 1478 倍的 binlog、一页 42 MB 的留言配图、跨五层嵌套的孤儿数据，以及同一个问题在代码里的四种答案。本文按排查顺序记录十四次改动的根因与取舍，包括两次把测量工具的毛病错当成站点故障的判断失误。
长篇文章缺少目录会增加用户查找信息的成本，影响阅读体验。本文介绍了一种轻量级的文章目录实现方案，通过浏览器原生 API 自动提取正文中的 `h2`、`h3` 标题，为章节生成唯一锚点，并动态构建目录导航。同时结合 `IntersectionObserver` 监听标题进入视口的状态，实现滚动阅读时目录自动高亮。针对固定导航栏遮挡问题，文章还介绍了 `scroll-margin-top` 的优化方式。整个方案无需依赖第三方插件，具有实现简单、性能稳定、扩展性强等特点，适用于博客、技术文档、知识库等内容型网站，能够有效提升长文章的浏览效率和用户阅读体验。
抖音续火花助手是一款面向个人用户的开源自动化工具，可部署在自己的服务器上，每天定时向指定好友发送续火花消息。项目提供可视化网页后台，支持好友与消息管理、登录态上传、联系人同步、干跑测试、立即发送、任务停止、结果记录和日志查询。同时具备会话校验、搜索兜底、发送确认、限流识别、超时终止和浏览器回收等保护机制。项目基于FastAPI、Playwright和Vue开发，支持Python及Docker部署，并提供Windows登录态更新工具，适合个人低频自用和自动化技术学习。
本文记录了把四个独立的 Spring Boot 项目（chat、puke、zepp、blog）合并为一个 Maven 多模块工程，只启动一个 total‑app.jar 的实践。原先每个项目占用一个 JVM，导致服务器内存接近 96%；通过在根 pom 统一依赖、在 launcher 中用 SpringApplicationBuilder 依次启动四个 ApplicationContext，并将配置分别放在 chat.yml、puke.yml、zepp.yml、blog.yml 中，消除了 JVM 底座的重复开销，内存降至约 70%。文章重点阐述了类路径冲突、资源目录重名、自动配置串扰和日志全局化等踩坑及对应的统一依赖、资源隔离、spring.autoconfigure.exclude 等解决方案。部署时仅需一次打包并用单条 java 命令启动，端口和 Nginx 配置保持不变，运维更简洁。该方案适合资源受限、访问量不高且对隔离要求不强的场景，虽牺牲了故障隔离，但能显著降低内存压力，为小型服务器提供务实的优化路径。
这不是一个在浏览器里随机发三张牌的演示页面，而是一套完整的多人在线游戏系统。它支持实时对战、房间管理、断线恢复、AI 机器人、积分流水、历史记录和管理后台，并围绕服务端权威、状态一致性、并发控制与隐私隔离进行了系统设计。
博客文章解锁功能原本依赖本地存储 `blog_global_unlocked`，导致用户可通过浏览器 DevTools 修改键值绕过关注公众号的验证码验证，破坏付费与引流策略。为根除此漏洞，方案将关键验证迁移至服务器端，采用 Spring Boot REST 接口配合 Redis 保存解锁状态和一次性令牌，使用多层客户端标识（Cookie、请求头、IP+User‑Agent 指纹）生成唯一 `clientId`。前端通过 Fetch 与服务器查询解锁状态、获取令牌并在页面加载时决定是否解锁；拦截器统一注入 `clientId` 并写入长期 Cookie。令牌采用 MD5(clientId+timestamp+UUID) 生成，具滑动过期和防篡改校验。整体实现保持用户体验流畅，同时实现服务器可控、不可伪造、可追踪的安全解锁机制。
本文介绍在博客中实现“部分展示+验证解锁”阅读限制的完整方案。通过自动计算文章高度，仅显示前1/3并加底部虚化遮罩，配合“查看全文”按钮触发验证弹窗。用户扫码关注公众号、发送关键词获取验证码，校验成功后在本地存储全局解锁标识，文章平滑展开并显示成功动画。实现核心包括HTML结构划分、CSS变量控制截断高度与过渡、JS负责高度计算、锁定/解锁逻辑及验证码校验。文中还提供响应式布局、全局解锁持久化及后续优化建议，如后端API动态验证码、微信自动回复、有效期控制、数据统计和A/B测试等。
为博客底部的“每日一句”添加英文音频播放功能。通过有道词典每日一句API获取 voice URL，后端实现 `/api/daily-quote/voice` 代理接口解决 CORS，前端加入圆形播放按钮、CSS 动画和播放状态反馈，使用 HTML5 Audio 管理播放、暂停及结束事件，并处理 DOM 加载时机和移动端样式适配。实现后，点击按钮即可播放或暂停音频，播放中按钮呈粉色脉冲动画，兼容 PC 与移动端，提升访客的英语学习体验。
本文介绍在 Web 项目中实现自定义图片 Emoji 的完整方案。首先约定表情图片统一存放于 `/static/img/emoji/`，使用有意义的英文或拼音命名。核心 JavaScript 包括：定义路径和名称列表、利用正则 `\[:([a-zA-Z0-9_\-@]+):\]` 将 `[:表情名:]` 替换为 `<img>` 标签、动态生成表情面板并在编辑器中插入图片、提交前再将 `<img>` 转回文本代码。配套的 CSS 负责内联表情、面板布局及悬停效果，HTML 结构由按钮、面板和容器组成，并通过点击、冒泡控制面板显示。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、分类展示等功能。整体思路是“纯文本存储‑图片展示‑编辑插入‑代码回写”，实现了可扩展、跨平台、风格统一的 Emoji 系统。
本文介绍在 Spring Boot + Thymeleaf 项目中为博客文章详情页实现侧边栏的热门文章（浏览量前5）和最新文章（发布时间前3）功能。通过只查询必要字段的 SQL、@Cacheable 缓存，实现一次查询复用；在控制器使用 Java 8 Stream 按浏览量降序排序并截取前5篇，直接取前3篇作为最新文章。前端采用 Thymeleaf 循环渲染，CSS 使用 sticky 定位保持左侧固定，媒体查询实现 PC 端显示、移动端隐藏，并通过颜色、圆点、文字截断等样式提升可读性。整体方案兼顾性能、响应式布局和用户体验。
