AquarHome开源个人主页使用教程

创作立场声明：AquarHome是一个强大可定制，其本身具备基础导航功能（如搜索框、导航链接）的同时还适配了多种NAS常用服务的API，集成了NextCloud、Docker、Syncthing、TrueNas等服务，可以在同一页面直接看到各个服务的核心数据与最新状态。本人是这个项目的开发者，希望这个系统可以帮到大家。

上周介绍了我刚刚开源的AquarHome（码云:https://gitee.com/firemaker/aquar-home GitHub:https://github.com/firemakergk/aquar-home）个人主页后得到了很多朋友的肯定与支持，这让我有了更强的动力。同时也发现了一些现有系统的问题，在这几天针对重要的问题进行了修复。大家给了我很多很好建议，我会认真采纳，并在下一个版本中用好用的功能作为回应。

大家呼声很高的一点是系统组件的配置没有配套的帮助文档，导致很多参数不知如何填写。于是这几天我写了一套帮助文档，比较详细地介绍了系统的安装过程，并且分别展示了各个组件的配置方式。帮助文档也已经开源到了码云上，大家有需要的可以点过去看。这篇文章我把帮助文档的安装部分以及图标链接的设置摘录进来，供大家参考。

AquarHome帮助文档目录：

文档首页
系统安装与整体介绍
图标链接配置说明
Docker配置说明
NextCloud配置说明
TrueNas配置说明
Syncthing配置说明

快速开始-Docker方式

AquarHome的部署推荐使用docker-compose方式。

0. docker及docker-compose的安装不是本文档的重点，请参考其他资料安装。

1.在准备好docker-compose环境后，创建一个新文件夹。

例如: mkdir aquarhome

2.在文件夹中创建一个docker-compose.yml文件。

touch docker-compose.yml

3.将下面的配置粘贴在文档中,然后根据你自己的目录结构指定好三个docker卷挂载点。

version: "3"
services:
aquarhome:
image: finetu/aquarhome:latest
container_name: aquarhome
environment:
- PUID=1000
- PGID=1000
- TZ=Asia/Shanghai
volumes:
- your/path/to/data:/var/aquardata #数据目录，包含核心配置数据，缓存/上传文件等
- your/path/to/aquarpool:/opt/aquarpool #供文件同步功能使用，若不需要此功能可选择一个空文件夹填写
- /opt/aquar/storages/apps/aquarhome/logs:/root/.pm2/logs #日志文件
ports:
- 8172:8172
restart: unless-stopped

4.在aquarhome目录下，执行使用docker-compose启动容器。顺便一提，由于docker-compose是一个python工具，而python有时会使用虚拟环境，如果你发现自己安装了docker-compose后仍然无法使用docker-compose命令，可以确认一下自己当前所在的pyhton环境到底是哪一个。

cd aquarhome
docker-compose up -d

5.docker-compose正常启动后，访问宿主机在内网中的地址，如192.168.0.117:8172，如果可以看到AquarHome的登录页面，就说明部署成功了。

更进一步

AquarHome的开发理念是尽可能轻量化，所以采用了纯javascript的技术栈。在数据存储上摒弃了数据库，采用配置文件的方式进行数据持久话，这除了带来架构上的轻量以外，也使系统的配置数据有了极高的可读性与可移植性，可以方便的手动维护与迁移。

进入数据目录(docker容器中/var/aquardata的宿主机挂载点)后可以看到目录结构大致如下：

.
├── bg_img <====背景图上传目录
│ └── 999af70a4c8bf2d3f9c9f26145ba6cc9.webp
├── cache <====组件缓存目录
│ └── nextcloud
│ └── thumb <====NextCloud组件的缩略图缓存
│ ├── 01e2faad43078be9022130aeaaa2505d.webp
│ ├── 03ac2910226dd17cbb436978d908d852.webp
│ ├── 0550386419f81fa4c89eb499fa8431b8.webp
│ ...
│
├── db <====AquarHome的核心配置数据
│ └── db.json
├── icon_img <====图标文件目录，包括上传的与自动抓取的图标
│ ├── 0b6a2e93ae151351.ico
│ ├── 7ca77f3c376d9412.ico
│ ├── 850ce3dbe85b1c3e04b5a4d41c97249d.webp
│ ├── 86bd2266437333aa.ico
│ ├── 87a178c91ca60635.ico
│ ...
└── log <====日志目录

