本文介绍了基于 Spring Boot 的 AI 智能评论审核与自动回复系统，实现评论的本地敏感词预筛选 + 多模态 AI 深度审核、状态机管理、异步任务调度以及上下文感知的自动回复。系统采用前端‑Controller‑Service‑AI 服务四层架构，利用正则缓存实现毫秒级本地过滤，调用多模态模型支持图文审核，并通过可配置的回复风格生成友好、专业或幽默的答案。通过 @Async 与线程池实现高并发下的非阻塞处理，提升审核效率和用户交互体验。

本项目实现了基于 Web 的 AI 对话机器人，嵌入博客页面，为读者提供基于文章上下文的智能问答。核心功能包括逐字打字机效果、暂停/继续、对话历史本地持久化、快捷常见问题以及响应式布局。技术上采用原生 HTML5 + CSS3 + JavaScript，无框架依赖；利用 Marked.js 解析 Markdown、Highlight.js 高亮代码、Font Awesome 图标，并通过 RESTful API 调用 AI 服务。系统分为用户界面层、交互逻辑层、数据处理层和服务接口层，采用状态机管理 AI 生成过程（idle、thinking、generating、paused、completed），实现状态统一更新。针对打字机与 Markdown 同步、暂停状态持久化以及多状态切换的难点，分别采用增量渲染、历史记录标记和单一状态变量管理等方案，确保交互流畅、数据可靠。

本文记录了在博客“每日一句”板块为英文原句添加音频播放功能的完整实现过程。首先通过有道词典每日一句 API 获取音频 URL，因跨域限制在后端实现代理接口 `/api/daily-quote/voice`。前端在每日一句卡片中加入圆形播放按钮，使用 HTML5 Audio 播放音频并通过 CSS 实现默认、播放中（粉色脉冲）两种状态的视觉反馈。代码中处理了 CORS、DOM 加载时机、移动端样式适配等问题，并实现了播放/暂停、结束自动恢复等交互细节。项目展示了后端代理、Audio API、响应式设计和用户体验优化的实践经验。

本文介绍在 Web 项目中使用自定义 PNG 图片实现 Emoji 表情的完整方案。将所有表情统一存放在 `/static/img/emoji/` 目录，采用有意义的英文/拼音文件名。通过 JavaScript 定义路径和名称列表，利用正则 `/\[:([a-zA-Z0-9_\-@]+):\]/` 将代码 `[:表情名:]` 替换为对应的 `<img>` 标签，实现点击面板插入、编辑区显示以及提交前逆向转换回代码。配套 CSS 设定内联表情样式、面板布局和悬停动画，支持响应式。进阶提供懒加载、最近使用记录和分类展示等优化。方案优势在于纯文本存储、易扩展、跨平台兼容且视觉统一。

本文详解在 Spring Boot + Thymeleaf 项目中实现博客侧边栏的热门文章和最新文章功能。通过只查询必要字段、使用 `@Cacheable` 缓存，实现一次 SQL（按发布时间倒序）获取数据，再在 Service 层和 Controller 中利用 Java 8 Stream 按浏览量排序取前 5 篇热门、直接取前 3 篇最新。前端采用 Thymeleaf 渲染列表，CSS 使用 sticky 定位保持侧边栏固定，媒体查询实现 PC 侧边显示、移动端隐藏，并通过颜色、圆点等视觉区分排名与最新。整体方案兼顾性能、响应式布局和用户体验。

本文介绍了在个人博客中实现分享卡片的完整方案。通过 HTML Overlay 弹窗和 Canvas API 绘制卡片，展示标题、摘要、时间、作者及二维码，并支持保存为图片。重点阐述了 Canvas 文本自动换行、使用 qrcode.js 生成二维码、双倍缩放实现高清、异步处理防止阻塞以及响应式 CSS 适配 PC 与移动端。提供获取文章信息、下载图片的实现代码，并给出视觉配色、字体排版及性能优化建议，最终交付一个功能完善、体验流畅的分享卡片功能。