上个帖子分享了自己的个人导航页，整理了一下发出来，有需要的可以拿去用，或者改成自己喜欢的样子
https://www.nodeseek.com/post-390620-1
预览：


Navigation · 个人导航页

一个简洁、美观、实用的个人导航页，支持图标展示、自定义分类、响应式布局，适合自部署和私人站点跳转入口使用。

预览图：

✨ 功能特点

  • 🧭 分类清晰：支持“网站服务”、“穿透服务”、“内网服务”等多级分类；
  • 🖼 图标美观：使用 FontAwesome 免费图标；
  • 📱 响应式设计：在手机、平板和桌面端均显示良好；
  • 🧩 数据配置：导航内容由 navigation.json 控制，便于维护和更新；
  • 🌌 可自定义背景：支持根据设备分辨率使用不同的随机背景 API。

📁 项目结构说明

navigation/├── xiny/                       # 存放静态资源│   ├── favicon.ico             # 页面图标│   └── fontawesome/            # FontAwesome 图标（CDN 加速镜像）├── index.html                  # 主页面，导航展示逻辑和前端代码└── navigation.json             # 配置文件，定义所有导航链接和图标

🧾 navigation.json 格式说明

navigation.json 是一个结构化的 JSON 文件，用于管理所有导航链接。大致结构如下：

{  "分类名": [    {      "name": "显示名称",      "url": "https://example.com/",      "icon": "fa-solid fa-icon-name"    }  ]}

  • name：链接的名称；

  • url：点击后跳转的地址；

  • icon：FontAwesome 图标的类名，例如 fa-solid fa-film；

🚀 快速开始

方式一：本地浏览器打开

  1. 克隆仓库：

    git clone https://github.com/xinycai/navigation.gitcd navigation

  2. 用浏览器打开 index.html 即可访问导航页。

方式二：部署到服务器

  1. 上传整个项目到你的服务器，例如 /www/navigation；
  2. 配置 Nginx/Caddy/apache 等 Web 服务指向该目录；
  3. 打开浏览器访问对应地址即可。

⚙️ 自定义配置

修改导航数据

编辑 navigation.json 文件，自定义你自己的分类和跳转链接，格式详见上文。

修改背景图片 API

index.html 第 490 行附近存在背景 API 的调用逻辑：

const baseUrl = window.innerWidth <= 768    ? 'https://img-api.wuxie.de/acg/13/sp'    : 'https://img-api.wuxie.de/acg/13/sp';

你可以将 baseUrl 替换为你自己的随机图片 API 地址，例如：

const baseUrl = 'https://api.example.com/random-wallpaper';

📌 依赖说明

  • 无需构建、无需依赖环境；
  • 页面中使用了 FontAwesome 图标；
  • 可直接在本地或任意支持 HTML 的环境中运行。

📷 示例用途

本导航页适合：

  • 私人站点总入口
  • 内网服务汇总
  • 自建服务门户
  • 家庭网络管理面板

感谢使用！欢迎 Star ⭐ 支持这个项目！
https://github.com/xinycai/navigation

如果觉得有用的话，给我一个免费的鸡腿吧，万分感谢！