手机上被撑破的搜索弹层
给博客搜索弹层加了热门标签和最近文章，电脑上排得整齐，手机上却被撑出了弹层。记录三个坑：网格 auto 列不会比不换行的内容窄、两行截断时内边距漏出第三行半截、固定弹层在小屏上底边出屏，以及之后在多个尺寸下量越界的办法。
FOLLOW YOUR CURIOSITY
把同一个话题，读得更深。
这个话题下有 33 篇手记。
Canvas分享海报
博客文章页的分享海报重做了一遍：加上封面、分类、标签和头像，弹窗改成一屏放下。本文记录重做时量出来的几个问题：旧版逐字换行，全站 372 篇文章里有 288 篇的海报把英文单词拆开、把标点放在行首；canvas 画了跨域图片就会被污染、无法导出，七牛的图要服务器允许跨域、页面设置 crossOrigin 才能画，而 Chrome 还会为这类请求单独建连接；二维码先画成小图再放大，边缘有三成是灰色的过渡像素。以及对应的断行规则、图片加载策略和按屏幕尺寸计算海报大小的写法。
清掉没用上的字体后博客冷加载流量减半
博客默认主题换成流萤后，用无头 Chrome 在手机尺寸下做冷加载实测：首页 1495 KB 里有 849 KB 是一个字体文件，页面上却没有一个字用它。本文记录这一轮排查：预加载让按需下载的字体变成必下，CSS 背景图当最大内容时浏览器发现得太晚，评论照片显示 220px 却下载 1080px，改 srcset 时撞上同一段 HTML 被规范化两遍，以及打字机副标题折行导致的首屏跳动。改完四个页面的冷加载流量减少 42% 到 68%。
position fixed 为什么不固定了
给博客的手机菜单做右侧抽屉时，一个 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、把属性挪到伪元素上两种修法。
博客文章部分展示与关注验证解锁
本文介绍在博客中实现“部分展示+验证解锁”阅读限制的完整方案。通过自动计算文章高度，仅显示前1/3并加底部虚化遮罩，配合“查看全文”按钮触发验证弹窗。用户扫码关注公众号、发送关键词获取验证码，校验成功后在本地存储全局解锁标识，文章平滑展开并显示成功动画。实现核心包括HTML结构划分、CSS变量控制截断高度与过渡、JS负责高度计算、锁定/解锁逻辑及验证码校验。文中还提供响应式布局、全局解锁持久化及后续优化建议，如后端API动态验证码、微信自动回复、有效期控制、数据统计和A/B测试等。
输入QQ号自动获取昵称
实现了在博客评论和回复框输入QQ号后自动获取昵称、头像并填充的功能。采用 uapis.cn 提供的 QQ 信息接口，使用正则校验和 jQuery AJAX 异步请求，失焦时触发。经过多接口对比后选定该稳定接口，并在友情链接/留言板和文章详情页完成集成。实现了前端格式验证、错误日志、跨域支持，并提出缓存、加载提示、备用接口及后端代理等优化建议。该功能简化了评论流程，显著提升用户体验。
AI对话机器人技术实现文档
实现基于 Web 的 AI 对话机器人，嵌入博客文章页面，提供文章上下文的智能问答。核心功能包括打字机逐字显示、生成过程暂停/继续、对话历史本地持久化、快捷预设问题及响应式布局。前端采用原生 HTML5、CSS3、JavaScript，配合 Marked.js 解析 Markdown、Highlight.js 代码高亮、Font Awesome 图标；后端通过 RESTful API 调用 AI 服务，数据存储使用 LocalStorage。系统划分为界面层、交互层、数据层和服务层，采用状态机管理 idle、thinking、generating、paused 等状态。针对打字机与 Markdown 同步、暂停状态持久化、多状态切换不一致等难点，分别实现增量渲染、保存暂停标记和统一状态变量等解决方案。
为博客每日一句添加音频播放功能
为博客底部的“每日一句”添加英文音频播放功能。通过有道词典每日一句API获取 voice URL，后端实现 `/api/daily-quote/voice` 代理接口解决 CORS，前端加入圆形播放按钮、CSS 动画和播放状态反馈，使用 HTML5 Audio 管理播放、暂停及结束事件，并处理 DOM 加载时机和移动端样式适配。实现后，点击按钮即可播放或暂停音频，播放中按钮呈粉色脉冲动画，兼容 PC 与移动端，提升访客的英语学习体验。
使用自定义图片作为Emoji表情的技术实现
本文介绍在 Web 项目中实现自定义图片 Emoji 的完整方案。首先约定表情图片统一存放于 `/static/img/emoji/`，使用有意义的英文或拼音命名。核心 JavaScript 包括：定义路径和名称列表、利用正则 `\[:([a-zA-Z0-9_\-@]+):\]` 将 `[:表情名:]` 替换为 `<img>` 标签、动态生成表情面板并在编辑器中插入图片、提交前再将 `<img>` 转回文本代码。配套的 CSS 负责内联表情、面板布局及悬停效果，HTML 结构由按钮、面板和容器组成，并通过点击、冒泡控制面板显示。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、分类展示等功能。整体思路是“纯文本存储‑图片展示‑编辑插入‑代码回写”，实现了可扩展、跨平台、风格统一的 Emoji 系统。
实现一个现代化的弹幕墙
本文系统阐述了现代弹幕墙的完整实现方案。首先明确视觉、流畅滚动、防重叠、交互、响应式和状态管理等核心需求；随后基于玻璃拟态风格设计容器和圆角卡片弹幕，并提供六套主题色彩。核心滚动逻辑采用 keyframes 动画结合轨道管理，实现弹幕在不同轨道上的独立运行；通过安全轨道检测和密度自适应调度防止重叠。针对 PC 与移动端的全屏/非全屏场景，制定动态轨道数和居中布局策略，保证在尺寸变化时仍保持美观。交互方面实现速度倍率（0.5‑3×）调节、暂停/播放以及全屏切换时的弹幕清理。最后通过 transform/GPU 加速、对象池复用、事件防抖等手段进行性能与内存优化，确保弹幕墙视觉炫酷、交互流畅、适配广泛。
博客每日一句功能的缓存与实现
本文详细阐述了在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot + RestTemplate，提供 `/api/daily-quote` 接口，使用 ConcurrentHashMap 按日期缓存当天句子，防止频繁调用有道词典 API，并在异常时返回固定备用句子。前端使用原生 JavaScript 与 CSS3，首次请求后将数据写入 localStorage，实现客户端一天一次的二层缓存；通过 `white-space: nowrap`、`text-overflow: ellipsis` 与 `.expanded` 类实现长句折叠/展开交互。布局采用弹性盒子和媒体查询，在桌面、平板、手机三种断点下自动适配宽度和字号。整体实现了每日更新、降级备份、性能优化和响应式展示，代码可直接复制使用。
博客长代码块的折叠与展开
随着技术文章代码示例日益冗长，阅读体验受限，作者实现了零依赖、智能折叠的代码块组件。核心采用 CSS max‑height 过渡实现平滑动画，结合实际渲染的字体尺寸、行高和内边距精确计算折叠阈值，仅对超长代码启用。组件提供语言自动识别、复制按钮、ARIA 可访问属性以及响应式触摸优化。性能测试显示首屏加载下降 11%、交互延迟降 28%、代码占比减半，移动端阅读完成率提升 40%。文中还总结了主题兼容、动画防抖、触控尺寸等实现挑战及对应方案，并给出渐进增强、性能优先、无障碍设计等最佳实践，提出虚拟滚动、状态持久化和结构化折叠等后续优化方向。