AI Website Cloner Template 查询/fragment URL 处理路由冲突检测与状态行为解析【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-templateAI Website Cloner Template 是一款一条命令克隆任意网站的 AI 编程模板把目标 URL 交给 Claude Code 等 AI 代理它就能把网站重建为一个干净的 Next.js 项目。当你在/clone-website命令中一次传入多个 URL 时真正考验工程质量的地方出现了——带查询参数query或锚点fragment的 URL如何映射成路由、如何避免覆盖已有页面。本文将完整解析这套机制帮助你在多页面克隆时不踩坑。为什么 query/fragment URL 是难点先弄清一个浏览器常识URL 协议 域名 路径pathname 查询串?a1 片段#anchor。URL 示例pathname克隆时的含义https://example.com/pricing/pricing独立页面直接映射为路由https://example.com/pricing?planpro/pricing同一路径 查询参数通常是同一页的不同状态https://example.com/pricing#faq/pricing同一路径 锚点指向页面内某个区块问题在于仅靠 query 或 fragment 区分的 URL 共享同一条 pathname。如果模板简单粗暴地一个 URL 一个路由文件这些链接会全部坍缩到同一个page.tsx互相覆盖。项目的技能文件中对此有明确定义多个 URL 时每个 pathname 必须保留为独立路由各目标的调研、截图、组件和素材必须隔离对共享 pathname 的 query/fragment 变体必须在输出计划中显式解决路由与状态行为。见 .claude/skills/clone-website/SKILL.md。防碰撞命名空间site-key 与 page-key模板的解法是给每个目标分配碰撞抗性collision-resistant的标识键规则写在 SKILL.md 的 Output Isolation 章节site-key可读的域名 slug含非默认端口 规范化 origin 的 SHA-256 前 8 位十六进制page-key保留路径段的 pathname slug 对规范化 pathname及其有状态的 query/fragment 做 SHA-256 取前 8 位根路径/使用root-hash也就是说/pricing、/pricing?planpro、/pricing#faq会生成不同的 page-key从而拥有各自独立的目录docs/research/site-key/page-key/ # 调研产物 docs/design-references/site-key/page-key/ # 截图 src/components/sites/site-key/page-key/ # 组件 public/sites/site-key/page-key/ # 素材 关键细节page-key 的哈希输入包含了有状态的 query/fragment且规则强调不能只依赖有损字符替换如简单地把特殊字符换成下划线这从根源上杜绝了两个不同 URL 算出同一个键的情况。路由冲突检测写入前的三道检查模板在正式写文件前会执行 Pre-Flight 阶段 的冲突检测核心流程如下盘点现有路由—— 检查src/app/**/page.tsx中所有已有路由、组件命名空间、调研产物与素材目录区分未动过的模板脚手架和已有的克隆/自研成果写出输出计划—— 列明每个目标 URL 的app-root、site-key、page-key、目标路由与产物根目录并与用户确认所有冲突点唯一性验证—— 写入前验证每条计划路由、每个产物根目录、下载器脚本文件名都唯一或是用户明确批准的共享位置当计划路由已存在时行为规则非常克制见 SKILL.md 的 Routing defaults停下来问用户更新该路由、换一条路由还是跳过——绝不擅自覆盖保留路径语义/docs/intro就映射为src/app/docs/intro/page.tsx源路径规范化后原样保留为 App Router URL转义保留字Next.js App Router 中_、、(、[ ]等会触发私有路由、动态段等语义必须以百分号编码形式命名文件夹避免意外创建 route group 或动态路由✅构建后验证完成前必须验证构建出的路由能在精确的规范化 URL 下解析这些能力在 CHANGELOG.md 0.4.0 版本 中也有对应记录Improved multi-origin and query/fragment planning with collision-resistant output namespaces and explicit route verification。状态行为解析query 与 fragment 各归其位路由冲突解决后还需回答这些 URL 在克隆品里表现为什么。模板的分工逻辑是变体类型推荐处理行为依据独立 pathname独立路由文件App Router 默认规则?query变体映射为可切换的页面状态tab/筛选/变体或用户指定的独立路由输出计划中显式声明#fragment锚点页面内锚点 对应区块组件目标页真实交互模型这里有个重要理念交互模型必须先判定再动手写。模板要求区分每个区块是点击驱动、滚动驱动、悬停驱动还是时间驱动——查询参数切换的内容往往是点击式状态切换而锚点滚动常与滚动驱动联动。完整的检查清单见 docs/research/INSPECTION_GUIDE.md它规定了每个组件要记录变体、状态、交互与动画。多源克隆的边界不同域名怎么办如果传入的 URL 来自不同 origin域名它们的字体、全局 CSS、布局、元数据可能互相冲突。模板的处理原则SKILL.md L51修改文件前先询问用户是各 origin 使用独立准备好的 Next.js 项目根推荐还是构建一个有意合并的多站应用路由级样式隔离禁止未批准的 monorepo禁止静默混用全局基础文件整个克隆流水线侦察 → 基础 → 组件规格 → 并行构建 → 组装 QA在 README.md 的 How It Works 章节有概览代理的总行为准则见 AGENTS.md。小结query/fragment URL 处理看似细节实则是多 URL 克隆能否共存不打架的关键防碰撞site-key page-key 双层哈希命名空间query/fragment 参与 page-key 哈希检测冲突写文件前盘点路由、输出计划与用户确认、构建后精确验证状态解析共享 pathname 的变体按真实交互模型映射为状态或锚点而非强行拆成页面这套先规划、后动手、全程可审计的机制正是该项目能在 GitHub 上持续获得关注的原因——它的 Star 曲线如下【免费下载链接】ai-website-cloner-templateClone any website with one command using AI coding agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai-website-cloner-template创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
