coloraven/HomeNavigation

个人导航页

程序的起因是因为家里申请了公网IP，因此购置了一套服务器在家里放着。但是方便操作和记忆，因为写了此导航来可以快速的从内网或者外网访问家里的某些服务

演示地址：https://navigation.6b7.org/

Docker部署

git clone https://github.com/nuanxinqing123/HomeNavigation.git
cd HomeNavigation
docker build -t nav:latest .
docker run -itd --name=index -v $PWD/conf:/conf $PWD/img:/img -p 8100:8100 nav:latest

docker-compose安装

# 下载二进制文件
sudo curl -L "https://github.com/docker/compose/releases/download/v2.2.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 可执行权限应用于二进制文件
sudo chmod +x /usr/local/bin/docker-compose

# 创建软链
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

# 测试是否安装成功
docker-compose --version

docker-compose部署

// 第一步：克隆仓库并进入
git clone https://github.com/nuanxinqing123/HomeNavigation && cd HomeNavigation

// 第二步：运行Docker
# 启动
docker-compose up -d
# 停止
docker-compose down

好了，部署完成。如果需要修改前端的显示内容，直接修改 conf/config.json里面的内容就好了。还有就是启动命令默认是8082端口，大家自行修改一下

Tips：因为版本更新可能会变动json文件。所以推荐更新之前先把原来的json文件修改名字，下载新的json文件之后把原来的内容再拷贝过去

config.json 文件

{
  "Index": {
    // 网站LOGO（支持相对&绝对路径、支持图床外链）
    "Logo": "img/logo.png",
    // 网站ico（支持相对&绝对路径、支持图床外链）
    "Favicon": "img/favicon.ico",
    // 网站标题
    "Title": "Cloud Services"
  },
  "SoftWare": {
    // 程序运行端口（修改后重启生效）      
    "port": "8100",
    // 访问密码（“”留空代表关闭密码访问，实时生效）
    "password": "",
    // 内外网模式【N为内网，W为外网（大写 & 必填）】
    "Mode": "",
    // 是否开启Debug
    "Debug": "",
    // 日志等级
    "LogLevel": "info"
  },
  "Data": [
    {
      // 显示顺序（不可以重复）   
      "id": 1,
      // 图标标题
      "title": "我的博客",
      // 图标图片（支持相对&绝对路径、支持图床外链）
      "ico": "img/xxx.png",
      // 外网访问地址（可空）
      "w_link": "https://6b7.org/",
      // 内网访问地址（可空）  
      "n_link": "https://6b7.org/"
    }
  ],
    "Footer":[
      // 页脚网站信息，同上：可以使用 {} 增加显示项目，但是推荐不要超过3个
      {
        "Text": "",
        // TextLink如果不需要可以空着，这样前端就不会渲染 a 标签
        "TextLink": ""
      }
    ],
    "FooterStyle":{
      // Web背景图片（推荐图床外链）
      "Background": "",
      // 渐变色背景(支持颜色的英文单词和十六进制颜色值)
      // 当Background值为空时, 启用渐变值
      "BackgroundColorA": "#acb6e5",
      "BackgroundColorB": "#86fde8",
      // LOGO下方文字颜色(支持颜色的英文单词和十六进制颜色值)
      "LColor": "#E1DFCD",
      // 图标下方文字颜色(支持颜色的英文单词和十六进制颜色值)
      "SColor": "#E1DFCD",
      // 页脚文字颜色(支持颜色的英文单词和十六进制颜色值)
      "FColor": "#E1DFCD"
    }
}

添加新的项目

新站点

    {
  "id":,
  "title": "",
  "ico": "",
  "w_link": "",
  "n_link": ""
}

新页脚

    {
  "Text": "",
  "TextLink": ""
}

如果需要添加新的站点到页面，请在Data的 [ ] 里面按照如上格式添加。

Tips：所有的 { } 后面都需要添加一个英文逗号，除了最后一个 { }

配置文件说明

以上配置文件是整个程序的所有配置项，由于程序采用JSON文件实时读取的方式，所以修改配置过后均可实时生效（除了端口需要重启生效）。

前端模板说明

模板经过修改，原版模板来自于：http://www.wdmomo.fun:81/home/

版本通知

2022.03.17：V1.8
1、前端由原生H5转换为Vue开发
2、保留本地图片接口（引用路径：img/xxx.png）
3、新增渐变色背景，当Background选项为空时。启用渐变色背景

2022.02.24：V1.7
1、新增内外网首显控制开关
2、新增LOGO文字、图标文字颜色控制
3、更换docker-compose.yml部署方式

2022.01.26：V1.6
1、修复CSS错误部分
2、大幅度缩减Docker镜像体积（15M+）

2021.12.06：V1.5
1、修复显示图片的一个错误

2021.11.30：V1.4
1、修复背景图CSS兼容性问题
2、增加访问密码选项（Cookie有效期30天, 留空代表关闭密码访问）

2021.11.25：V1.3
1、修复CSS多项目加载错误（1.1遗留BUG）
2、更改新的页脚显示方式（可自定义页脚信息Link）

2021.11.21：V1.2
1、增加空路由提示
2、增加更多可以控制元素（自定义背景图、色）
3、更换新的背景图

2021.11.18：V1.1
1、修复CSS的部分错误
2、目前CSS任然存在问题，推荐添加Web不要超过16个
3、添加所有演示图标

2021.11.17：V1.0
1、支持内网外网添加定义
2、JSON文件动态加载全网页

Q & A

Q:能不能自定义图标下面文字的颜色，浅色背景下字看不清
A:修改配置文件的 LColor、SColor、FColor 内容即可

Q:能不能自定义前端HTML部分
A:暂时不可以

Q:有没有Arm架构的版本
A:暂时没有打包，需要自行Clone源码并编译

Q:如何自己定义上传图片？
A:可以，请将自定义图片上传到img目录里面。但是推荐大家使用图床（推荐我的个人图床：https://img.6b7.xyz）

coloraven / HomeNavigation