Komari的哪吒主题美化

跟着站内的大佬安装了Komari探针,感谢大佬的教程,确实挺方便好用的。




不过官方的主题比较少,所以基于我比较喜欢的哪吒面板的主题,靠AI弄了点美化效果上去。

原始哪吒主题:




喜欢的可以自取一下,在站点的自定义头部粘贴保存即可。

需要先安装这个主题:



哪吒探针的修改,自定义字体为谷歌Noto Sans SC,修改右上角的小人,以及随机二次元背景:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]&display=swap">
<style>* { font-family: 'Noto Sans SC', sans-serif !important; }</style>
<script>
  window.ShowNetTransfer = true
  window.CustomIllustration = 'https://tuchuangvps.mikumiku.us.kg/fengjin2.gif'
  window.CustomBackgroundImage = 'https://cdn.moei.cc/public/img/index.php?type=pc&view=2'
</script>




AI写的美化,磨砂效果等:

<script>
(function() {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    /* === 通用液态玻璃卡片 === */
    .rounded-lg.bg-card\\/70,
    .bg-card\\/70.p-4.rounded-\\[10px\\],
    .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70 {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      background: rgba(255,255,255,0.28);
      backdrop-filter: blur(16px) saturate(180%) contrast(110%);
      -webkit-backdrop-filter: blur(16px) saturate(180%) contrast(110%);
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: 0 6px 24px rgba(0,0,0,0.08), inset 0 0 10px rgba(255,255,255,0.15);
      color: #111;
      transition: all 0.3s ease;
      will-change: backdrop-filter, background, box-shadow;
    }

    /* 深色模式 */
    .dark .rounded-lg.bg-card\\/70,
    .dark .bg-card\\/70.p-4.rounded-\\[10px\\],
    .dark .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70 {
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(18px) saturate(200%) contrast(115%);
      -webkit-backdrop-filter: blur(18px) saturate(200%) contrast(115%);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 8px rgba(255,255,255,0.05) inset;
      color: #eee;
    }

    /* hover 浮动增强虚化 */
    .rounded-lg.bg-card\\/70:hover,
    .bg-card\\/70.p-4.rounded-\\[10px\\]:hover,
    .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70:hover {
      background: rgba(255,255,255,0.32);
      backdrop-filter: blur(20px) saturate(180%) contrast(115%);
      -webkit-backdrop-filter: blur(20px) saturate(180%) contrast(115%);
      box-shadow: 0 12px 36px rgba(0,0,0,0.12), inset 0 0 12px rgba(255,255,255,0.2);
    }

    .dark .rounded-lg.bg-card\\/70:hover,
    .dark .bg-card\\/70.p-4.rounded-\\[10px\\]:hover,
    .dark .server-inline-list .rounded-lg.border.text-card-foreground.shadow-lg.flex.items-center.bg-card\\/70:hover {
      background: rgba(0,0,0,0.38);
      backdrop-filter: blur(22px) saturate(200%) contrast(120%);
      -webkit-backdrop-filter: blur(22px) saturate(200%) contrast(120%);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 0 12px rgba(255,255,255,0.05);
    }

    /* === 选项框玻璃虚化 === */
    .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\] {
      position: relative;
      background: rgba(255,255,255,0.28);
      backdrop-filter: blur(18px) saturate(180%) contrast(110%);
      -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(110%);
      border-radius: 50px;
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 0 8px rgba(255,255,255,0.12);
      transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
      will-change: backdrop-filter, background, box-shadow;
    }

    .dark .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\] {
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(20px) saturate(200%) contrast(115%);
      -webkit-backdrop-filter: blur(20px) saturate(200%) contrast(115%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 0 8px rgba(255,255,255,0.05);
    }

    .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\]:hover {
      background: rgba(255, 255, 255, 0.36);
      backdrop-filter: blur(22px) saturate(180%) contrast(115%);
      -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(115%);
      box-shadow: 0 6px 20px rgba(0,0,0,0.08), inset 0 0 12px rgba(255,255,255,0.18);
    }

    .dark .scrollbar-hidden.z-50.flex.flex-col.items-start.overflow-x-scroll.rounded-\\[50px\\]:hover {
      background: rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(24px) saturate(200%) contrast(120%);
      -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(120%);
      box-shadow: 0 6px 20px rgba(0,0,0,0.35), inset 0 0 12px rgba(255,255,255,0.05);
    }
  `;
  document.head.appendChild(style);
})();
</script>




因为全是靠AI完成的,所以不意外的存在一些bug,比如会出现这种情况。

以及有些时候图片太复杂,磨砂上的文字会看不清,反正批斗AI也没能修好,望大佬指正。

27 个赞

不错不错。感谢佬。

佬友好快,我还在修改来着

2 个赞

感谢佬教程已经用上了

本来还想改的更多的,但是CSS限制太多了,AI说他完不成 :rofl:

哈哈,请问佬啊:

  • 内存:256M
  • 硬盘:2GB
  • CPU:1 核

这种配置,可以布置一个探针么?

2 个赞

探针性能要求低,如果服务器不多的话。但256M的内存有点小了,不过搭配SWAP应该能跑。我这边日常内存占用其实也就300M左右。

狠狠地鞭策它


哪吒v0我能用到天荒地老 :upside_down_face:

2 个赞

:tieba_087:不行了,我自己不会代码,全靠AI,后面很多修改AI是修了一个bug多了另一个bug,然后越修问题越多了

折腾也是一种乐趣 :tieba_025:

1 个赞

大佬太强了

1 个赞

这个美化效果杠杠的,真心不错

还是蛮不错的

好久好久没玩探针了,都这么秀了吗?

1 个赞

好漂亮,佬太强了

这个行啊,看着太哇塞啦,能不能分享给我们用一下,大善人。

只有ServerStatus主题能用

2 个赞

好的好的,感谢,非常感谢佬友大善人!

1 个赞

感谢分享