本文介绍基于 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渲染同步、暂停状态持久化及多状态切换的稳定性，均通过增量渲染、历史记录标记和统一状态变量等方案解决。

在博客底部的“每日一句”板块加入英文音频播放功能。通过有道词典的每日一句API获取 voice URL，后端提供 /api/daily-quote/voice 代理接口解决 CORS 跨域。前端新增圆形播放按钮，配合 CSS 动效显示播放/暂停状态，使用 HTML5 Audio 实现音频加载、播放、结束回调，并在 DOMContentLoaded 后绑定事件。解决了跨域、DOM 加载时机和移动端样式适配等问题，最终实现点击播放、再次点击暂停、播放结束自动恢复的交互效果，提升了用户体验。

本文介绍在 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 端左侧显示、移动端隐藏。重点阐述了查询优化、缓存、流式排序和响应式布局的实现细节。

本文阐述了在个人博客中实现分享卡片的完整方案。首先明确需求：点击按钮弹出卡片，展示标题、摘要、时间、作者并生成可扫二维码，支持保存为图片且自适应 PC 与移动端。随后给出 HTML Overlay 结构、Canvas 绘制核心流程（包括高清双倍缩放、背景、文本、二维码绘制），并实现自定义换行函数以控制行数和省略号。采用 qrcode.js 异步生成二维码，利用 Canvas toDataURL 实现图片下载。还提供了简约 UI 设计细节、配色、字体排版以及响应式 CSS。最后列出性能优化要点，指出文本换行、二维码绘制和多端适配为关键难点，整体实现了一个体验友好、功能完整的博客分享卡片。