手里有几台机器的人，桌面通常长这样：一个监控面板看 CPU 和流量，一个书签页放常用入口，一个 RSS 阅读器追更新，可能还有个静态主页放自我介绍。四套东西、四次部署、四种配置格式。Komari-Home 的想法挺直接：既然 Komari 探针已经在那儿跑着了，干脆把它的前端换掉，让监控、导航、订阅、个人名片共用同一个界面。
它是基于 Komari 探针的主题化个人主页，不是独立程序——装的是主题包，配置在 Komari 后台的主题设置面板里点，不用碰代码。项目采用 MIT 协议，2025 年 8 月建仓，当前版本 v1.0.2（2026 年 8 月发布），GitHub 上还是个十余星的小项目，但完成度比星数看起来高。
一、先说清楚它挂在什么东西上
Komari 是一个轻量、自托管的服务器监控方案：服务端起一个 Web 界面，被监控的机器装轻量 Agent 上报指标，官方称数据可以做到秒级刷新，并且支持自定义主题和插件。Komari-Home 就是吃这个「自定义主题」能力的第三方主题，要求 Komari ≥ 1.3.0；演示站页脚显示的主题运行在 Komari Monitor v1.6.0 上。
这个依赖关系决定了它的适用面：如果你已经在用 Komari 看机器状态，换主题是零额外部署成本的事；如果没用过 Komari，为了一个导航页去装整套探针加 Agent，就有点本末倒置了。
主题和探针之间的数据通过 Komari JSON-RPC 2.0 API 走。翻源码能看到客户端封装了两种模式：普通 POST 单次请求，以及 WebSocket 长连接（带请求 ID 匹配与超时控制）。主题配置来自 public:getPublicSettings，结果会缓存在浏览器 localStorage 里，所以刷新页面时首屏不会白屏。前端本身是 Vue 3.5 + Vue Router 4 + Vite 7，图标用 Bootstrap Icons，Node 要求 ^20.19.0 || >=22.12.0。
二、首页：一张名片，加四个可开关的模块
首页顶部是个人信息区：头像、昵称、简介、所在地，右侧放社交图标按钮，鼠标悬停才显示名称。中间是两个并排的小组件——一言和实时时钟，各自有独立开关，不想要可以关掉。再往下是 RSS 订阅，官方说明支持 RSS/Atom、最多展示 4 条。底部是快速链接网格，按屏宽自适应 2~5 列。
还有个「自定义 HTML」模块：填什么就渲染什么，等于给首页留了一个任意扩展口。这个口子方便，但也意味着往里贴第三方脚本之前得自己想清楚来源，它是原样渲染、不做沙箱隔离的。
把这些模块摆在一起看，其实是把「个人主页」这件事拆得很干净：身份信息、装饰组件、内容聚合、入口导航，四块互不依赖，靠开关组合。配置指南里还给了一套 AI 提示词，让不熟 JSON 的人直接生成链接数组——对目标用户来说是挺贴心的设计。
三、网址导航是独立一页，不是首页塞不下
快速链接是首页底部那排短按钮，网址导航则是单独的页面（路由 /web），卡片带图标、名称和一行描述，按分类平铺。把两者分开是对的：前者放「每天点三次」的入口，后者放「想找时能翻到」的清单，混在一页只会互相挤。
四、监控部分：探针数据换了张脸
监控页（/komari）把节点做成卡片矩阵：在线状态、运行时长、系统版本、地区、CPU 与内存占用条、上下行速率、月成本，一屏扫完。顶上可以按分组筛选（如 Global / Mainland），排序支持原顺序、分类、名字三种，在线节点默认靠前，列表还能分页，每页行数可调。
点进节点详情是另一层：硬件信息、SVG 性能图表、延迟热力图。另外「月计费」是可选开关，打开后会汇总每月成本并滚动提示即将到期的机器——对按年付、按机记成本的人来说，比在表格里翻记录方便。这一块依赖 Komari 侧记录的计费字段，没填就不显示。
五、配置全在后台，一张表说清有什么
主题把所有可配置项声明在 komari-theme.json 里，安装后 Komari 后台会据此生成设置面板。按实际文件整理，主要分五组：
| 分组 | 关键配置 |
|---|---|
| 基础信息 | 头像 URL、显示名称、简介、所在地；社交链接 JSON（头像右侧图标，name / icon / url） |
| 首页内容 | 快速链接开关与列表 JSON、RSS 开关与订阅地址、自定义 HTML 开关与内容；一言、时钟各自独立开关 |
| 网址导航 | 导航卡片列表 JSON，比快速链接多一个 desc 描述字段 |
| 监控页 | 排序方式（原顺序 / 分类 / 名字）、在线靠前开关、每页行数（默认 3）、月计费开关 |
| 外观 | 全屏背景图 URL、主题 favicon 开关、时钟与一言开关 |
三个 JSON 数组字段长这样，图标名用 Bootstrap Icons 的名称、不带 bi- 前缀：
// 社交链接 / 首页快速链接：name、icon、url
[
{ "name": "GitHub", "icon": "github", "url": "https://github.com/yourname" },
{ "name": "博客", "icon": "journal-text", "url": "https://example.com" }
]
// 网址导航：多一个 desc
[
{ "name": "文档", "icon": "file-earmark-text",
"desc": "主题配置指南", "url": "https://example.com/docs" }
]几个容易踩的点：快速链接和 RSS 都要先打开启用开关再填内容，只填 JSON 不生效；图标名写错会静默不显示；JSON 里末尾逗号、中文引号、字段名没加引号是最高频的三类报错，贴进 JSON 校验工具过一遍最省事。
六、装一次只要四步
- 在 Releases 下载最新主题包
komari-home-v{version}.zip（v1.0.0 / v1.0.1 / v1.0.2 三个版本，包体约 2.1MB）。 - 进入 Komari 后台 → 主题管理 → 上传主题包；也可以在官方主题源里搜 Home 直接装。
- 启用主题。
- 打开主题设置面板，按上表填个人信息、链接数组和外观开关，保存即生效。
想改主题本身的话，本地 npm install 后 npm run dev 会用 mock 数据起开发服务器，npm run build 出生产包——不用先搭一套 Komari 才能调样式，这点对二开很友好。
七、什么情况下别选它
它解决的是「已经用 Komari、想顺手要个主页」，不是「要一套完整的门户系统」。没有用户体系、没有权限控制、没有内容管理，自定义 HTML 也只是渲染片段；导航数据全靠后台 JSON 维护，站点一多就得自己想办法生成。另外它跟 Komari 版本绑着，升级探针前最好确认主题兼容。
反过来说，如果你本来就在为「监控页 + 导航页 + 个人名片」维护两三套东西，这种把配置收进一个后台、把界面合成一张脸的做法，省下的是长期维护成本，而不是第一次部署的那十分钟。
本文配图除官方主视觉外，界面图为在公开演示站以中性示例配置渲染的功能演示，页面内容不代表任何真实站点；图片未做像素级修改，仅统一格式与去除元数据。
本文整理自公开资料并做重写，原始出处：https://github.com/mogumc/Komari-Home。文中配图已去除站点叠加水印与推广信息；版权归原作者所有。