跟着站内的大佬安装了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也没能修好,望大佬指正。



