XG-Nav 导航站

这款导航站程序是我遇到过最简洁,最轻量的,纯html实现,而且界面样式也很合我心意,已经使用一段时间,体验良好。

界面预览-我的Demo

https://assets.qninq.cn/qning/LZri4e02.webp
https://assets.qninq.cn/qning/LZri4e02.webp
https://assets.qninq.cn/qning/fLj4J816.webp
https://assets.qninq.cn/qning/fLj4J816.webp

部署说明

HTML 部署

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

修改信息

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

  • SITE_TITLE:"网站标题"
  • SITE_DESCRIPTION:"网站描述"
  • COPYRIGHT:"版权信息,支持HTML"
  • CARD_CONTENT: 0 (0=显示描述信息,1=显示链接URL)
  • SHOW_FAVICON: 1 (1=显示favicon图标,0=不显示)

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

链接管理

编辑 data/links.txt 文件来管理导航链接,每行一个链接,格式为:

网站名称,描述,URL,分类

示例

淘宝,中国最大购物平台,https://www.taobao.com,购物
GitHub,全球最大代码托管平台,https://github.com,开发工具

分类说明

  • 支持中文分类名称
  • 相同分类的链接会自动分组显示
  • 如果不指定分类,默认归类为"未分类"

Docker容器部署

方式一:使用 docker-compose(推荐)

创建 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=不显示
    restart: unless-stopped
    volumes:
      - ./data:/usr/share/nginx/html/data

方式二:直接使用 Docker 命令

docker run -d \
  --name xg-nav \
  -p 26180:80 \
  -v $(pwd)/data/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=不显示
  -v $(pwd)/data:/usr/share/nginx/html/data \
  --restart unless-stopped \
  verky/xg-nav:latest

附加说明

如果觉得程序内置的获取图标接口不好用,可以自行替换自建接口,修改/js/nav.js第426行,自建接口可参考下方开源程序

开源地址

Loading...

🏷本文标签:Docker,️html,️Nav
最后修改:2025 年 10 月 26 日
如果觉得我的文章对你有用,请随意赞赏