手把手教你制作 Komari 主题

Komari 的主题框架是基于SPA（单页应用）的理念设计的，意味着使用原生 HTML、CSS 和 JavaScript 也可以制作主题。我们不需要去学习任何新的框架或语言，只要你稍微了解一下网页（不了解也没关系，上手很快），就能制作出一个 Komari 主题。如果你希望制作一个更复杂的主题（例如华丽的动画，特效），可以考虑学习一些前端框架，比如 React 或 Vue。Komari 开发者本人也在使用 React 来制作主题，甚至在制作 Komari 本体之前都没有接触过 React 和前端开发，完全从零开始。

不太重要的碎碎念：

推荐大家使用AI工具来辅助制作主题，比如 ChatGPT、CodeGPT、Bard 等等，这些工具可以帮助你生成代码，节省时间，提高效率。

当你遇到问题时，可以把你的问题描述清楚，告诉AI你想要实现什么功能，AI通常能给出不错的解决方案。

在聊天开始之前，推荐将Komari的官方文档 和 API 接口
发给AI，这样它能更好地理解Komari的主题制作要求，从而提供更准确的帮助。

推荐使用 VSCode 作为代码编辑器，它是免费的，并且有很多插件可以帮助你更好地编写代码，比如语法高亮、自动补全、错误提示等等。

确定我们的主题

在开始制作主题之前，我们需要先确定一下我们要制作的主题。比如：

  • 名称是什么？
  • 有没有预览图？
  • 作者是谁？

让我们假设我们要制作一个名为 "MyTheme" 的主题，预览图是 preview.png，作者是 "YourName"。

创建主题文件夹

既然我们要创建一个项目，我们需要一个文件夹来存放所有的文件。你总不能把所有东西都放在桌面上吧？所以，创建一个名为 MyTheme 的文件夹。你可以把它放在任何你喜欢的地方，只要你能找到它就行。

定义主题

根据 Komari 官方文档：主题配置文件 我们可以知道，Komari需要一个名为 komari-theme.json 的文件来定义主题的基本信息。

现在我们新建一个空白文件，命名为 komari-theme.json，如果你不知道创建什么类型的文件，文本文件(txt)即可，并在其中添加以下内容：

{    "name": "这是我的定制主题",    "short": "CreateATheme",    "description": "这是关于这个主题的简短描述",    "version": "1.0.0",    "author": "Akizon77",    "preview": "preview.png"}

看上面的内容，是不是很有规律？每一行都是一个键（引号前面的）值（引号后面的）对，键和值之间用冒号 : 分隔，每一行的结尾都有一个逗号 ,，除了最后一行，所有的文字都有引号，如果你要修改内容，修改引号内的内容就可以。

到了这里就可能需要一些英语基础，因为这些键都是英文的，但是不用担心，这些都是小学4年级的水平，完全不难，实在不行翻译一下。

我们观察到有一个键名叫 name ，它的值是 这是我的定制主题，name 这个单词就是“名称”的意思（不知道你可以查一下翻译软件），所以 这是我的定制主题 就是这个主题的名称，当然，我不希望大家去这个名字，太随意了。

同理，short 是“简称”的意思，description 是“描述”的意思，version 是“版本”的意思，author 是“作者”的意思，preview 是“预览图”的意思。

关于 short, 这个值是用来区分不同主题的，必须是唯一的，你需要确保它是独一无二的，不可以使用中文，只能是英文或者数字哦，尽量简短且具有代表性。

preview 这个值是预览图的文件名，如果想给你的主题添加预览图，你需要把图片文件放在主题文件夹内，并确保文件名和这里的值一致。

如果你希望 快速的了解JSON 可以看看这个视频。

网页

Komari 的所有网页的代码都存放在 dist 文件夹内，所以我们需要创建一个名为 dist 的文件夹。

首页

我们希望有一个首页来展示主题的内容。我们可以创建一个名为 index.html 的文件(在 dist 文件夹内)。

为了防止找不到进入后台的按钮，我们先把这些东西写进去。

<meta charset="UTF-8"><a href="/admin">进入后台</a>

保存之后，双击 index.html 文件，你会看到一个网页，里面有一个“进入后台”的链接，点击它可以进入 Komari 的后台，但是你会发现我们进不去，因为你的主题还没有被Komari使用，等你完成主题的制作并在 Komari 中启用它之后，就可以访问后台了。

细心的你可能会发现了，网页的定义非常简单，你可以随意修改 进入后台 这个文本，改成你喜欢的文字，刷新浏览器就会生效。

我们现在来添加一些内容。

<a href="/admin">进入后台</a>欢迎来到 MyTheme 主题这是一个由 YourName 制作的主题。

刷新浏览器，你会看到多了一些文字。是不是很简单？只要修改 index.html 文件中的内容，保存后刷新浏览器就能看到变化。这就是我们制作主题的第一步，接下来我们可以继续添加更多的内容和样式，让它看起来更好。

