零依赖零构建原生静态 AI 工具导航页｜可直接部署开源模板

thumbsai-nav 演示地址：https://demo.xishuzy.com/ai-nav/index.html

AI 导航 · 纯静态源码说明与使用手册

一款零依赖、零构建的 AI 工具导航页。所有源码为原生 HTML / CSS / JavaScript，双击 index.html 即可在浏览器打开，也可直接上传到任意静态服务器（虚拟主机、对象存储、GitHub Pages 等）使用，全程无需 Node、npm 或命令行。

一、文件结构

ai-nav/
├── index.html    页面结构 + SEO 元信息 + 结构化数据
├── style.css     视觉样式（深色科技风、玻璃拟态、响应式）
└── script.js     站点数据 + 渲染逻辑 + 搜索 / 分类 / 交互

共 3 个文件，无外部依赖、无打包步骤。

二、主要特性

AI 科技感视觉：深空黑底色、霓虹青紫渐变主色、玻璃拟态卡片、Canvas 粒子星网动态背景。
实时搜索：顶部搜索框按名称 / 描述 / 网址匹配并高亮，按 / 快速聚焦、Esc 清空。
分类侧边栏：分类导航 + 滚动自动高亮当前分区，底部展示收录站点数与分类数。
网站图标自动获取：自动抓取各站点 favicon，失败回退首字母占位。
响应式布局：桌面端侧边栏 + 卡片网格，移动端自动切换为横向滑动分类 + 两列卡片。
回到顶部：滚动一定距离后浮现回顶按钮。
SEO 友好：完整 meta 标签、Open Graph / Twitter Card、JSON-LD 结构化数据、语义化标签，利于搜索引擎快速收录。

三、快速使用

本地预览

直接双击 index.html 即可在浏览器查看效果。

上线部署

将 index.html、style.css、script.js 三个文件保持同级目录一起上传到服务器根目录（或任意子目录）即可，无需任何额外配置。

四、如何添加 / 修改网站

所有站点数据集中在 script.js 顶部的 SITES 数组中，按以下格式增删即可，无需改动 HTML 或 CSS：

{name:"站点名称", url:"https://example.com", desc:"一句话简介", cat:"分类名称", tag:"标签"}

字段说明：

字段	必填	说明
`name`	是	站点显示名称
`url`	是	站点跳转地址（完整 https 链接）
`desc`	是	一句话描述，用于搜索匹配与卡片展示
`cat`	是	所属分类，需与下方分类名称一致
`tag`	否	角标，如 `热门` / `国内`，留空字符串 `""` 表示不显示

示例：

{name:"新站点", url:"https://new.site", desc:"这是一个新收录的 AI 工具", cat:"对话大模型", tag:"热门"}

提示：修改后保存文件，刷新浏览器即可看到变化。

五、分类管理

分类由数据自动生成，无需手写导航。只需在 SITES 中使用了某个 cat 值，侧边栏与分区就会自动出现该分类。

如需调整分类的展示顺序或图标，可修改 script.js 中的 CAT_ICONS 映射（分类名 → emoji 图标）：

var CAT_ICONS={
  "对话大模型":"💬",
  "AI 绘画 / 图像":"🎨",
  "AI 视频":"🎬"
  // …其余分类
};

当前内置分类：对话大模型、AI 绘画 / 图像、AI 视频、AI 音频 / 音乐、AI 写作 / 办公、AI 编程、AI 设计、开发平台 / API、AI 学习 / 资讯。

六、视觉自定义

整体配色与风格集中在 style.css 顶部的 CSS 变量中，修改即可全局换肤：

:root{
  --bg:#070a14;          /* 页面底色 */
  --cyan:#38f0ff;        /* 主色（霓虹青） */
  --purple:#9b6bff;      /* 辅助渐变紫 */
  --pink:#ff5cc8;        /* 点缀粉 */
  /* … */
}

常用可调项：

页面主色 / 渐变：修改 --cyan、--purple、--pink
卡片悬停动效：搜索 .card:hover 调整位移与发光
粒子背景密度：修改 script.js 中粒子数量计算（Math.min(90, …)）

七、SEO 相关

index.html 已内置搜索引擎优化结构，常规情况下无需改动：

<title> / description / keywords / author / robots / canonical 等元标签
Open Graph 与 Twitter Card 社交分享标签
JSON-LD 结构化数据（WebSite / Organization / BreadcrumbList）
语义化 header / main / section / footer 标签

如需更换主域名，请同步修改 index.html 中的 canonical、og:url 及 JSON-LD 里的网址。

八、常见问题

Q：为什么站点图标有些显示不出来？ A：图标由公共 favicon 服务按域名获取，个别站点可能因网络或防盗链无法加载，会自动回退为名称首字母，不影响功能。

Q：能否加更多分类？ A：可以。在 SITES 里使用新的 cat 名称即可，导航与分区会自动生成；如需自定义图标，在 CAT_ICONS 中补充对应映射。

Q：支持部署到子目录吗？ A：支持。只要三个文件保持同级，放在任意子目录下均可正常访问。

Q：需要服务器环境或数据库吗？ A：不需要。纯静态文件，任意支持静态文件托管的环境均可运行。下载地址：https://pan.quark.cn/s/7238028e564a