简介

Lumin 主题新增 在线工具集 功能，在博客中嵌入一个精选工具导航页面，方便日常开发、设计与生活实用场景。

工具分为三大类：开发工具、实用工具、设计工具，全部链接经过实测，确保在国内网络环境下快速访问。

数据统计

链接选择策略

所有工具链接遵循以下原则：

1. 国内站点优先 — 优先选用国内托管或镜像站点，如站长工具 (tool.chinaz.com)、SoJSON (sojson.com)、tool.lu、OSChina 等
2. 高可靠性 — 选用运营多年、有稳定维护团队的平台（如快递100、草料二维码、ProcessOn）
3. 功能完整度 — 避免需要注册或付费才能使用核心功能的工具
4. 用户体验 — 界面简洁、加载快、广告干扰少的站点优先

链接来源分布

技术实现

数据层

工具数据存储在 data/tools.toml，每条记录包含以下字段：

1[[tools]]
2  name = "JSON 格式化"          # 工具名称
3  icon = "fa-solid fa-code"     # Font Awesome 图标类名
4  url = "https://www.json.cn"   # 目标链接
5  desc = "JSON 格式化、校验、压缩与转换"  # 简短描述
6  category = "开发工具"         # 分类（开发/实用/设计）
7  color = "#667eea"             # 图标背景色

前端模板

页面模板位于 layouts/tools/list.html，采用全前端渲染：

• Hugo 通过 {{ $tools | jsonify | safeJS }} 将数据注入 JavaScript
• 客户端按分类自动分组、生成筛选项、渲染卡片网格
• 支持分类筛选切换，无需刷新页面

后台管理

后台管理页面 views/Tools/Index.vue，提供完整 CRUD：

• 添加/编辑工具 — 表单包含名称、URL、图标、描述、分类、颜色
• 删除 — 一键删除，确认弹窗防误操作
• 分类排序 — 上移/下移整个分类块，灵活调整排列顺序
• 分类折叠 — 点击分类头部可折叠/展开，减少视觉干扰
• 实时预览 — 图标和颜色在输入时即时预览

API 接口

• GET /api/tools — 获取全部工具列表
• PUT /api/tools — 全量保存工具数据

页面功能

• 分类筛选栏 — 一键切换查看全部或特定分类
• 卡片悬停操作 — 鼠标悬停显示编辑/删除按钮，保持界面清爽
• 外链新窗口 — 所有工具链接在新标签页打开，不会离开当前页面
• 留言评论 — 页面底部保留评论区域，方便反馈
• 暗色模式 — 完全适配主题暗色模式

使用方式

方法一：直接编辑 TOML 文件

打开 data/tools.toml，按照 TOML 数组格式添加或修改工具条目，重新构建 Hugo 即可生效。

方法二：后台管理（推荐）

启动后台管理服务，登录后进入「内容管理 → 在线工具」，即可可视化管理所有工具：

1. 点击「添加工具」填写表单
2. 选择分类、颜色，输入图标类名
3. 保存后自动写入 data/tools.toml 并生效

未来计划

• 支持外部 JSON 数据源，后台编辑更灵活
• 支持工具收藏/常用置顶
• 提供工具使用统计（点击量）
• 社区提交工具链接功能