NoSignups (FckSignups)
NoSignups 本地入门:添加一条符合当前结构的测试记录
理解 Vite 开发流程、实际 Tool 类型与数据回退,用无副作用记录检查分类、搜索和编辑分组。
你将学会
- 有卡片不代表本地数据加载成功。
- 当前记录使用 section 和明确的 tags 数组。
- 分类筛选与全词匹配都需要测试。
开始前需要
- 基础 JavaScript 和 JSON 知识
- 一个无敏感任务样本与目录测试记录
解释本章边界,并用建议样例或审查记录进行核验。
先看结论
- 有卡片不代表本地数据加载成功。
- 当前记录使用 section 和明确的 tags 数组。
- 分类筛选与全词匹配都需要测试。
先确定正在查看哪份数据
README 的安装流程是克隆仓库、执行 npm install,再运行 npm run dev。package.json 把 dev 映射到 Vite,把 build 映射到 tsc 后接 vite build,preview 则调用 vite preview。运行前应检查仓库和依赖安装脚本。本文提供操作流程,不声称编辑审查期间已经安装并启动完整上游应用。
开发模式的 useTools 先尝试 DEV_JSON_URL,即 ../../../tools.json;失败后尝试远程生产 JSON,最后使用内嵌回退数据。因此,本地编辑后页面仍有卡片,并不能证明修改文件已经加载。应检查浏览器实际请求的地址和响应,再确认带有唯一名称的测试记录出现。
当前类型定义优先于过时表格
在已检查版本中,Tool 要求 tags 数组,section 的取值是 featured、editors-pick 或 meets-criteria。README 却将 tags 写成可选项,并介绍旧 featured 布尔值。直接照旧表格编写记录,可能不符合当前前端的预期。分类标识也不同于显示名称,应使用实际加载数据里存在的分类 ID。
测试记录应包含唯一 id、简短名称和描述、有效测试地址、现有分类和明确的 tags 数组。示例里的 example.com 是无敏感占位地址,不是真实工具。把记录加入 tools.json 测试副本的 tools 数组,不要向公共项目提交测试内容,也不要为了套用例子覆盖真实记录。
验证从查询到卡片的整条路径
选择名称和标签足够明确的测试记录,先搜索两个已知词,再切换到另一分类,确认卡片消失。搜索要求所有查询词都匹配,范围是名称、描述和标签,不包括目标 URL 或源码 URL。多个词可以分别出现在不同字段,因此它不等同于连续短语搜索。
最后检查空查询、无结果查询和非拉丁文字查询。当前分词器只保留小写 ASCII 字母、数字与加号,纯中文查询会变成空词列表。这是需要理解和测试的现有行为,并不是多语言搜索能力。在宣称安装适合多语言读者前,应把这些结果记录清楚。
实施步骤
- 1
审查仓库并克隆到隔离工作目录。
- 2
安装依赖、启动开发服务并检查 JSON 请求。
- 3
使用现有分类 ID 添加测试记录。
- 4
检查匹配、无匹配与非拉丁文字输入。
可复制示例
{
"id": "fixture-json-formatter",
"name": "JSON 格式化测试记录",
"description": "无敏感目录测试记录,不是真实托管工具。",
"url": "https://example.com/",
"category": "development",
"tags": [
"json",
"formatter",
"fixture"
],
"section": "meets-criteria"
}常见问题
为什么修改的记录没有出现?
先看实际 JSON 请求是否回退到了 GitHub 或内嵌数据,再核对分类和搜索条件。
可以像 README 所说那样省略 tags 吗?
当前 Tool 类型要求 tags,匹配函数也会展开它。应显式提供数组,并验证外部记录,不能只依赖旧说明。
资料来源
- README.md来源核查 2026-09-07
- package.json来源核查 2026-09-07
- vite.config.mts来源核查 2026-09-07
- src/hooks/useTools.ts来源核查 2026-09-07
- src/components/Home/Tools/Tools.tsx来源核查 2026-09-07
- src/components/Home/Tools/ToolCard/ToolCard.tsx来源核查 2026-09-07
- src/types/index.ts来源核查 2026-09-07
- src/constants/fallbackData.ts来源核查 2026-09-07
- src/data/schema.js来源核查 2026-09-07
- cloudflare-worker/worker.ts来源核查 2026-09-07
- cloudflare-worker/urlHandlers/handleSubmitTool.ts来源核查 2026-09-07
- cloudflare-worker/utils.ts来源核查 2026-09-07