FckSignups 徽章系统扩展指南5 步新增一个状态标记的完整教程【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignupsFckSignups现名 NoSignups是一个精选开源、免注册、浏览器即开即用的在线工具目录。它的徽章系统Badge System负责在工具卡片上显示状态标记比如「Featured」「Editors Pick」「New」「Abandoned」帮助用户一眼识别工具的含金量与维护状态。本文是一份面向新手的完整教程带你看懂 FckSignups 徽章系统的运作原理并手把手新增一个自定义状态标记例如「Beta」或「Deprecated」全程只需改动 3 个文件。一、徽章系统是什么FckSignups 现有 4 种状态标记FckSignups 的徽章并非独立模块而是由数据字段驱动的展示逻辑tools.json里每个工具对象携带标记字段前端卡片组件读取后渲染出对应的徽章。目前共有两类字段、四种徽章徽章驱动字段数据来源效果Featured精选section: featured数据文件橙色徽章 卡片渐变背景 置顶分区Editors Pick编辑精选section: editors-pick数据文件徽章 独立分区New新项目flag: new数据文件亮色小徽章悬停显示提示Abandoned已弃维护flag: abandoned数据文件灰色删除线徽章此外还有一个隐藏状态notRecommendedReason字段会让卡片变暗并显示 ⚠️ 警告图标点击可弹出原因说明。理解这一点很关键徽章 类型定义 数据值 渲染分支 样式类四者缺一不可。这也正是我们新增状态标记要做的四件事。二、准备工作一键拉取仓库并本地运行扩展前先让项目跑起来验证效果才方便。打开终端执行git clone https://gitcode.com/GitHub_Trending/fc/FckSignups cd FckSignups npm install npm run dev项目是标准的 React TypeScriptVite工程启动后浏览器会自动打开本地页面。数据文件 tools.json 位于仓库根目录前端通过 useTools.ts 加载并解析它开发环境直接读取本地文件修改后刷新即可生效无需额外构建步骤。三、新增状态标记的 5 个步骤下面以新增一个「Beta」测试版状态标记为例演示完整流程。步骤 1在 TypeScript 类型中定义新标记打开类型定义文件 src/types/index.ts你会看到徽章值的字典export type ToolSection featured | editors-pick | meets-criteria; export type ToolFlag new | abandoned;这两个联合类型就是所有合法徽章值。给ToolFlag追加一个新值即可export type ToolFlag new | abandoned | beta;如何选择字段如果新标记只是装饰性状态如 Beta、Deprecated挂到flag上最安全如果需要像 Featured 那样改变页面分区才考虑扩展ToolSection会牵连更多文件见第五节避坑指南。步骤 2在数据文件中写入标记值编辑根目录的 tools.json给目标工具对象加一行字段即可。现有数据的写法参考文件前 100 行例如{ id: excalidraw, name: Excalidraw, section: featured }给某个工具添加 Beta 标记{ id: my-tool, name: My Tool, flag: beta }flag是可选字段不影响必填字段的校验逻辑可以放心添加。步骤 3在卡片组件中渲染新徽章徽章的渲染逻辑集中在 ToolCard.tsx 的.toolBadges容器里。现有写法是按字段值 常量逐个条件渲染例如{tool.flag new ( span className{${s.flagBadge} ${s.flagNew}} titleBrand new project New /span )}照葫芦画瓢在相邻位置追加一段即可{tool.flag beta ( span className{${s.flagBadge} ${s.flagBeta}} titleProject is in beta Beta /span )}title属性会成为鼠标悬停时的提示文案记得填写。步骤 4为徽章编写专属样式打开 ToolCard.module.css。现有徽章样式分为两层通用的.flagBadge等宽字体、大写、小字号 各状态专属的配色类比如.flagNew用强调色底、.flagAbandoned用灰底加删除线。新徽章只需复制一段配色类.flagBeta { background: var(--accent-2); color: #000; }CSS 变量--accent、--accent-2等定义在 src/styles/index.css 中直接复用可以保证新徽章与现有视觉风格完全一致无需手动取色。步骤 5本地验证与自检清单刷新本地页面找到刚加标记的工具逐项确认✅ 徽章出现在卡片右上角.toolBadges容器内✅ 悬停徽章能看到title提示文案✅ 徽章配色与站点主题变量协调未破坏卡片布局✅ 搜索该工具、切换分类时徽章稳定显示✅ 未加标记的工具卡片无任何变化不产生副作用全部通过即完成。整个扩展只改动了 3 个文件类型、数据、组件 样式。四、进阶场景让新标记参与页面分区如果你的新状态比如 Editors Choice 2026需要像 Featured 一样拥有独立页面分区则要走ToolSection路线额外改动两处useTools.ts 中的sectionize()函数——它把工具数组拆成 featured / editorsPicks / meetsCriteria 三组Tools.tsx 中的sectionVariantClass映射与分区渲染——它决定每个分区的标题和样式。这类改动会影响页面整体结构建议先在本地充分回归再提交。对于绝大多数状态标记需求New、Beta、Deprecated、Unstable……flag路线已足够强烈优先选用。五、避坑指南新增徽章的 3 个常见陷阱⚠️陷阱 1类型忘了同步。只在数据文件里写了新值、没更新ToolFlagTypeScript 构建会报类型错误。务必先改 types/index.ts 再写数据。⚠️陷阱 2徽章堆叠溢出。.toolBadges是绝对定位在卡片右上角的横向容器同一工具同时命中多个标记时会依次排开。徽章文案尽量短1 个单词避免挤占标题空间。⚠️陷阱 3误改分区逻辑。flag与section是两套独立机制——flag只影响卡片角标section同时影响分区归属、卡片背景cardFeatured渐变和排序。混淆两者是最常见的回归来源。六、关键文件速查表文件作用src/types/index.ts徽章取值定义ToolFlag/ToolSectiontools.json工具数据源徽章值的实际载体src/components/Home/Tools/ToolCard/ToolCard.tsx徽章渲染逻辑src/components/Home/Tools/ToolCard/ToolCard.module.css徽章样式与配色src/hooks/useTools.ts数据加载与分区逻辑进阶才需改动README.md工具数据 Schema 与字段说明写在最后FckSignups 的徽章系统设计得相当克制一个数据字段、一段条件渲染、一个样式类三者对应、互不纠缠这正是它适合新手二次扩展的原因。掌握本文的 5 步流程后你完全可以为项目加上「Deprecated」「Community」「Premium-free」等任意新状态标记——而每个徽章背后都是开源社区让工具自己说话的哲学。【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
FckSignups 徽章系统扩展指南5 步新增一个状态标记的完整教程【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignupsFckSignups现名 NoSignups是一个精选开源、免注册、浏览器即开即用的在线工具目录。它的徽章系统Badge System负责在工具卡片上显示状态标记比如「Featured」「Editors Pick」「New」「Abandoned」帮助用户一眼识别工具的含金量与维护状态。本文是一份面向新手的完整教程带你看懂 FckSignups 徽章系统的运作原理并手把手新增一个自定义状态标记例如「Beta」或「Deprecated」全程只需改动 3 个文件。一、徽章系统是什么FckSignups 现有 4 种状态标记FckSignups 的徽章并非独立模块而是由数据字段驱动的展示逻辑tools.json里每个工具对象携带标记字段前端卡片组件读取后渲染出对应的徽章。目前共有两类字段、四种徽章徽章驱动字段数据来源效果Featured精选section: featured数据文件橙色徽章 卡片渐变背景 置顶分区Editors Pick编辑精选section: editors-pick数据文件徽章 独立分区New新项目flag: new数据文件亮色小徽章悬停显示提示Abandoned已弃维护flag: abandoned数据文件灰色删除线徽章此外还有一个隐藏状态notRecommendedReason字段会让卡片变暗并显示 ⚠️ 警告图标点击可弹出原因说明。理解这一点很关键徽章 类型定义 数据值 渲染分支 样式类四者缺一不可。这也正是我们新增状态标记要做的四件事。二、准备工作一键拉取仓库并本地运行扩展前先让项目跑起来验证效果才方便。打开终端执行git clone https://gitcode.com/GitHub_Trending/fc/FckSignups cd FckSignups npm install npm run dev项目是标准的 React TypeScriptVite工程启动后浏览器会自动打开本地页面。数据文件 tools.json 位于仓库根目录前端通过 useTools.ts 加载并解析它开发环境直接读取本地文件修改后刷新即可生效无需额外构建步骤。三、新增状态标记的 5 个步骤下面以新增一个「Beta」测试版状态标记为例演示完整流程。步骤 1在 TypeScript 类型中定义新标记打开类型定义文件 src/types/index.ts你会看到徽章值的字典export type ToolSection featured | editors-pick | meets-criteria; export type ToolFlag new | abandoned;这两个联合类型就是所有合法徽章值。给ToolFlag追加一个新值即可export type ToolFlag new | abandoned | beta;如何选择字段如果新标记只是装饰性状态如 Beta、Deprecated挂到flag上最安全如果需要像 Featured 那样改变页面分区才考虑扩展ToolSection会牵连更多文件见第五节避坑指南。步骤 2在数据文件中写入标记值编辑根目录的 tools.json给目标工具对象加一行字段即可。现有数据的写法参考文件前 100 行例如{ id: excalidraw, name: Excalidraw, section: featured }给某个工具添加 Beta 标记{ id: my-tool, name: My Tool, flag: beta }flag是可选字段不影响必填字段的校验逻辑可以放心添加。步骤 3在卡片组件中渲染新徽章徽章的渲染逻辑集中在 ToolCard.tsx 的.toolBadges容器里。现有写法是按字段值 常量逐个条件渲染例如{tool.flag new ( span className{${s.flagBadge} ${s.flagNew}} titleBrand new project New /span )}照葫芦画瓢在相邻位置追加一段即可{tool.flag beta ( span className{${s.flagBadge} ${s.flagBeta}} titleProject is in beta Beta /span )}title属性会成为鼠标悬停时的提示文案记得填写。步骤 4为徽章编写专属样式打开 ToolCard.module.css。现有徽章样式分为两层通用的.flagBadge等宽字体、大写、小字号 各状态专属的配色类比如.flagNew用强调色底、.flagAbandoned用灰底加删除线。新徽章只需复制一段配色类.flagBeta { background: var(--accent-2); color: #000; }CSS 变量--accent、--accent-2等定义在 src/styles/index.css 中直接复用可以保证新徽章与现有视觉风格完全一致无需手动取色。步骤 5本地验证与自检清单刷新本地页面找到刚加标记的工具逐项确认✅ 徽章出现在卡片右上角.toolBadges容器内✅ 悬停徽章能看到title提示文案✅ 徽章配色与站点主题变量协调未破坏卡片布局✅ 搜索该工具、切换分类时徽章稳定显示✅ 未加标记的工具卡片无任何变化不产生副作用全部通过即完成。整个扩展只改动了 3 个文件类型、数据、组件 样式。四、进阶场景让新标记参与页面分区如果你的新状态比如 Editors Choice 2026需要像 Featured 一样拥有独立页面分区则要走ToolSection路线额外改动两处useTools.ts 中的sectionize()函数——它把工具数组拆成 featured / editorsPicks / meetsCriteria 三组Tools.tsx 中的sectionVariantClass映射与分区渲染——它决定每个分区的标题和样式。这类改动会影响页面整体结构建议先在本地充分回归再提交。对于绝大多数状态标记需求New、Beta、Deprecated、Unstable……flag路线已足够强烈优先选用。五、避坑指南新增徽章的 3 个常见陷阱⚠️陷阱 1类型忘了同步。只在数据文件里写了新值、没更新ToolFlagTypeScript 构建会报类型错误。务必先改 types/index.ts 再写数据。⚠️陷阱 2徽章堆叠溢出。.toolBadges是绝对定位在卡片右上角的横向容器同一工具同时命中多个标记时会依次排开。徽章文案尽量短1 个单词避免挤占标题空间。⚠️陷阱 3误改分区逻辑。flag与section是两套独立机制——flag只影响卡片角标section同时影响分区归属、卡片背景cardFeatured渐变和排序。混淆两者是最常见的回归来源。六、关键文件速查表文件作用src/types/index.ts徽章取值定义ToolFlag/ToolSectiontools.json工具数据源徽章值的实际载体src/components/Home/Tools/ToolCard/ToolCard.tsx徽章渲染逻辑src/components/Home/Tools/ToolCard/ToolCard.module.css徽章样式与配色src/hooks/useTools.ts数据加载与分区逻辑进阶才需改动README.md工具数据 Schema 与字段说明写在最后FckSignups 的徽章系统设计得相当克制一个数据字段、一段条件渲染、一个样式类三者对应、互不纠缠这正是它适合新手二次扩展的原因。掌握本文的 5 步流程后你完全可以为项目加上「Deprecated」「Community」「Premium-free」等任意新状态标记——而每个徽章背后都是开源社区让工具自己说话的哲学。【免费下载链接】FckSignupsA list of tools that are open-source, in-browser, and require no-signups!项目地址: https://gitcode.com/GitHub_Trending/fc/FckSignups创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
