哪吒面板美化分享

最近花了不少心思在美化上 :rofl:

在这先感谢下原作者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://cdn.jsdelivr.net/gh/hetw24/homepage/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 src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>

<!-- require MetingJS -->

<script src="https://npm.elemecdn.com/meting2@0.0.1/js/Meting.min.js"></script>

<!-- 自行配置音乐选项 auto 内容 -->

<meting-js fixed="true" autoplay="false" theme="#409EFF" list-folded="true" auto="https://music.163.com/playlist?id=17773636935&uct2=U2FsdGVkX1/23Rzx72wtBphXfwer2fVTFkmzylv4k2w="></meting-js>

后端

HTML

<script>
  // 禁用默认小人图（哪吒官方保留变量）
  window.DisableAnimatedMan = true;
</script>
<style>
  /* 替换默认头像图（avatar） */
  img[src*="https://api.dicebear.com/7.x/notionists/svg"] {
    content: url("https://cdn.jsdelivr.net/gh/hetw24/homepage/public/img/He-TW.jpg") !important;
    width: 100px !important;
    height: auto !important;
    margin-top: -0px;
  }

哪吒面板美化分享

文章摘要

相关文章