一个简单好用的导航网站

前言

在日常学习中，我们往往会收藏众多的网站以及工具。鉴于此，我萌生出制作一个导航网站的想法，旨在将日常常用的网站与工具进行整合，从而更便于学习。由于该项目的难度相对较低，所以就不对代码做过多解读了，大家可以自行下载代码去阅读和学习。

需求分析

布局

• 头部信息栏：具备基本的展示及相关功能，同时设有切换主题功能，方便用户根据自身喜好和使用场景来切换不同的主题样式。
• 左侧导航栏：为用户提供清晰的导航分类，便于快速定位到所需的功能板块或对应的网站工具入口。
• 右侧卡片信息区域：用来展示各类具体的网站、工具等相关信息，呈现直观且便于浏览。
• 底部：设置为页脚，包含一些诸如版权、相关说明等基础信息。

技术选型

本项目选用了 next.js + tailwindcss + shadcn/ui 这几种技术。鉴于项目本身较为简单，所以并没有堆砌过多的技术栈，通过这几种实用的技术就足以搭建起功能完备的导航网站。

功能介绍

• 自带前端导航模块：有着专门的前端导航模块，使得整个导航网站的引导性更强，用户操作起来更加便捷流畅。
• 移动端适配：充分考虑到当下移动设备使用的普遍性，针对移动端进行了适配优化，无论用户是在手机还是平板上访问，都能获得良好的使用体验。
• 支持站内搜索：提供站内搜索功能，当用户需要查找特定的网站或工具时，只需输入关键词，就能快速定位到相应内容，极大地提高了查找效率。
• 可通过 JSON 自定义导航数据：用户能够借助 JSON 来对导航数据进行自定义，按照自己的需求和偏好灵活调整网站展示的内容和顺序等，满足个性化的使用要求。
• 支持日夜颜色模式切换：考虑到不同使用场景下的视觉舒适度，提供了日夜颜色模式切换功能，用户可以根据所处环境轻松切换，保护眼睛的同时也提升了使用体验。
• 支持 Vercel 直接部署上线：方便快捷地通过 Vercel 进行部署上线，大大降低了项目的部署门槛，让使用者能够更迅速地将网站投入使用。

说明

此项目是完全开源的，仅供大家在学习交流过程中使用，希望能给大家在整合学习资源等方面带来便利。