本文介绍基于 Spring Boot 的 AI 智能评论审核与自动回复系统，采用本地敏感词预筛选 + 多模态 AI 深度审核的双层机制，使用状态机管理审核流，并结合文章上下文生成个性化回复。系统架构分为前端、控制层、服务层和 AI 服务层，支持表情图片审查、可配置回复风格，利用 @Async 与线程池实现异步处理，显著提升审核效率和用户交互体验。

本项目在博客页面实现基于Web的AI对话机器人，提供文章上下文问答、打字机逐字显示、暂停/继续、历史记录、快捷问题等功能。前端采用原生HTML5+CSS3+JS，配合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 并返回 JSON。前端在每日一句卡片中加入圆形播放按钮，使用 CSS 实现默认、悬停和播放中（粉色脉冲）三种样式；通过 HTML5 Audio API 编写播放、暂停、结束等逻辑，并在 DOM 加载完成后绑定事件。解决了跨域、DOM 加载时机和移动端样式适配等问题后，实现了点击播放、再次点击暂停、播放结束自动恢复的交互体验。项目展示了后端代理跨域、Audio API 使用及响应式设计的完整流程。

本文介绍在 Web 项目中实现自定义图片 Emoji 的完整方案。通过在 static/img/emoji/ 目录统一存放 PNG 表情，并采用有意义的英文/拼音命名，利用 JavaScript 定义路径、文件名列表、正则（\[:name:\]）实现代码↔图片相互转换；动态生成表情面板 HTML、绑定点击插入编辑器并在提交前把 <img> 再转回 [:name:] 纯文本；配以 .emoji‑inline、.emoji‑panel 等 CSS 实现内联显示和响应式面板。进一步提供懒加载、最近使用记录、分类展示等优化思路。方案优势在于纯文本存储、易扩展、跨平台兼容并可统一风格。

本文详细阐述了在 Spring Boot + Thymeleaf 博客系统中实现侧边栏“热门文章”和“最新文章”的完整方案。首先在数据库层仅查询必要字段并按发布时间倒序返回，以提升查询效率；随后在 Service 层加入 @Cacheable 实现缓存，进一步降低访问成本。控制器一次性获取文章列表，使用 Java 8 Stream 按浏览量降序取前5篇作为热门，直接取前3篇作为最新，并将结果分别放入模型。前端采用 Thymeleaf 渲染侧边栏结构，CSS 使用 sticky 定位实现固定滚动、媒体查询实现 PC 左侧显示、移动端隐藏，并通过颜色和圆点区分排名与最新。整体实现兼顾性能、响应式布局和良好用户体验。

本文介绍在个人博客中实现分享卡片的完整方案。首先阐述功能需求：弹窗展示、包含标题、摘要、时间、作者、二维码并可保存为图片，兼容PC和移动端。随后给出技术实现细节，包括HTML Overlay结构、Canvas 高分辨率绘制、手写文本换行函数、使用 qrcode.js 生成二维码并绘制到画布。还说明了 UI 视觉层次、配色、字体排版以及获取文章信息的脚本。最后提供图片下载方法、响应式 CSS 适配和性能优化要点（双倍缩放、异步二维码、系统字体），并总结实现过程中的关键难点与解决思路。