前言
在线工具集是我博客"探索"板块下体量最大的功能模块。它并非简单的外链集合，而是一套完整的数据驱动、可扩展、纯前端的工具平台。截至本文撰写时，系统已收录 131 个工具，覆盖 15 个分类，全部通过 Hugo 模板引擎 + JavaScript 实现。
一、整体架构
1data/tools.toml ← 工具数据定义（名称/分类/图标/URL）
2 │
3 ▼
4layouts/tools/list.html ← 工具列表页（分类分组 + 侧边栏筛选）
5 │
6 ├── partials/tools/sidebar.html ← 左侧菜单栏（分类导航）
7 ├── partials/tools/styles.html ← 共享样式体系
8 └── partials/tools/{id}.html ← 每个工具的独立页面（42+ 个）
1.1 数据层 (data/tools.toml)
每个工具由以下字段定义：
1[[tools]]
2 id = "json-formatter"
3 name = "JSON 格式化"
4 icon = "fa-solid fa-code"
5 category = "开发工具"
6 categoryIcon = "fa-solid fa-laptop-code"
7 color = "#667eea"
8 desc = "JSON 格式化、压缩、校验与转换"
9 url = "/tools/json-formatter/"
Hugo 通过 hugo.Data.tools.tools 自动读取该数据，无需任何 Go 代码介入。
1.2 分类体系
系统按照功能域划分为 15 个分类，每个分类有独立的图标和品牌色：
| 分类 | 图标 | 工具数 | 说明 |
|---|---|---|---|
| 文本工具 | fa-solid fa-align-left | 20 | 文本格式化、编码转换等 |
| 数学计算 | fa-solid fa-calculator | 18 | 科学计算、统计、几何等 |
| 开发工具 | fa-solid fa-laptop-code | 15 | JSON/HTML/XML/JS 格式化等 |
| 信息速查 | fa-solid fa-magnifying-glass | 15 | 国家区号、ASCII 表、Emoji 等 |
| 时间日期 | fa-regular fa-clock | 9 | 倒计时、时区转换、日期计算等 |
| 财务计算 | fa-solid fa-yen-sign | 8 | 复利、贷款、百分比等 |
| 编解码工具 | fa-solid fa-key | 7 | Base64/URL/Unicode 等 |
| 健康计算 | fa-solid fa-heart-pulse | 7 | BMI/体脂/BMR/TDEE 等 |
| 随机工具 | fa-solid fa-shuffle | 6 | 随机数/决策/色卡/硬币等 |
| 图片工具 | fa-solid fa-image | 6 | 二维码/条形码/取色器等 |
| 数据转换 | fa-solid fa-arrow-right-arrow-left | 5 | JSON/TOML/CSV 互转等 |
| 颜色工具 | fa-solid fa-palette | 4 | 配色方案、颜色转换等 |
| 网络工具 | fa-solid fa-globe | 4 | IP/UserAgent 解析等 |
| CSS/设计 | fa-brands fa-css3-alt | 4 | CSS 格式化/预览等 |
| 哈希与加密 | fa-solid fa-shield-halved | 3 | MD5/SHA/密码/UUID 生成 |
二、工具列表页
2.1 侧边栏分类导航
左侧菜单是一个基于 sticky 定位的固定侧边栏，按分类分组展示所有工具。点击分类标签可快速滚动到对应区域：
1{{ partial "tools/sidebar.html" . }}
2.2 卡片网格
右侧主区域按分类分组渲染工具卡片。每个卡片包含：
- 品牌色 顶部色条（
color字段） - Font Awesome 图标（
icon字段） - 工具名称 + 描述文本
- 点击跳转到对应的独立工具页面（
url字段）
1// list.html 中的渲染逻辑
2var toolsData = {{ $toolsJson }}; // Hugo 将 TOML 数据注入 JS
卡片网格使用 CSS Grid 响应式布局，桌面端 3-4 列，移动端自适应为 1-2 列。
三、独立工具页面
每个工具对应一个独立 partial 文件，位于 layouts/partials/tools/{id}.html。页面分为两类：
3.1 纯计算/展示类工具
以 BMI 计算器为例，整个页面就是一个独立的 HTML 片段：
1<div class="tool-section">
2 <div class="tool-title"><i class="fa-solid fa-weight-scale"></i> BMI 计算器</div>
3 <div class="tool-input-group">
4 <label class="tool-label">身高 (cm)</label>
5 <input type="number" id="bmi-height" class="tool-input" ...>
6 </div>
7 ...
8</div>
3.2 游戏/交互类工具
扫雷、五子棋这类工具同样是独立 partial，但包含完整的 Canvas 操作和事件处理：
1<div class="minesweeper-page" id="minesweeper-page">
2 <div class="minesweeper-page-header">...</div>
3 <div class="minesweeper-main">
4 <div class="minesweeper-board" id="ms-board"></div>
5 ...
6 </div>
7</div>
四、共享样式体系
所有工具页面共享一套 CSS 变量 + 语义化 class 体系（partials/tools/styles.html）：
4.1 CSS 变量
1:root,[data-theme="light"]{
2 --primary-color:#667eea;
3 --primary-hover:#5a6fd6;
4 --bg-highlight:rgba(102,126,234,.08);
5 --success-color:#22c55e;
6 --warning-color:#f59e0b;
7 --error-color:#ef4444;
8 --info-color:#3b82f6;
9}
10[data-theme="dark"]{
11 --primary-color:#818cf8;
12 --primary-hover:#a5b4fc;
13 --bg-highlight:rgba(129,140,248,.12);
14 ...
15}
4.2 语义化 Class
| Class | 用途 |
|---|---|
.tool-section | 工具内容分区容器 |
.tool-title | 工具标题（含图标） |
.tool-row | 横向排列容器（替代内联 display:flex） |
.tool-input-group | 输入项容器（label + input） |
.tool-label | 表单标签 |
.tool-input | 文本输入框 |
.tool-textarea | 多行文本域 |
.tool-btn | 通用按钮 |
.tool-btn-primary | 主要操作按钮 |
.tool-btn-group | 按钮组 |
.tool-result | 结果展示区 |
.tool-copy-btn | 复制按钮 |
五、暗色模式适配
工具页面通过两级变量机制实现暗色模式无缝切换：
- CSS 变量层：所有颜色通过
var(--xxx, #fallback)引用，暗色变量在[data-theme="dark"]下全局切换 - JS 动态层：JavaScript 中生成的元素颜色也改用 CSS 变量引用
1// 旧写法（硬编码）
2color: '#3b82f6'
3
4// 新写法（变量化）
5color: 'var(--primary-color,#667eea)'
六、扩展机制
添加新工具只需两步：
data/tools.toml新增一条工具记录layouts/partials/tools/{id}.html创建工具实现
无需修改任何 Go 代码或前端路由，Hugo 会自动发现新页面。
后台管理系统也提供完整的 CRUD 操作：views/Tools/Index.vue → GET/PUT /api/tools → 全量读写 data/tools.toml。
七、技术演进
| 版本 | 时间 | 变化 |
|---|---|---|
| v1.1.0 | 2026-05-30 | 首次上线，37 个外链工具（站长工具、SoJSON 等） |
| v1.5.4 | 2026-06-04 | 全面自建化，URL 替换为 /tools/{id}/，42 个纯前端工具 |
| v1.5.5 | 2026-06-05 | 扩展至 131 个工具、15 个分类，暗色模式+表单规范全面统一 |
八、总结
在线工具集的设计体现了几个核心原则：
- 数据驱动：所有工具元数据集中在
data/tools.toml，Hugo 原生读取，零额外依赖 - 可扩展：添加新工具 = 新增 TOML 记录 + 一个 partial 文件，改动量极小
- 纯前端：所有工具逻辑在浏览器端运行，无需后端计算支持
- 统一规范：CSS 变量 + 语义化 class，确保 100+ 个工具页面风格一致
- 暗色友好：两级变量体系，自动适配亮/暗主题
这套架构让博客从一个静态内容站点，拓展成了一个功能完备的在线工具箱，真正做到了"一个站点，多种用途"。
留言评论
期待你的想法评论加载中