一个简洁、纯HTML静态的个人导航站——XG-Nav

共计 2834 个字符，预计需要花费 8 分钟才能阅读完成。

内置了可视化编辑器，访问 /editor.html 即可快速配置。

• 在线体验：nav.xiaoge.de/editor.html

• 🎨 简约现代风格
• 🌓 深浅色主题切换
• 🔍 多搜索引擎支持
• 📱 响应式设计，适配移动端
• ⚡ 纯静态页面，极速加载
• 📂 分类管理，支持自定义分组
• 🐳 Docker 容器化部署
• 🔧 灵活配置，支持环境变量和配置文件
• 🏷️ 动态标题，根据配置自动更新页面标题
• 🔍 搜索功能，快速查找导航链接
• ⚡ 性能优化，图标懒加载和缓存机制
• 🎯 SEO 友好，支持自定义 meta 信息

创建 docker-compose.yml 文件：

services:
  xg-nav:
    image: verky/xg-nav:latest
    container_name: xg-nav
    ports:
      - "26180:80"  # 可自定义端口
    environment:
      # - SITE_TITLE= 网站标题
      # - SITE_DESCRIPTION= 网站描述
      # - COPYRIGHT= 版权信息，支持 HTML（留个项目地址呗~）
      - CARD_CONTENT=0  # 0= 显示描述信息，1= 显示链接 URL
      # - SHOW_FAVICON=1  # 1= 显示 favicon 图标，0= 不显示
      # - DEFAULT_ENGINE=bing  # 默认搜索引擎
    restart: unless-stopped
    volumes:
      - ./data:/usr/share/nginx/html/data
      - ./ico:/usr/share/nginx/html/ico  # 自定义图标目录（本地名 / 文件）

docker run -d \
  --name xg-nav \
  -p 26180:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data \
  --restart unless-stopped \
  verky/xg-nav:latest

$(pwd)/data 替换为实际路径

如需自定义网站信息，可添加环境变量：

docker run -d \
  --name xg-nav \
  -p 26180:80 \
  -e SITE_TITLE="网站标题" \
  -e SITE_DESCRIPTION="网站描述" \
  -e COPYRIGHT="版权信息，支持 HTML" \
  -e CARD_CONTENT=0 \ # 0= 显示描述信息，1= 显示链接 URL
  -e SHOW_FAVICON=1 \ # 1= 显示 favicon 图标，0= 不显示
  -e DEFAULT_ENGINE=bing \ # 设置默认搜索引擎
  -v $(pwd)/data:/usr/share/nginx/html/data \
  --restart unless-stopped \
  verky/xg-nav:latest

下载整项目放到网站运行目录，确保 index.html 在根目录下！

编辑根目录下的 config.json 文件：

• SITE_TITLE:” 网站标题 ”
• SITE_DESCRIPTION:” 网站描述 ”
• COPYRIGHT:” 版权信息，支持 HTML”
• CARD_CONTENT: 0（0= 显示描述信息，1= 显示链接 URL）
• SHOW_FAVICON: 1（1= 显示 favicon 图标，0= 不显示）

配置优先级：环境变量 > config.json > 内置默认值

本项目支持 YAML (推荐) 和 TXT 两种配置格式。数据文件位于 data/ 目录下。

编辑 data/links.yaml，结构清晰，支持更多特性（如自定义图标）：

博客:
  小鸽志:
    url: https://www.xiaoge.org
    desc: 个人技术博客分享
    icon: https://www.xiaoge.org/favicon.png  # 远程图标 URL
  DockerApps:
    url: https://dockerapps.com
    desc: Docker 应用程序集合
    icon: emoji:🐳 # emoji

购物:
  淘宝:
    url: https://www.taobao.com
    desc: 中国最大购物平台
    icon: taobao.png  # 本地图标（放在 ico/ 目录下）
  京东:
    url: jd.com
    # icon 留空 → 使用默认 favicon

• 特性：
  • 链接值为字符串表示仅 URL；对象可写 url/desc/icon
  • 不写 icon → 使用 favicon 自动抓取
  • URL 不含协议 → 自动补 http://

编辑 data/links.txt，适合快速添加，格式为 CSV：标题, 描述,URL, 分类。

小鸽志, 个人技术博客分享,https://www.xiaoge.org, 博客
DockerApps,Docker 应用程序集合,https://dockerapps.com, 博客
淘宝, 中国最大购物平台,https://www.taobao.com, 购物

• 注意：
  • 使用英文逗号 , 分隔
  • 如果缺失分类，默认为 ” 未分类 ”
  • Docker 环境：启动时会自动将 .txt 转换为 .yaml 以提升性能。
  • 纯静态环境：如果加载 .yaml 失败，前端会自动尝试加载 .txt。

兼容迁移：若存在旧版 links.txt，容器首次启动会自动转换为上述结构。

导航站内置搜索支持通过配置选择搜索引擎：

• 搜索引擎在 config.json 中配置：
  • SEARCH_ENGINES: {name, engine, url}[]
  • DEFAULT_ENGINE: 默认引擎，如 "bing"
• 页面下拉由配置动态生成，仍支持本地记忆上次选择
• 搜索特性：
  • 🔍 实时搜索：输入关键词即时显示匹配结果
  • 🎯 多字段匹配：支持按网站名称、描述、分类搜索
  • ⚡ 快速响应：优化的搜索算法，毫秒级响应
  • 🔄 智能过滤：自动过滤空白和特殊字符

icon 写法与目录：

• 本地名：icon: github（在 ico/ 中按顺序尝试 png→svg→ico→jpg）
• 本地文件：icon: github.svg/png/jpg/ico（精确匹配）
• 远程：icon: https://... 或 icon: domain/path.svg（无协议→http://）
• emoji：icon: 🧭 或 icon: emoji:🧭
• 不写 icon：默认使用网站 favicon（Yandex 服务）

目录约定：

• ico/ 用于用户自定义图标（链接卡片使用）。
• 内置搜索引擎图标已迁移到 assets/search/，页面选择器自动使用，无需用户维护。

支持深浅色主题无缝切换：

• 🌞 浅色主题：简洁明亮的白色主题
• 🌙 深色主题：护眼的深色主题
• 💾 记忆功能：自动保存用户的主题偏好
• 🎨 平滑过渡：主题切换带有流畅的动画效果

• ⚡ 图标懒加载：只加载可见区域的图标，提升页面加载速度
• 🗄️ 缓存机制：智能缓存配置和链接数据
• 📱 响应式设计：完美适配各种设备尺寸
• 🔧 代码优化：精简的代码结构，最小化资源占用

部署完成后，访问 http://localhost:26180 即可使用导航站。