如何在 FckSignups 中新增一个工具分类：完整开发流程

如何在 FckSignups 中新增一个工具分类：完整开发流程

【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups

FckSignups（现名 NoSignups）是一个精选开源在线工具的导航站，收录了 200+ 款无需注册、即开即用的浏览器工具。本文带你完整走一遍FckSignups 新增工具分类的开发流程：从克隆仓库、在tools.json中定义新分类，到前端筛选栏自动生效，每一步都附对应文件路径，新手也能照做完成。

一、先了解项目：工具与分类的数据驱动设计 🧭

FckSignups 是一个 React + TypeScript 项目，它最大的特点是数据与代码分离：

• 所有工具与分类都存放在根目录的 tools.json 中；
• 前端组件不"写死"任何分类，而是读取 JSON 动态渲染。

这意味着：新增一个分类，本质上就是往tools.json的categories数组里加一个对象，前端筛选栏会自动出现新按钮。

分类对象的类型定义在 src/types/index.ts：

export interface Category { id: string; // 唯一标识，工具通过它关联分类 name: string; // 按钮上显示的名称 icon: string; // 图标（emoji 或符号） description: string; // 悬停提示文案 }

二、准备工作：克隆仓库并启动项目 ⚡

在终端执行以下命令，克隆仓库并启动开发服务器：

git clone https://gitcode.com/GitHub_Trending/fc/FckSignups cd FckSignups npm install npm run dev

启动后浏览器访问本地开发地址，即可看到顶部的分类筛选栏（All、Productivity、Design 等按钮）。

三、核心步骤：在 tools.json 中定义新分类 ✏️

打开 tools.json，文件开头就是categories数组。在数组中新增一个对象即可，例如添加一个"视频剪辑"分类：

{ "id": "video", "name": "Video Editing", "icon": "🎞️", "description": "Cut and edit video clips right in the browser" }

4 个字段说明：

💡注意：id是整个关联体系的"钥匙"。每个工具的category字段必须与某个分类的id完全一致，否则该工具不会出现在筛选结果中（参考 src/data/schema.js 了解数据结构的 SEO 约定，字段规范见 README.md 中的 Tool schema 表格）。

四、数据流解析：新分类如何出现在页面上 🔍

保存tools.json后刷新页面，新按钮就会出现在筛选栏。背后的数据流如下：

1. 加载数据：src/hooks/useTools.ts 中的load()会优先读取开发环境的本地 tools.json（DEV_JSON_URL），生产环境则读取远端 JSON；
2. 兜底注入all：hydrate()函数（useTools.ts）会自动检查是否存在id为all的分类，没有就补一个，保证"全部"筛选永远可用；
3. 自动渲染：src/components/Home/ToolFilters/ToolFilters.tsx 对categories数组做map渲染，同时为每个分类自动统计工具数量并显示在按钮角标上——你不需要写任何组件代码。

tools.json ──fetch──▶ useTools() ──categories──▶ ToolFilters.tsx │ (按钮 + 数量角标) └──tools──▶ 分类筛选 + 搜索排序

五、可选增强：同步兜底数据 🛟

当远端 JSON 加载失败时，站点会使用内置的兜底数据 src/constants/fallbackData.ts 渲染页面。如果你的新分类很重要，可以同步在该文件的categories数组里添加一条相同结构的记录，保证断网或拉取失败时筛选栏依然完整。

六、为新分类添加工具：使用 addTool.py 📝

分类建好后，把工具归入其中。项目提供了管理脚本 management_tools/addTool.py：

cd management_tools python addTool.py

脚本会交互式询问 name、url、category、tags 等字段，并自动完成两件事：

• 用slugify()把工具名转成 URL 友好的id；
• 把新工具追加到 tools.json 的tools数组。

运行时脚本会先打印所有分类id供你选择，填入上一步定义的id（如video）即可。每个工具建议配 3~5 个 tags、描述控制在 140 字符以内（贡献规范见 README.md）。

七、验证清单 ✅

提交前逐项确认：

• tools.json中新分类的id唯一且无拼写错误
• 归入该分类的工具category字段与id完全一致
• 本地npm run dev下新按钮显示正常、角标数量正确
• 搜索关键词时新分类的工具能被命中（匹配逻辑在 useTools.ts 的matchScore）

小结

FckSignups 的分类系统完全由 tools.json 驱动：改一份 JSON，前端自动更新。核心链路只有三个文件——tools.json（数据源）、src/hooks/useTools.ts（加载与筛选）、src/components/Home/ToolFilters/ToolFilters.tsx（按钮渲染）。掌握了这条链路，无论是新增分类还是维护工具列表，都能事半功倍。

【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups