本文介绍基于 Spring Boot 搭建的 AI 评论审核与自动回复系统，采用前端展示、控制层、服务层、AI 服务四层架构，实现本地敏感词预筛选+多模态 AI 深度审核的双层机制，并通过状态机管理评论生命周期。系统支持表情图片识别、上下文感知的风格化回复，以及 @Async 线程池的异步处理，提升高并发下的响应速度和用户体验。

本项目在博客页面实现基于Web的AI对话机器人，提供基于文章内容的智能问答。核心功能包括上下文问答、打字机逐字显示、暂停/继续、对话历史本地持久化、快捷常见问题以及响应式布局。技术选型采用原生HTML5 + CSS3 + JavaScript、Marked.js、Highlight.js、Font Awesome，后端通过RESTful API调用AI服务；数据存储使用LocalStorage。系统分为用户界面层、交互逻辑层、数据处理层和服务接口层，AI生成过程通过状态机管理（idle → thinking → generating → paused → completed）。实现重点在打字机效果与增量Markdown渲染同步、暂停状态持久化及多状态切换的稳定性，均通过增量渲染、历史记录标记和统一状态变量等方案解决。

本文记录了为博客底部“每日一句”板块添加英文音频播放功能的完整实现过程。首先明确需求：点击播放按钮获取并播放音频，保持页面风格、兼容PC与移动端并提供播放状态反馈。由于有道词典API存在 CORS 限制，采用后端代理接口 `/api/daily-quote/voice` 转发请求并解析返回的 `voice` URL。前端在卡片中加入圆形播放按钮，使用 CSS 设计默认、播放中两种样式并实现响应式适配；通过 HTML5 Audio 对象实现音频加载、播放、暂停及结束事件的状态管理。开发中解决了跨域、DOM 加载时机和移动端样式超出等问题。最终实现点击播放、再次点击暂停、播放结束自动恢复默认状态的交互，提升用户体验，并总结出跨域代理、Audio API 使用及响应式设计等实践经验。

本文介绍在 Web 项目中实现基于自定义 PNG 图片的 Emoji 系统的完整方案。通过在 /static/img/emoji/ 统一存放表情图片，并采用有意义的英文/拼音命名，使用 JavaScript 定义路径、文件名列表，利用正则 \[:name:\] 将文本代码转换为 <img> 标签实现显示；在编辑器中点击面板插入对应 <img>，提交前再将图片恢复为 [:name:] 纯文本存储。配套 CSS 设定内联表情和响应式面板样式，并提供面板显示/隐藏、点击冒泡控制等交互逻辑。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、按分类展示等功能。方案优势在于纯文本存储便于查询、可随时扩展新表情、跨平台兼容且视觉统一。

本文详细阐述在 Spring Boot + Thymeleaf 项目中实现博客侧边栏的热门文章与最新文章功能。通过自定义 SQL 只查询必要字段、在 Service 层使用 @Cacheable 缓存，一次查询即可获取两种排序所需数据；控制器利用 Java 8 Stream 按浏览量降序取前 5 篇作为热门文章，直接取前 3 条作为最新文章。前端使用 Thymeleaf 渲染列表，CSS 采用 sticky 定位实现左侧固定，媒体查询保证 PC 端显示、移动端隐藏，并通过颜色、图标区分排名与最新标识。整体方案兼顾性能、可维护性和响应式体验。

本文介绍在个人博客中实现分享卡片的完整方案。通过 HTML Overlay 弹窗结构，利用 Canvas 绘制卡片背景、标题、摘要、作者信息及二维码，并自行实现文本自动换行函数以控制行数和省略号。二维码采用 qrcode.js 异步生成后绘入 Canvas。卡片支持保存为 PNG，使用 toDataURL 实现下载。UI 采用简约配色和系统字体，兼顾 PC 与移动端的响应式布局（Media Query）。性能上通过 2 倍画布缩放、异步二维码生成和系统字体避免加载阻塞。整体实现覆盖需求分析、UI 设计、核心代码及优化技巧，提供可直接复用的分享卡片功能。