Komari脚本进阶：手把手教你添加个性化小组件

还在为 Komari 面板过于单调而烦恼？最近发现了一个很实用的脚本修改版，能让你轻松在页面中添加各种小组件，无论是展示状态、显示时间还是挂载常用工具，都能搞定。今天就来手把手教大家怎么用这个脚本，给自己的面板加点“料”。

Komari面板添加小组件脚本修改版示意图

🛠️ 准备工作

在开始之前，你需要确保自己已经部署好了基础的 Komari 环境。如果你是刚接触的新手，建议先去熟悉一下基础的配置流程。如果你已经顺利跑起来了，那我们就可以直接开始魔改了。

📝 脚本核心逻辑与修改

这个修改版的脚本主要是在原有的基础上扩展了组件化的功能。它的核心在于允许你通过一段 JS 代码，在指定位置挂载自定义的内容块。

1. 获取代码 首先是获取这一份修改后的脚本代码（来源见文末参考）。这是一个纯净的 JS 文件，包含了核心的逻辑。

2. 关键步骤：修改域名 拿到代码后，千万不要直接复制粘贴就跑，否则大概率会报错或者加载不出来。最重要的一步就是将代码中的示例域名更换为你自己的域名。

打开代码文件，搜索类似 example.com 或者原作者预留的域名地址，将其完整替换为你当前部署 Komari 服务的域名。这一步决定了组件的资源能否正确加载和通信。

🚀 部署与使用

修改完域名后，保存文件。接下来就是将这段脚本引入到你的项目中。

通常的做法是在你的入口 HTML 文件中，通过 <script> 标签引入这个 JS 文件。或者如果你熟悉构建工具，也可以直接 import 进去。

引入成功后，刷新页面，你应该就能看到默认的小组件已经出现在页面上了。如果页面没有任何变化，记得打开浏览器的开发者工具（F12），查看 Console 是否有报错信息。最常见的问题依然是域名配置错误导致的 404 或跨域问题。

💡 进阶玩法：自定义内容

原版脚本虽然能用，但每个人都想要独一无二的效果。你可以根据自己的需求修改脚本里的模板部分。

比如，你可以把小组件改成显示服务器实时流量的仪表盘，或者嵌入一个精美的时钟，甚至是加上你喜欢的常用网址导航。只要懂一点 HTML 和 CSS，就能随意折腾出惊艳的效果。

⚠️ 常见问题解决

• 页面空白/组件不显示： 99% 是域名没改对，或者脚本路径引用错误。请仔细核对你的 URL 配置。
• 样式乱掉： 可能是 CSS 冲突。尝试给你的小组件外层包裹一个独立的 ID 或 Class，并限定样式作用域。

总的来说，这个修改版脚本大大降低了 Komari 的自定义门槛，不用懂太深的后端知识，动动手指就能让界面功能丰富起来。赶紧去试试吧！