Lumin 小工具开发实例

有意思的小工具合集

9 篇文章

在线工具集功能实现全解析

从架构设计到具体实现，深度解析 Hugo 博客在线工具集模块：数据驱动的 TOML 配置、分类筛选侧边栏、42+ 个纯前端工具 partial、共享样式体系与暗色模式适配

Lumin 主题音乐播放器从单页播放升级为全局跨页播放，支持多平台歌单切换、播放模式控制、歌词同步、进度条拖拽，以及右下角迷你播放器挂件

在 Hugo 博客中实现 14 种全屏屏幕特效（蓝屏/更新/数字雨/黑客终端/白噪音/FBI/碎屏/DVD/CRT/故障/星空/火焰/假加载），涵盖 Fullscreen API、Canvas 2D 动画、Web Audio API 噪音生成等核心技术。

在 Hugo 博客中基于 Canvas 2D API 实现像素画在线绘制工具的完整方案，涵盖画笔/橡皮擦/填充/取色器、撤销重做、PNG 导出、触摸屏适配、暗色模式等技术细节。

基于高德地图 JS API 2.0 实现出行轨迹回放功能，支持导航链接导入、驾车路径自动规划、小车动画回放、速度调节和地图交互，后台仅需起终点信息即可自动生成完整路线

基于纯前端实现的便签墙功能，支持随机散落布局、自由拖拽堆叠、分类筛选、用户发布、管理员删除，暗色模式完整适配

基于纯前端实现的番茄工作法计时器，支持三种模式切换、圆形进度条动画、白噪音合成、任务清单和今日统计，无需后端 API

基于 l2d-widget 库，将初音未来 Live2D 看板娘集成到 Hugo 博客，支持菜单导航、提示气泡、打字嘴型同步等丰富交互

Lumin 主题新增在线工具集功能，精选 37 款国内可快速访问的开发、实用与设计工具，支持后台管理与分类筛选