JavaScript - 召田最帅boy

微信公众号API+Redis实现内容访问控制

本文介绍了基于微信公众号验证码的文章解锁方案，实现未关注用户仅可浏览文章前1/3内容，底部提供“查看全文”引导关注。用户关注后发送关键词“博客”，公众号自动回复6位数字验证码，后端Spring Boot通过Redis存储验证码（5分钟TTL、单次有效），前端使用LocalStorage持久化全局解锁状态并完成内容截断与遮罩效果。整体架构包括浏览器、Spring Boot服务、Redis及微信服务器，核心实现涉及CSS截断、XML消息解析、签名校验以及RedisTemplate配置，满足内容精细化运营和粉丝增长需求。

2026-03-26 16:05:09 阅读

博客文章“部分展示+验证解锁”实现

本文介绍在博客中实现“部分展示+验证解锁”的阅读限制功能。通过自动计算文章高度，仅显示前1/3，并在底部加入虚化遮罩和“查看全文”按钮，引导用户扫码关注公众号、发送关键词获取验证码。核心实现包括：HTML 结构划分内容、解锁区和验证弹窗；CSS 使用 max‑height 与自定义变量控制截断高度、平滑过渡和视觉遮罩；JavaScript 负责全局解锁状态存储、动态计算1/3高度、验证码校验及解锁动画。实现要点强调高度计算技巧、CSS 变量动态设置、动画平滑以及 localStorage 持久化。文末提出后端 API 验证、微信自动回复、验证码有效期、统计分析和 A/B 测试等后续优化方向。

2026-03-26 10:55:33 阅读

为博客每日一句添加音频播放功能

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

2026-03-17 10:54:06 阅读

博客文章分享卡片功能设计与实现

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

2026-03-12 17:48:11 阅读

视觉盛宴：手把手教你实现一个现代化的弹幕墙

本文系统阐述了如何打造现代化弹幕墙，包括采用玻璃拟态风格与多主题配色的视觉设计，利用 transform+keyframes 实现流畅滚动并通过轨道管理与安全轨道检测防止弹幕重叠。针对不同设备和全屏/非全屏状态，提供动态轨道数计算、居中或顶部布局的响应式方案，并实现速度调节、暂停播放等交互控制。最后给出 GPU 加速、DOM 回收、对象池等性能优化措施，形成视觉吸引、交互顺畅且易于扩展的弹幕系统。

2026-03-12 11:31:19 阅读

Spring Boot博客系统集成AI智能摘要功能实战

本文详解在 Spring Boot 博客系统中实现 AI 智能摘要的完整方案。通过前后端分离架构，后端提供 AiSummaryService 接口并基于 OpenAI 兼容 API 调用智谱 AI、Moonshot、GPT‑4 等模型生成限定字数的摘要；在 controller 中暴露 /api/ai-summary 接口，完成文章内容抽取、HTML 清洗和异常处理。配置文件统一管理 API 密钥、模型、参数。前端采用 Thymeleaf 页面，利用 JavaScript 实现打字机动画展示摘要，并在 AI 调用失败时回退本地关键词或首段摘要。文中还列出支持的国内 AI 服务商及对应模型，提供完整代码示例与实现细节。

2026-03-12 09:31:47 阅读

双层缓存+响应式设计：博客每日一句功能完美落地教程

本文详细介绍在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot，使用 RestTemplate 调用有道词典 API，并通过 ConcurrentHashMap 按日期缓存，提供降级备用句子；前端采用原生 JavaScript、CSS3，利用 fetch 拉取数据并存入 localStorage，实现双层缓存，避免重复请求。通过 CSS 省略号与 .expanded 类实现长句展开收起，配合媒体查询实现桌面、平板、手机的响应式布局。整体架构保证每日更新、稳定可靠、性能优化和良好交互体验。

2026-03-12 09:24:59 阅读

个人博客的代码块折叠/展开功能

为解决博客中长代码块影响阅读，作者实现了零依赖、智能折叠的代码块组件。采用 CSS max‑height 过渡实现平滑展开/收起，具备语言自动识别、语法高亮、复制、ARIA 可访问性及响应式布局。核心包括基于实际渲染的行高计算、动画防抖锁和 Clipboard API 复制。实验显示首屏加载降低11%、交互延迟降28%、移动端阅读率提升40%。文中还讨论了主题兼容、动画冲突、触摸体验等挑战，并展望虚拟滚动、状态持久化等后续优化。

2026-02-05 17:46:35 阅读

留言板表情系统技术实现：从代码输入到直观显示的演进

文章回顾了博客留言板表情系统从纯文本代码（[:表情名:]）到所见即所得图片显示的完整技术演进。最初方案存储简单但用户需记忆大量代码，交互不直观且易出错。重构后采用 contenteditable + 隐藏 textarea，实现编辑区实时插入表情图片、双向同步代码与图片。通过动态生成的表情面板、光标精准插入、移动端响应式布局与触摸优化，以及懒加载与防抖等性能手段，兼顾跨浏览器兼容性和加载失败回退。对比实验显示，表情查找时间从 3‑5 秒降至 1 秒以内，错误率几乎为零，用户满意度提升至 92%。整体实现了直观、快捷且兼容旧数据格式的表情交互体验。

2026-02-04 09:07:35 阅读

从A标签跳转后JS失效？我踩过的坑和填坑方法

作者在博客从列表页跳转到文章详情页时，发现灯箱、复制按钮等 JS 功能失效，刷新或直接访问则正常。原因是浏览器在普通跳转时复用旧的 JS 上下文或缓存，导致 DOM 尚未就绪而 DOMContentLoaded 不可靠。临时办法是给链接加 target="_self"；更根本的做法是让初始化代码具备防御性：在 DOM 完全出现后再执行，监听 load、pageshow 等事件，或使用类似 PageManager 的异步等待元素并重置状态的方案。作者总结经验：不要盲信 DOMContentLoaded，注意页面缓存和前进/后退的影响，可用 MutationObserver 等方式监控 DOM。

2026-01-27 15:48:14 阅读

现代Web表情选择器组件：分类系统与实现详解

本文详细阐述了基于 Web 的 emoji 表情选择器的分类体系与实现方式。采用七大主题分类（表情、人物、动物、食物、旅行、物体、符号），每类配以图标、表情数量及代表符号，并提供对应的 HTML 结构与示例代码，演示如何通过标签切换和面板展示实现分类切换、表情按钮布局以及完整的分类内容。文章既给出分类设计的原则，也给出可直接复用的代码片段，帮助开发者快速构建专业级表情选择组件。

2025-06-28 00:00:31 阅读

基于-webkit-line-clamp的评论折叠组件开发

本文介绍在评论区使用‑webkit‑line‑clamp实现多行文本折叠的组件。通过外层容器+内部 .comment-content 与 .collapsed 类配合 CSS 的‑webkit‑line‑clamp、max‑height 与渐变遮罩，实现四行截断并平滑展开/折叠；JS 根据 scrollHeight 与 clientHeight 判断是否超出，动态添加/移除折叠类并控制按钮显隐，同时在窗口 resize 时重新计算。文中提供 HTML、CSS、JS 代码示例，并提出行数可配置、兼容性、性能防抖、XSS 防护等优化方向，适用于社区评论、文章摘要等长文本场景。

2025-08-22 10:09:02 阅读