最近想给自己搭一个导航站，把平时收集的各种工具、资源都整理起来。网上搜了一圈，发现 One Nav 那个 WordPress 模板挺好看的，但我不想用 WordPress，太重了。干脆自己用 Nuxt 3 手搓一个。
为什么要做这个项目
其实一开始是想直接用 One Nav 的，但有几个顾虑：
- WordPress 太重 - 我就想要个静态页面，放一堆链接而已，用不着数据库和php那些环境。
- 想自己掌控 - 用别人的主题总有些细节改不了，不如自己写(vibecoding)
- 练手 Nuxt 3 - 正好借机熟悉一下 Nuxt 3 的 SSG 模式
- 原版One Nav效果 （老版本😀）
技术选型
- Nuxt 3 - 全栈框架，SSG 生成静态页面
- TypeScript - 类型安全，后期维护省心
- Tailwind CSS - 原子化 CSS，写样式快
- Element Plus - 组件库，菜单、抽屉这些直接用现成的（来回折腾几圈还是决定选择这个）
- Iconify - 图标库，彩色图标挺好看的（这个icon库是真的不错）
开发过程
第一阶段：基础框架
先搭了个最基本的结构：侧边栏菜单 + 内容网格。Element Plus 的 Menu 组件挺好用，支持二级菜单，正好用来分类。
数据直接写死在一个 json 文件里，反正导航站数据不会频繁变动，每次改完重新生成就行。（后续升级接口也方便）
第二阶段：UI 还原
One Nav 那个渐变背景挺好看的，我用 Tailwind 的 bg-gradient-to-br 复刻了一下。毛玻璃效果用 backdrop-blur 实现，现代浏览器都支持。
深色模式用 @nuxtjs/color-mode，配合 Element Plus 的 dark 主题，切换起来很顺滑。
第三阶段：功能完善
搜索功能 - 顶部栏加了个搜索框，支持 ⌘K 快捷键。用 useSearch composable 封装搜索逻辑，按名称、描述、标签过滤。
图标处理 - 一开始直接用网站的 favicon，但很多网站加载失败。后来加了兜底逻辑：先尝试原图标，失败则根据分类、域名、标签匹配对应的 Iconify 图标。
移动端适配 - Element Plus 的 Drawer 组件做移动端菜单，收起侧边栏，顶部放汉堡菜单。
第四阶段：数据整理
这是最耗时的部分。我从各种渠道收集了 200+ 个网站，分类整理：
- AI 工具（ChatGPT、Claude、Midjourney 等）
- Web3 相关（钱包、合约框架、开发工具）
- 前端生态（React、Vue、Node.js、构建工具）
- 游戏引擎、实用工具、资源导航...
每个网站都要找图标、写描述、打标签，挺费工夫的。
踩过的坑
图标加载 - 很多网站的 favicon 路径不标准，或者需要特殊处理。最后采用多级兜底策略：原图标 → 域名+favicon.ico → 分类默认图标 → 通用图标。
深色模式 - Element Plus 的暗色主题和 Tailwind 的 dark 类要同步，不然会出现组件暗色、页面亮色的割裂感。
移动端菜单 - 一开始用 absolute 定位底部按钮，结果菜单多了会重叠。后来改成 flex 布局，菜单区域 flex-1 overflow-auto，底部固定高度。
最终效果
桌面端：左侧彩色图标菜单，右侧网格卡片，顶部搜索栏 + GitHub/Gitee 链接。
移动端：汉堡菜单展开抽屉，分类菜单可滚动，底部有网站提交、友情链接、关于导航入口。
效果：
预览地址：https://nav.tianmiao.site/
源码
https://gitee.com/wangkai000/my-nuxt-nav
https://github.com/wangkai000/nuxt-one-nav
原版的WordPress版本的One Nav导航资源站
旧版：https://www.d1dns.com/ （差不多了）
官网新版：https://nav.iowen.cn/ （已经升级变了）