本文介绍基于 Spring Boot 的 AI 智能评论审核与自动回复系统实现方案。系统分为前端、控制层、服务层和 AI 服务层，核心模块包括本地敏感词预筛选、AI 深度审核（支持多模态表情）、上下文感知自动回复、状态机管理和异步任务调度。采用双层审核提升效率，利用 Prompt 设计返回 JSON 判定结果，回复可配置风格（友好、专业、幽默）。通过 Spring @Async 与自定义线程池实现高并发下的非阻塞处理，并支持实时状态推送，最终实现低延迟、可扩展的评论安全与互动功能。

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

本文介绍在博客“每日一句”模块中添加英文音频播放功能的完整实现过程。首先分析需求，确定需通过后端代理解决有道词典API的 CORS 限制，提供 `/api/daily-quote/voice` 接口返回音频 URL。随后在前端添加圆形播放按钮，使用 HTML5 Audio API 实现播放、暂停及结束状态的切换，并通过 CSS 设置默认、播放中（粉色脉冲）两种视觉效果，实现 PC 与移动端的响应式适配。文中还总结了跨域代理、DOM 加载时机、响应式设计等关键技术点及用户体验细节，展示了一个前后端协同、兼顾 UI 与交互的实用小功能。

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

在博客详情页加入左侧侧边栏，可展示按浏览量排序的前5篇热门文章和按发布时间排序的前3篇最新文章，提升阅读发现和停留时长。实现思路包括：①在 MySQL 中仅查询 id、标题、URL、浏览量、发布时间、缩略图等必要字段，避免大字段导致的性能损耗；②Service 层使用 Spring Cache 缓存查询结果，实现一次查询复用；③Controller 通过一次查询得到全部侧边栏数据，使用 Java 8 Stream 按浏览量降序取前5篇作为热门文章，直接取前3条作为最新文章，并在模型中分别放入 `hotArticles`、`latestArticles`；④前端采用 Thymeleaf 渲染列表，CSS 使用 `position: sticky` 实现滚动固定，媒体查询在 PC（≥1024px）显示左侧栏，移动端自动隐藏；⑤通过排名颜色、浏览量图标、标题省略号等细节提升可视化效果。整体方案兼顾功能完整、响应式布局和查询性能。

本文详述在个人博客中实现分享卡片的完整方案。首先通过HTML Overlay 弹出卡片窗口，利用 Canvas API 绘制背景、标题、摘要、作者信息及二维码，并自行实现文本自动换行函数以控制行数。二维码采用 qrcode.js 异步生成后绘入画布。卡片支持高清渲染、响应式布局（PC 与移动端）以及一键保存为 PNG。文中提供了颜色、字体、布局的 UI 设计细节、获取文章元数据的脚本以及性能优化要点，帮助开发者快速构建兼具美观与实用的博客分享功能。