这个话题下有 33 篇手记。
本文介绍在 Spring Boot + Thymeleaf 项目中实现高精度评论深层链接的完整方案。通过后端递归计算目标评论的顶级父 ID（Thread ID），在邮件链接中携带 commentId 和 threadId，并保留锚点作降级；前端脚本解析参数，判断评论是否被折叠，自动展开父级、轮询 AJAX 加载、双重滚动修正图片加载导致的偏移，并以 Teal 呼吸灯动画高亮目标。该实现解决了定位失效、隐藏内容和视觉反馈弱等痛点，提升了用户在邮件通知中快速定位回复的体验。
本文记录了博客留言板表情系统的技术演进：从最初的[:表情名:]文本编码因记忆成本高、交互不直观而体验差，重构为“所见即所得”。采用 contenteditable 替代 textarea 实现图片即时插入，并通过实时双向同步将图片转回代码存入后端；页面加载时解析代码转为 <img>。动态生成表情面板，精确在光标位置插入，兼容回复框及移动端响应式布局与触摸事件。加入懒加载、输入防抖等性能优化，对比数据表明表情使用率、用户满意度显著提升。
在博客列表页通过普通 `<a>` 跳转到文章详情时，页面加载正常但灯箱、复制按钮等 JS 功能失效，刷新或直接访问 URL 则一切正常。原因是浏览器在普通跳转时可能复用旧的 JS 环境或缓存页面，导致新页面的脚本未完整重新执行。临时解决办法是给链接加 `target="_self"`，强制完整加载；更根本的做法是改进 JS 初始化时机：在 `DOMContentLoaded`、`load`、`pageshow` 等事件中检查关键元素是否已出现，必要时使用 `setTimeout` 或 `Promise` 等方式等待后再调用 `initLightbox、initCopyButton` 等函数；文中还提供了基于 `PageManager` 的完整初始化管理器，能够在页面恢复、前进/后退等场景下安全重置并逐个等待所需元素。经验教训包括：不要盲目信任 `DOMContentLoaded`，要防御性地检查 DOM，了解浏览器缓存机制，并可考虑使用 `MutationObserver` 监听 DOM 变化。
本文介绍了构建专业级 Web 表情选择器的核心——分类系统与实现。采用 7 大主题分类（表情、人物、动物、食物、旅行、物体、符号），每类配以图标、表情数量（约 70‑90 条）和代表 Emoji。通过 HTML 结构实现标签页与对应面板的切换，并给出每个分类的具体 Emoji 示例代码，展示如何在页面中组织、渲染并交互式展示完整的表情库。文章还说明了作者对原有库的归类与补充工作。
本文针对评论区长文本导致布局错乱的问题，设计并实现了基于 -webkit-line-clamp 的折叠组件。通过外层容器+内部 .comment-content 结构，使用 display:-webkit-box、-webkit-line-clamp 限制行数并配合伪元素渐变遮罩提示未展示内容；利用 JavaScript 动态添加/移除 .collapsed 类、比较 scrollHeight 与 clientHeight 判断是否需要折叠并控制展开/收起按钮。组件在窗口 resize 时重新计算，支持行数配置、非 WebKit 浏览器兼容、事件委托与防抖等性能与安全优化，可广泛用于社区评论、文章摘要等长文本折叠场景。
文章介绍在博客或技术文档页面为每个代码块自动添加复制按钮的完整实现方案。通过在 Thymeleaf 渲染的 `pre` 元素外层包裹 `div` 实现相对定位；CSS 统一视觉样式并提供悬停、点击及复制成功的反馈效果；JavaScript 在 `DOMContentLoaded` 后遍历所有 `pre`，动态创建按钮，使用 `navigator.clipboard` 复制代码文本，点击后显示“已复制”并在 2 秒后恢复。方案兼顾性能、现代浏览器兼容和可访问性，并提出快捷键、主题定制、批量复制等扩展建议。
文章先剖析了传统评论回复通过页面滚动实现的痛点——强制跳转、上下文丢失、交互割裂和验证不友好。随后提出基于模态弹窗的整体改造方案：动态生成回复弹窗并配合平滑动画，使用空间检测算法实现表情面板智能定位，完善光标保持的表情插入；实时校验内容、QQ 与昵称并通过定位错误提示提升可视性；采用防抖提交、按钮状态反馈及可堆叠的 Toast 系统保证提交体验。性能上通过文档片段、事件委托、GPU 加速等手段降低重绘与内存占用，弹窗加载 <300 ms、帧率 60 FPS、CPU 峰值 <15%。最后列出草稿保存、@提醒、Markdown 预览等后续方向，展示了“微交互”设计在评论回复中的全链路优化实践。
本文介绍在博客系统中实现图片左右翻动查看的完整方案。通过 initArticleImages() 收集并过滤文章区图片，构建 Lightbox 组件并提供放大、缩放、触摸滑动、键盘方向键和 ESC 关闭等交互。核心代码包括 HTML 结构、CSS 样式以及管理图片索引、导航按钮状态、边界检查的 JavaScript，实现平滑导航、按钮禁用提示和响应式布局。文章还强调性能优化、可访问性和用户体验要点，并指出该查看器可复用于产品展示、相册等多图场景。
本文围绕基于 Spring Boot、MyBatis‑Plus 与 Thymeleaf 的评论管理系统展开深度解析。首先阐述系统采用前后端分离、模板渲染相结合的架构，并选用 Spring Boot、MyBatis‑Plus、Redis、Bootstrap5 等技术以提升开发效率和性能。随后详细说明后端实现，包括分页查询（LambdaQueryWrapper 动态条件、PaginationInnerInterceptor 插件原理）、批量操作（删除、审核状态修改）及事务、幂等性保证。接着探讨缓存策略：评论变更后全库或按键前缀刷新 Redis，并提出懒加载与预加载方案。最后介绍前端响应式布局（表格/卡片切换、固定列宽、Flex 布局）及交互细节（内容展开、批量选择），实现 PC 与移动端的良好用户体验。
本文详述如何使用原生 HTML、CSS 与 JavaScript 构建一个轻量级、响应式的 Lightbox 组件。首先定义包含图片和放大/缩小按钮的 HTML 结构，并通过 CSS 实现全屏居中、半透明背景及圆形按钮的视觉效果。随后编写 JavaScript，实现点击任意图片弹出 Lightbox、滚轮或按钮控制缩放、拖拽移动、双指捏合手势的触摸缩放，以及点击背景或图片恢复默认状态以关闭弹窗。整个方案无需外部库，兼容桌面和移动端，提供平滑动画和良好交互体验。
原博客留言板一次性递归查询全部评论，导致数据库压力大、页面响应慢、资源浪费。优化思路改为首次只加载顶层评论，新增“展开回复”按钮，用户点击后通过 AJAX 异步获取该评论的完整回复树并平铺渲染。后端增加 replyCount 字段，仅查询顶层并递归返回子树，提供 `/comments/replies/tree` 接口；前端改造 HTML、JS 实现懒加载、展开/收起、平铺展示并优化样式。JMeter 测试显示平均响应时间从 1850 ms 降至 320 ms，查询时间降 97%，传输量降 93%，内存峰值降 82%，页面加载提升约5 倍，用户体验显著改善。
实现了在博客系统中通过弹窗输入图片URL并自动生成 `<img>` 标签插入编辑框的功能。核心包括模态对话框、正则校验 JPG/PNG/GIF/WEBP、实时预览、基于 Map 的 UUID 管理、光标位置控制以及删除操作。文中提供关键代码、响应式预览样式，并给出 CORS 与 Content‑Security‑Policy 安全建议。最后展望了拖拽上传、云存储、尺寸调节、懒加载等扩展方向。