这里就不详细介绍 HTML 了，如果你不懂，可以参考一些 HTML 教程，网上有很多免费的资源可以学习，推荐 十分钟学会写网页【编程前端入门】。

脚本

因为Komari的数据是实时的，我们需要通过脚本来获取和显示数据。我们可以创建一个名为 script.js 的文件(在 dist 文件夹内)。

在编写脚本之前，我们先创建一个盒子来显示数据，并且给它一个 id，方便我们通过脚本来操作它。

<a href="/admin">进入后台</a>欢迎来到 MyTheme 主题这是一个由 YourName 制作的主题。<div id="data-box">这里将显示数据</div>

在我们使用脚本之前，这里的数据默认就是 这里将显示数据 ，当我们编写脚本之后，这里的内容会被处理成我们想要的数据。

现在我们来编写脚本(script.js 文件)。

const myKomari = "https://ss.akz.moe" // 这里是你的 Komari 服务器地址,你在本地测试时需要写成你的服务器地址，当你把主题上传到服务器时，可以改成相对路径留空即可 ""function fetchNodes() { // 定义函数，这个函数用来获取节点数据  const res = await fetch(myKomari + '/api/nodes'); // 接口地址，查询Komari API文档可知  const json = await res.json(); // 把返回的数据解析成JSON格式  if (json.status !== 'success') throw new Error(json.message || '接口返回失败'); // 如果接口返回的状态不是成功，就说明出现了错误  return json.data || [];// 把数据给使用这个函数的代码}function formatBytes(bytes) { // 定义函数，这个函数用来把字节数转换成更易读的格式 比如 1024 显示成 1 KB  if (!bytes) return '0 B'; // 如果字节数是0，直接返回0 B  const k = 1000; // 定义常量，表示每一级的字节数 KB 到 MB 之间相差 1000，类似于米和千米的关系，之间相差1000倍  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];//一些常见的单位  const i = Math.floor(Math.log(bytes) / Math.log(k)); // 运用数学公式计算出应该使用哪个单位  return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]; // 把字节数转换成对应的单位，并保留两位小数}function render(nodes) { // 定义函数，这个函数用来把数据渲染到网页上  const box = document.getElementById('data-box'); // 获取我们之前创建的盒子  if (!box) return; // 如果盒子不存在，就不继续执行  if (!nodes.length) { // 如果没有节点数据，就显示暂无数据    box.textContent = '暂无节点数据';     return;  }  box.innerHTML = nodes.map(n => ` // 把节点数据转换成HTML格式    <div>      <b>${n.name}</b>（${n.region}） - CPU：${n.cpu_name} / 核心：${n.cpu_cores}      <br/>内存：${formatBytes(n.mem_total)}，磁盘：${formatBytes(n.disk_total)}    </div>  `).join(''); // 把所有节点数据连接成一个字符串}async function main() { // 定义主函数  try {    const data = await fetchNodes(); // 获取节点数据    render(data); // 渲染节点数据  } catch (e) { // 如果出现错误，就显示错误信息    const box = document.getElementById('data-box'); // 获取我们之前创建的盒子    if (box) box.textContent = '加载失败：' + (e && e.message ? e.message : e); // 如果出现错误就显示错误信息  }}if (document.readyState === 'loading') { // 如果网页还在加载，就等它加载完再执行主函数  document.addEventListener('DOMContentLoaded', main); } else {  main(); // 如果网页已经加载完，就直接执行主函数}// 代码到此结束

编写完脚本后，我们需要在网页中引入它。我们可以在 index.html 文件中，添加以下代码来引入脚本：

script =脚本
src = source = 来源 = 哪个脚本文件

<script src="script.js"></script>

确保 script.js 文件和 index.html 文件在同一个文件夹内，不如html找不到script。

现在，保存所有文件，刷新浏览器，你应该可以在网页上看到从服务器获取的节点数据了。如果一切正常，你会看到类似以下的内容：

节点名称 （节点区域） - CPU：CPU型号 / 核心：核心数内存：内存大小，磁盘：磁盘大小

恭喜你，你已经成功制作了一个简单的 Komari 主题！接下来，你可以继续学习更多的 HTML、CSS 和 JavaScript 知识，来丰富和美化你的主题。

搭建网页就是一步一步搭积木，只要你愿意花时间去学习和尝试，你一定能做出一个属于你自己的独特主题。

上传主题并应用

  1. 将 MyTheme 文件夹压缩成一个 ZIP 文件。
  2. 登录你的 Komari 后台，进入“主题管理”页面。
  3. 点击“上传主题”按钮，选择你刚才压缩的 ZIP 文件进行上传。
  4. 上传完成后，启用你的主题。

结语

我们仅仅使用了 63+5=68 行代码，就制作了一个最简单的 Komari 主题。你可以根据自己的需求，继续添加更多的功能和样式，让你的主题更加丰富和美观。

进阶