本文详细记录了 Navlty 轻量级导航面板的设计理念与部署方法。文章内容包括 Navlty 对比 Homer 的 核心优势 、 容器化安装命令 、 多场景界面展示 、常见问题解答，以及通过服务器端动态压缩实现单 HTML 文件高速响应的技术细节。
前言 (Preface)
我个人比较常用的链接导航功能是 Chrome 浏览器的书签，导航面板相对用的不算多。
导航面板中我用的最久的是 Homer 面板，当时该面板部署在一台闲置的云服务器上。
那台服务器网络不太稳定，经常页面已经显示了但是 Font Awesome 图标还没显示。
分析原因发现是 WOFF 字体文件太大，云服务器返回 WOFF 字体文件花费的时间过长。
并且 Homer 需要使用 YAML 配置，即使是 AI 存在的今天配置数据也相对较为麻烦。
基于使用场景和个人需求，我利用 Firebase Studio 工具开发了 Navlty 导航面板。
设计理念与优化
Navlty 导航面板的设计理念是：
- Navlty 导航面板的样式布局整体参照 Homer 的样式布局：
- 顶部的 Banner 区域中提供网站信息，至少有网站头像、网站标题；
- 顶部的 Banner 区域中提供搜索功能，可以搜索面板中的相关链接；
- 面板中的链接使用卡片布局，提供图标、标题、描述等信息，横向布局；
- Navlty 导航面板对比 Homer 面板所提供的额外功能是：
- 顶部的 Banner 区域中提供切换功能，可切换主面板、副面板显示；
- 顶部的 Banner 区域中提供设置功能，可管理链接数据、网站信息；
- 面板中的链接图标支持 HTTPS 链接、 SVG 代码、 Base64 图片数据；
- Navlty 导航面板针对网络请求所做的特别优化是：
- 服务器只需返回一个包含 CSS 、 JS 的 HTML 文件，减轻服务器压力；
- 服务器针对 CSS 、 JS 动态压缩，进一步减小返回的 HTML 文件大小；
- 服务器会根据登陆状态，合并到 HTML 中的 CSS 、 JS 代码也会不同；
- 面板中不使用第三方 JS 代码，利用 AI 生成代码确保不引入多余代码；
容器部署与命令
Navlty 导航面板目前仅支持容器化部署，暂时不支持以二进制方式运行。
执行以下命令即可使用 Docker 部署运行 Navlty 导航面板：
docker run -d \
--name navlty \
-p 8080:8080 \
-v navlty_data:/navlty/data \
--restart always \
ghcr.io/dancying/navlty:latest
我个人比较喜欢使用 Podman 运行镜像，对应的 Podman 命令如下：
podman run -d \
--name navlty \
-p 8080:8080 \
-v navlty_data:/navlty/data:Z \
--restart always \
ghcr.io/dancying/navlty:latest
Navlty 镜像使用 GitHub Actions 自动构建并托管在 GitHub 上，多数情况下不需要网络代理也能拉取镜像。
界面展示与效果
若链接图标都使用 HTTPS 链接的格式，则服务器返回的 HTML 文件都能控制在 100 KB 以下；
若使用 NGINX 反向代理并开启 GZIP 压缩，则还能进一步减小传输中 HTML 文件的数据大小；
当前版本的 Navlty 导航面板镜像在 20 MB 以内，容器运行时内存占用也控制在 20 MB 以内；
常见问题 (FAQ)
Q1：如何重置 Navlty 导航面板的链接数据？
A：停止正在运行的容器，进入容器的挂载点位置，删除其中的 links.json 文件。这会删除所有的链接数据，然后 go 代码会重新生成默认的链接数据。
Q2：如何重置 Navlty 导航面板的登陆密码？
A：停止正在运行的容器，进入容器的挂载点位置，删除其中的 auth.json 文件。这会删除已保存的密码信息，再次点击设置按钮即可重新设置登陆密码。
Q3：如何重置 Navlty 导航面板的网站设置？
A：停止正在运行的容器，进入容器的挂载点位置，删除其中的 settings.json 文件。这会删除所有网站设置数据，包括网站设置、外观设置、自定义代码等数据，然后 go 代码会重新生成默认的设置数据。
Q4：如何查看 Navlty 导航面板的容器挂载点位置？
A：执行命令例如 docker volume inspect navlty_data 然后找出其中的 Mountpoint 字段的值，该字段的值就是挂载点的目录位置。
总结 (Summary)
Navlty 导航面板主打就是一个轻量化，在功能性方面或许不及其他导航面板。
导航面板的设置窗口中仅提供常用设置项，基本可以满足常见的使用需求。
如果需要更深度的自定义面板设置，可以考虑编写 CSS 、 JS 代码实现。
我个人不太建议频繁修改导航面板的设置，所以面板设置窗口没有特意优化。
如果 Navlty 导航面板有问题，可以提交 ISSUE 或发邮件联系我修复。