前言

最近发现自己越到中年，越喜欢一些极简风。之前就喜欢折腾花里胡哨的主页或者外设，现在却偏爱极简。于是最近想着给我的NAS导航页也换一下，之前的固然好用，但已经不符合我现在的身份了，大叔就要有大叔的觉悟。多番找寻下发现了这样一款极简，且功能足够你使用的项目——home-page导航页。

功能展示

主页很简洁，但是该有的信息都有，NAS的CPU以及内存使用信息，博客跳转链接，日期时间，双标题自定义以及一言和夜间模式都有。

主页

通过设置界面，你可以选择同步你的信息到onedrive上，这样就不担心数据没了。当然，项目也是支持容器路径映射的，所以你也可以直接备份项目目录。

设置界面

通过点击右上角的编辑按钮，可实现界面导航卡片的添加以及编辑。卡片支持名称、描述、图标以及链接的编辑，完全够用了。甚至通过json文件你可以实现卡片分组设置，代码也很简单。

自定义

通过映射路径后，你可以对背景以及CSS等元素进行修改，实现一些更多的美化，当然个人并不建议，因为这个导航的初衷便是极简风格的。项目地址如图。

项目界面

部署过程

该项目可直接通过docker pull kahosan/home-page命令拉取部署，也可以通过docker-compose方式部署。不同的便是后者可实现直接编辑好所有内容启动。这里我主要介绍后者部署方式。首先创建一个home-page文件夹。

随后在文件夹中创建yml文件，其中内容可以根据自己情况更改，内容如下：

services:
  home-page:
    container_name: home-page
    image: kahosan/home-page
    user: 1000:1000
    environment:
      - TZ=Asia/Shanghai
      - NEXT_PUBLIC_HOME_BLOG=https://panda995.xyz/   #博客地址
      - NEXT_PUBLIC_HOME_HEADER_TITLE=NAS    #主标题
      - NEXT_PUBLIC_HOME_TITLE=熊猫NAS  #副标题
    volumes:
      - ./services.json:/app/services.json
    ports:
      - 3010:3000  #端口

随后我们再创建一个services.json文件，内容自行根据情况更改，内容如下：

[
  {
    "name": "示例卡片",
    "path": "/tmp",
    "description": "这是一个示例",
    "icon": "logo-react"
  },
  {
    "name": "示例卡片",
    "path": "/tmp",
    "description": "这是一个示例",
    "icon": "logo-react"
  },
  {
    "name": "示例卡片2",
    "path": "/tmp",
    "description": "这是另一个示例",
    "icon": "logo-react"
  }
]

因为项目可实现在线编辑导航卡片，所以如果你觉得麻烦，可以部署好之后再更改。如需更改背景图，可以加一个映射目录/app，在public中替换 bg.png 文件，然后修改 src/index.css 中最下面的 .custom-bg 的配置。这需要会一点点的 css 知识。