其中/db/db.json是AquarHome的核心配置文件，文件格式是json，内容也简单易懂，我在上面进行简单地标注后你应该可以很容易地明白各项配置的意思。

{
"auth": { # 权限验证信息，包含了系统自动生成的密钥，以及用户自定义的用户名与密码的MD5散列值
"secret": "p3xkCUbUte",
"userName": "firemaker",
"password": "3b774fe4f5d86e9b112789a2708e1e91"
},
"config": { # 系统配置信息，包含了背景图片、背景虚化值、主题方案及背景颜色
"current_index": 0,
"appearance": {
"bgColor": "#455A65",
"bgImg": "/bg_img/6bf762336ffa3a8b2cd39474d2bbdc7c.webp",
"bgBlur": "0",
"theme": "defaultLight"
}
},
"tabs": [ # 标签页数据，包含了标签页的标题及内涵的所有组件
{
"title": "导航",
"widgets": [ # 组件列表
{
"id": "cbaf8dda-8e77-4ab4-a328-c13f78b2c386", # 组件的唯一id值
"sort": 1, #排序属性，暂时未使用
"name": "syncthing local", # 组件的名称
"href": "http://localhost:8384", # 链接地址
"image": "img/nextcloud.jpg", # 组件的图标地址
"widget": "SyncthingWidget", # 标记这是一个Syncthing组件
"layout": { # 标记其所在的座标及大小
"x": 4,
"y": 2,
"w": 3,
"h": 4,
"i": "cbaf8dda-8e77-4ab4-a328-c13f78b2c386",
"moved": false
},
"data": {
"server": "http://localhost:8384", # 服务器地址
"app_key": "mESCgd6imiPvTfVGojshHRSwcAd9SYzp" # 用户自行配置的app_key,用来通过syncthing接口的鉴权
}
}
]
}
]
}

这种设计不仅可以让你更有力地掌控整个系统，也可以在需要时对系统进行快速的迁移，你只需要将整个数据目录打包，放在想要迁移的地方即可，或者只把db.json文件带走，在新系统里重新上传一遍图标。一切都可见可控。

图标链接配置

作为一个个人Home页，AquarHome最基本的功能就是添加链接图标。链接图标有两种形态——图标形态和条状形态。转换逻辑是：当图标组件的高度为1格时，其显示为条状形态；当图标组件高度大于1格时，其显示为图标形态。此外AquarHome还支持图标的批量导入。

单图标配置方式：

1.点击AquarHome右上角的齿轮标志进入设置页面，点选左侧“添加组件”菜单，选择Icon，点击进入参数设置页面。

2.在页面中填写图标名称与链接地址，点按确定，即可看到桌面上生成了一个新图标，并且自动抓取到了网站的ico。

3.点击图标右上方的设置按钮，可以进行更多参数的设置。

4.点击设置后可以看到，设置页面如下图所示。

4.1自动抓取的ico图标可以清空或者重新获取。

4.2点击图标图片，可以上传本地图片作为图标图片使用。

选择本地图片后，可以在页面上进行调整，调整完成后点击下方的确定按钮，即可完成上传。

5.点击设置页面的提交按钮后，新的配置即生效。

6.点击页面右上方的设置布局按钮后，再拉组件动右下角，可以看到图标组件可以根据需要尺寸适配不同的形态。

7.当清空ico图标后，手动上传的图标会替代原来的ico图标，作为条状形态的图标使用。重新获取ico图标后，条状图标又切换会ico图标。

批量导入链接

AquarHome支持以文本方式批量导入图标，以避免重复操作。

配置方式如下：

1.点击AquarHome右上角的齿轮标志进入设置页面，点选左侧“添加组件”菜单，选择Icon，点击进入参数设置页面。

2.在参数页面的右上角点击“批量导入”按钮，进入批量导入页面。

3.在左侧按照[链接名],[链接地址]的格式写入要导入的数据，点击上方的"解析数据"按钮，即可看到右侧解析出了数据并翻译成了markdown的格式。

4.点击“批量添加”按钮，等待一段时间。关闭设置页面后即可看到页面上出现了批量生成的图标组件。

5.若有一些图标未正确抓取到ico图标，则打开其设置页面尝试重新抓取即可。国外的网站可能抓取不成功。你懂的。