约 600 字
2 分钟
哪吒面板美化分享
文章摘要
最近对哪吒面板进行了美化，感谢原作者faiz佬的美化项目。 分享一下美化成果，包括前端和后端的修改。 欢迎各位自行借鉴。
关于美化
最近花了不少心思在美化上🤣
在这先感谢下原作者faiz佬的[美化项目](https://github.com/decadefaiz/Nezha-Dash-UI)
顺便分享一下我的美化成果，
供大家参考
主页:
HTML
<!-- 引入阿里巴巴图标矢量库 !-->
<head>
<link
rel="stylesheet"
href="//at.alicdn.com/t/c/font_4956031_hmsr66o6t1g.css"
/>
<!-- 替换为您的 Iconfont 链接 -->
</head>
<!-- 哪吒面板界面美化 - 模块化版本 -->
<script>
// ------------------ 哪吒面板基础配置 ------------------
window.CustomBackgroundImage = "https://i.pximg.org/img-original/img/2025/08/16/19/18/16/133961035_p0.jpg"; // 【PC端背景】桌面端页面的主背景图片URL
window.CustomMobileBackgroundImage = "https://i.pximg.org/img-original/img/2025/04/20/12/18/39/129503313_p0.png"; // 【移动端背景】移动端页面的主背景图片URL
window.CustomLogo = "https://images.icon-icons.com/2397/PNG/512/microsoft_onedrive_drive_office_logo_icon_145729.png"; // 【LOGO】页面左上角的LOGO图片URL
window.CustomDesc = "『卍解·花無十日紅』"; // 【描述】LOGO下方的描述文字
window.ShowNetTransfer = true; // 【流量显示】是否在卡片上显示实时上下行流量 (true/false)
window.ForceCardInline = false; // 【卡片排列】是否强制所有服务器卡片在同一行显示 (true/false)
window.DisableAnimatedMan = true; // 【人物动画】是否禁用看板娘动画 (true/false)
window.CustomIllustration = "https://gh-proxy.org/https://github.com/hetw24/homepage/blob/main/public/img/丛雨.png"; // 【自定义插图】右下角的插图URL (需禁用人物动画)
window.FixedTopServerName = false; // 【名称位置】是否将服务器名称固定在卡片顶部 (true/false)
window.ForceTheme = ""; // 【强制主题】强制使用指定主题 ("light" 或 "dark", 留空则跟随系统)
</script>
<!-- 自定义链接 -->
<script src="https://cdn.jsdelivr.net/gh/hetw25/Nezha-Dash-UI@main/js/custom-links.js"></script>
<!-- 自定义插图 -->
<script src="https://cdn.jsdelivr.net/gh/kamanfaiz/Nezha-Dash-UI@main/js/illustration.js"></script>
<!-- 访客信息面板 -->
<script src="https://cdn.jsdelivr.net/gh/kamanfaiz/Nezha-Dash-UI@main/js/visitor-info.js?v=20251214"></script>
<!-- 烟花特效 -->
<script src="https://cdn.jsdelivr.net/gh/kamanfaiz/Nezha-Dash-UI@main/js/fireworks.js"></script>
<!--音乐播放器所用的文件-->
<!-- require APlayer -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<script async src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script async src="https://npm.elemecdn.com/meting2@0.0.1/js/Meting.min.js"></script>
<!--音乐播放器-->
<!--网易云-->
<meting-js fixed="true" volume=0.2 autoplay="true" theme="#409EFF" list-folded="true" server="netease" type="playlist" id="17781757812"></meting-js>仪表盘:
HTML
<script>
// 禁用默认小人图（哪吒官方保留变量）
window.DisableAnimatedMan = true;
</script>
<style>
/* 替换默认头像图（avatar） */
img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
content: url("https://gh-proxy.org/https://github.com/hetw24/imagebed/blob/main/Avatar/wechat%20icon.png") !important;
width: 100px !important;
height: auto !important;
margin-top: -0px;
}END