xg-nav一个简洁、纯HTML静态的个人导航站

XG-Nav 导航站

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

界面预览-我的Demo

部署说明

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行，自建接口可参考下方开源程序

开源地址

🏷本文标签：Docker，️html，️Nav

赞赏作者

如果觉得我的文章对你有用，请随意赞赏