这个话题下有 30 篇手记。
换到流萤主题后，代码块里多出两种颜色：每行有字的地方垫着一块底色，折叠时底部渐隐和「展开全部」条偏蓝。原因都是组件底座写死了藏青色，而主题的代码底色换了。本文记录排查和修法：行内元素的背景为什么一行一画；想保留渐隐曲线只换颜色时用 color-mix，以及带 var() 的 color-mix 在旧浏览器里会整条失效、兜底必须写在后面的 @supports 里；用自写 PNG 解码逐像素比较，证明其它主题一个像素都没变；Playwright 定位器重新查询造成的假「点了没反应」；AI 助手黑夜里的同类问题。
用 HTML 按时间渲染画面、无头 Chrome 逐帧截图、numpy 合成做菜声，再用 ffmpeg 编成一支 24 秒美食短片。本文保留 2026-10-09 的视频与制作参数，并补充当前 3.1.0 的厨房功能和新版首页，区分宣传片制作案例与最新产品说明。
给博客搜索弹层加了热门标签和最近文章，电脑上排得整齐，手机上却被撑出了弹层。记录三个坑：网格 auto 列不会比不换行的内容窄、两行截断时内边距漏出第三行半截、固定弹层在小屏上底边出屏，以及之后在多个尺寸下量越界的办法。
博客文章页的分享海报重做了一遍：加上封面、分类、标签和头像，弹窗改成一屏放下。本文记录重做时量出来的几个问题：旧版逐字换行，全站 372 篇文章里有 288 篇的海报把英文单词拆开、把标点放在行首；canvas 画了跨域图片就会被污染、无法导出，七牛的图要服务器允许跨域、页面设置 crossOrigin 才能画，而 Chrome 还会为这类请求单独建连接；二维码先画成小图再放大，边缘有三成是灰色的过渡像素。以及对应的断行规则、图片加载策略和按屏幕尺寸计算海报大小的写法。
博客默认主题换成流萤后，用无头 Chrome 在手机尺寸下做冷加载实测：首页 1495 KB 里有 849 KB 是一个字体文件，页面上却没有一个字用它。本文记录这一轮排查：预加载让按需下载的字体变成必下，CSS 背景图当最大内容时浏览器发现得太晚，评论照片显示 220px 却下载 1080px，改 srcset 时撞上同一段 HTML 被规范化两遍，以及打字机副标题折行导致的首屏跳动。改完四个页面的冷加载流量减少 42% 到 68%。
给博客的手机菜单做右侧抽屉时，一个 position: fixed、top 和 bottom 都是 0 的抽屉，只要写在顶栏里面就只有 64px 高，顶栏向上收起时还会被一起带走——毛玻璃用的 backdrop-filter 让顶栏成了它的包含块。本文先说明 fixed 元素的包含块什么时候不再是视口，再用 Chrome 154 实测 20 种写法：transform、translate、filter、backdrop-filter、perspective、will-change: transform、contain、content-visibility 会“截胡”，opacity、isolation、mix-blend-mode、z-index、container-type 只建立层叠上下文、不会截胡；全站置灰的滤镜放在 html 上安全，放在 body 上会让所有 fixed 元素跟着页面滚走。最后给出用 offsetParent 一行找到“截胡者”的排查方法，以及挪出 DOM、把属性挪到伪元素上两种修法。
博客在六天里从一套样式变成了六套主题。第一版只叠了一张 1528 行的覆盖样式表，颜色换了、骨架没变，第二天推倒重来：每套主题一套独立模板，评论、表情、AI 助手等组件抽成共享片段，脚本一行不改。本文记录这套结构的划分与回退机制、Thymeleaf 片段选择器和 CSS 层叠带来的几个坑、去掉点击后的焦点框时要对付的 120 条规则，明暗切换的圆形扩散为什么在流萤上看不出来、又为什么一顿一顿，用无头 Chrome 做流畅度测试找到的几处主线程空转，以及不部署就在线上页面验证本地样式的方法。
长篇文章缺少目录会增加用户查找信息的成本，影响阅读体验。本文介绍了一种轻量级的文章目录实现方案，通过浏览器原生 API 自动提取正文中的 `h2`、`h3` 标题，为章节生成唯一锚点，并动态构建目录导航。同时结合 `IntersectionObserver` 监听标题进入视口的状态，实现滚动阅读时目录自动高亮。针对固定导航栏遮挡问题，文章还介绍了 `scroll-margin-top` 的优化方式。整个方案无需依赖第三方插件，具有实现简单、性能稳定、扩展性强等特点，适用于博客、技术文档、知识库等内容型网站，能够有效提升长文章的浏览效率和用户阅读体验。
实现基于微信公众号验证码的文章解锁功能：未关注用户仅能阅读文章前1/3，底部“查看全文”引导关注；关注后发送关键词“博客”即获6位数字验证码，验证码存入Redis（5 分钟有效、单次使用），前端通过 CSS max‑height 与渐变遮罩实现内容截断。用户验证成功后在浏览器 LocalStorage 标记全局解锁状态，实现全站解锁。后端采用 Spring Boot 提供验证码生成/验证 API 与微信消息处理接口，配合 Redis 保存验证码，整体架构为 浏览器 ↔ Spring Boot ↔ Redis ←→ 微信服务器。实现步骤包括 Redis 配置、验证码服务实现、微信接入及前端交互逻辑。
本文介绍在博客中实现“部分展示+验证解锁”阅读限制的完整方案。通过自动计算文章高度，仅显示前1/3并加底部虚化遮罩，配合“查看全文”按钮触发验证弹窗。用户扫码关注公众号、发送关键词获取验证码，校验成功后在本地存储全局解锁标识，文章平滑展开并显示成功动画。实现核心包括HTML结构划分、CSS变量控制截断高度与过渡、JS负责高度计算、锁定/解锁逻辑及验证码校验。文中还提供响应式布局、全局解锁持久化及后续优化建议，如后端API动态验证码、微信自动回复、有效期控制、数据统计和A/B测试等。
为博客底部的“每日一句”添加英文音频播放功能。通过有道词典每日一句API获取 voice URL，后端实现 `/api/daily-quote/voice` 代理接口解决 CORS，前端加入圆形播放按钮、CSS 动画和播放状态反馈，使用 HTML5 Audio 管理播放、暂停及结束事件，并处理 DOM 加载时机和移动端样式适配。实现后，点击按钮即可播放或暂停音频，播放中按钮呈粉色脉冲动画，兼容 PC 与移动端，提升访客的英语学习体验。
本文介绍了在博客中实现分享卡片的完整方案。通过 HTML Overlay 弹窗、Canvas 绘制和 qrcode.js 生成二维码，实现卡片展示文章标题、摘要、作者、时间等信息，并支持保存为图片。重点阐述了 Canvas 高分辨率绘制、文本手动换行、二维码异步绘制以及响应式 CSS 适配 PC 与移动端的技巧，配以颜色、字体等 UI 设计细节，并提供获取文章数据和下载图片的代码实现，完成一个兼顾性能与体验的分享功能。
