<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" 
     th:attr="data-welcome-enabled=${theme.config.welcome != null and theme.config.welcome.welcomeConfig != null and theme.config.welcome.welcomeConfig.enabled != null and !theme.config.welcome.welcomeConfig.enabled ? 'false' : 'true'}"
     th:fragment="html(title, content, head)">
<head>
  <meta name="default-theme" th:content="${theme.config.basic != null and theme.config.basic.defaultTheme != null ? theme.config.basic.defaultTheme : 'dark'}" />
  <script>
    (function() {
      var meta = document.querySelector('meta[name="default-theme"]');
      var defaultTheme = (meta && meta.content) || 'dark';
      var scheme = localStorage.getItem('color-scheme');
      if (!scheme || scheme === 'auto') {
        scheme = defaultTheme;
      }
      document.documentElement.setAttribute('data-theme', scheme);
      document.documentElement.setAttribute('data-color-scheme', scheme);
      document.documentElement.setAttribute('data-default-theme', defaultTheme);
    })();
  </script>
  <script th:inline="javascript">
    (function() {
      var enabled = /*[[${theme.config.basic != null and theme.config.basic.typographyConfig != null and theme.config.basic.typographyConfig.enabled != null ? theme.config.basic.typographyConfig.enabled : false}]]*/ false;
      if (!(enabled === true || enabled === 'true')) return;

      var fontKey = /*[[${theme.config.basic != null and theme.config.basic.typographyConfig != null and theme.config.basic.typographyConfig.globalFont != null ? theme.config.basic.typographyConfig.globalFont : ''}]]*/ '';
      var fontMap = {
        noto_sans_sc: '"Noto Sans SC", sans-serif',
        pingfang_sc: '"PingFang SC", sans-serif',
        microsoft_yahei: '"Microsoft YaHei", sans-serif',
        lxgw_wenkai: '"LXGW WenKai", serif',
        smiley_sans: '"Smiley Sans Oblique", "LXGW WenKai", sans-serif',
        zcool_kuaile: '"ZCOOL KuaiLe", "Comic Sans MS", cursive',
        youyuan: '"YouYuan", "Microsoft YaHei", sans-serif',
        styuanti: '"STYuanti", "PingFang SC", "Microsoft YaHei", sans-serif',
        stkaiti: '"STKaiti", "KaiTi", serif',
        stxingkai: '"STXingkai", "KaiTi", cursive',
        harmonyos_sans_sc: '"HarmonyOS Sans SC", sans-serif',
        misans: '"MiSans", sans-serif',
        inter: '"Inter", sans-serif'
      };

      var resolved = '';
      if (fontKey !== null && fontKey !== undefined) {
        var key = String(fontKey).trim();
        resolved = fontMap[key] || key;
      }
      if (!resolved) return;

      var root = document.documentElement;
      root.style.setProperty('--font-global', resolved);
      root.style.setProperty('--font-sans', resolved);
      root.style.setProperty('--font-serif', resolved);
      root.style.setProperty('--font-rounded', resolved);
      root.style.setProperty('--font-mono', resolved);
      root.style.setProperty('--halo-cw-base-font-family', resolved);
      root.style.setProperty('--link-submit-widget-base-font-family', resolved);
    })();
  </script>

  <script>
    (function(){
      var welcomeEnabled = document.documentElement.getAttribute('data-welcome-enabled');
      var welcomed = sessionStorage.getItem('serenity-welcomed');

      if (welcomeEnabled === 'false') {
        document.write('<style id="welcome-init-style">.welcome-overlay{display:none!important}<\/style>');
        return;
      }
      
      if(!welcomed){

        document.write('<style id="welcome-init-style">.header,.footer,.back-to-top,.page-gradient,.hero-background{opacity:0!important;visibility:hidden!important}body{overflow:hidden!important}.welcome-overlay{display:flex!important}<\/style>');
      } else {

        document.write('<style id="welcome-init-style">.welcome-overlay{display:none!important}<\/style>');
      }
    })();
  </script>
  
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="generator" content="Halo" />
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
  <title th:text="${title != null ? title + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title) : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}">Serenity-Grace</title>
  <meta name="description" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}" />
  
  <meta th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && theme.config.seo.seoConfig.keywords != null && !#strings.isEmpty(theme.config.seo.seoConfig.keywords)}" 
        name="keywords" 
        th:content="${theme.config.seo.seoConfig.keywords}" />
  
  <meta th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && theme.config.seo.seoConfig.baiduSiteVerification != null && !#strings.isEmpty(theme.config.seo.seoConfig.baiduSiteVerification)}" 
        name="baidu-site-verification" 
        th:content="${theme.config.seo.seoConfig.baiduSiteVerification}" />
  
  <meta th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && theme.config.seo.seoConfig.googleSiteVerification != null && !#strings.isEmpty(theme.config.seo.seoConfig.googleSiteVerification)}" 
        name="google-site-verification" 
        th:content="${theme.config.seo.seoConfig.googleSiteVerification}" />
  

  <meta property="og:site_name" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${title != null ? title + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title) : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta property="og:description" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}" />
  <meta property="og:image" th:content="${site.logo != null && !#strings.isEmpty(site.logo) ? site.logo : '/themes/theme-Serenity/assets/public/ics6.webp'}" />
  <meta property="og:locale" content="zh_CN" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" th:content="${title != null ? title + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title) : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta name="twitter:description" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}" />
  <meta name="twitter:image" th:content="${site.logo != null && !#strings.isEmpty(site.logo) ? site.logo : '/themes/theme-Serenity/assets/public/ics6.webp'}" />

  
  <link rel="stylesheet" th:href="@{/assets/fonts/qweather-icons.css}" media="print" onload="this.media='all'" />
  <link rel="stylesheet" th:href="@{/assets/fonts/fontawesome.min.css}" media="print" onload="this.media='all'" />
  
  <link rel="preload" th:href="@{/assets/css/base.css}" as="style" />
  <link rel="stylesheet" th:href="@{/assets/css/lenis.css}" />
  <link rel="stylesheet" th:href="@{/assets/css/aos.css}" media="print" onload="this.media='all'" />
  <link rel="stylesheet" th:href="@{/assets/css/swiper-bundle.min.css}" media="print" onload="this.media='all'" />

  <style>

    @keyframes aos-fallback {
      to { opacity: 1; transform: none; }
    }
    [data-aos] {
      animation: aos-fallback 0s 3s forwards;
    }

    .aos-initialized [data-aos] {
      animation: none;
    }
  </style>
  <link rel="stylesheet" th:href="@{/assets/css/base.css}" />


  <link rel="stylesheet" th:if="${theme.config.welcome == null || theme.config.welcome.welcomeConfig == null || theme.config.welcome.welcomeConfig.enabled == null || theme.config.welcome.welcomeConfig.enabled}" th:href="@{/assets/css/welcome.css}" />
  
  <th:block th:replace="${head}" />
  
  <script th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && (theme.config.seo.seoConfig.enableJsonLd == null || theme.config.seo.seoConfig.enableJsonLd)}" type="application/ld+json" th:inline="javascript">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title}]]*/ "Serenity's Blog",
    "url": /*[[${site.url}]]*/ "",
    "description": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}]]*/ "",
    "image": /*[[${site.logo != null && !#strings.isEmpty(site.logo) ? site.logo : '/themes/theme-Serenity/assets/public/ics6.webp'}]]*/ "",
    "author": {
      "@type": "Person",
      "name": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.author != null ? theme.config.basic.siteInfo.author : (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}]]*/ "Serenity"
    },
    "publisher": {
      "@type": "Organization",
      "name": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title}]]*/ "Serenity's Blog",
      "logo": {
        "@type": "ImageObject",
        "url": /*[[${site.logo != null && !#strings.isEmpty(site.logo) ? site.logo : '/themes/theme-Serenity/assets/public/ics6.webp'}]]*/ ""
      }
    },
    "potentialAction": {
      "@type": "SearchAction",
      "target": {
        "@type": "EntryPoint",
        "urlTemplate": /*[[${site.url + '/?s={search_term_string}'}]]*/ ""
      },
      "query-input": "required name=search_term_string"
    }
  }
  </script>
</head>
<body>
  <div class="welcome-overlay" id="welcomeOverlay" th:if="${theme.config.welcome == null || theme.config.welcome.welcomeConfig == null || theme.config.welcome.welcomeConfig.enabled == null || theme.config.welcome.welcomeConfig.enabled}">
    <button class="welcome-theme-toggle" id="welcomeThemeToggle" title="切换主题" aria-label="切换主题">
      <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="5"/>
        <line x1="12" y1="1" x2="12" y2="3"/>
        <line x1="12" y1="21" x2="12" y2="23"/>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
        <line x1="1" y1="12" x2="3" y2="12"/>
        <line x1="21" y1="12" x2="23" y2="12"/>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
      </svg>
      <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
      </svg>
    </button>
    
    <div class="welcome-content">
      <div class="welcome-logo-wrapper">
        <img th:src="${site.logo ?: '/themes/theme-Serenity/assets/public/ics6.webp'}" 
             alt="Logo" 
             class="welcome-logo" />
        <div class="welcome-logo-ring"></div>
        <div class="welcome-logo-ring welcome-logo-ring-2"></div>
      </div>
      <h1 class="welcome-title" th:text="${theme.config.hero != null and theme.config.hero.profileInfo != null and theme.config.hero.profileInfo.name != null ? theme.config.hero.profileInfo.name : site.title}"
          th:style="${theme.config.hero != null and theme.config.hero.colorConfig != null and theme.config.hero.colorConfig.nameColor != null and !#strings.isEmpty(theme.config.hero.colorConfig.nameColor) ? 'background:' + theme.config.hero.colorConfig.nameColor + ';-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent' : ''}">Serenity</h1>
      <p class="welcome-tagline" th:text="${theme.config.hero != null and theme.config.hero.profileInfo != null and theme.config.hero.profileInfo.tagline != null ? theme.config.hero.profileInfo.tagline : '热爱可抵岁月漫长'}"
         th:style="${theme.config.hero != null and theme.config.hero.colorConfig != null and theme.config.hero.colorConfig.taglineColor != null and !#strings.isEmpty(theme.config.hero.colorConfig.taglineColor) ? (#strings.contains(theme.config.hero.colorConfig.taglineColor, 'gradient') ? 'background:' + theme.config.hero.colorConfig.taglineColor + ';-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent' : 'color:' + theme.config.hero.colorConfig.taglineColor) : ''}">热爱可抵岁月漫长</p>
      <p class="welcome-bio" th:text="${theme.config.hero != null and theme.config.hero.profileInfo != null and theme.config.hero.profileInfo.bio != null ? theme.config.hero.profileInfo.bio : '专注于前端开发，热爱开源，喜欢分享技术与生活。'}"
         th:style="${theme.config.hero != null and theme.config.hero.colorConfig != null and theme.config.hero.colorConfig.bioColor != null and !#strings.isEmpty(theme.config.hero.colorConfig.bioColor) ? (#strings.contains(theme.config.hero.colorConfig.bioColor, 'gradient') ? 'background:' + theme.config.hero.colorConfig.bioColor + ';-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent' : 'color:' + theme.config.hero.colorConfig.bioColor) : ''}">专注于前端开发，热爱开源，喜欢分享技术与生活。</p>
      <div class="welcome-particles" id="welcomeParticles"></div>
    </div>

    <div class="welcome-mascot-wrapper" th:if="${theme.config.welcome == null || theme.config.welcome.welcomeConfig == null || theme.config.welcome.welcomeConfig.showMascot == null || theme.config.welcome.welcomeConfig.showMascot}">
      <div class="welcome-mascot-bubble" id="welcomeMascotBubble">
        <span class="bubble-text">点击任意处进入哦~</span>
        <div class="bubble-tail"></div>
      </div>
      <div class="welcome-mascot-row">
        <div class="welcome-mascot" id="welcomeMascot">

          <img th:src="${theme.config.welcome != null && theme.config.welcome.welcomeConfig != null && theme.config.welcome.welcomeConfig.mascotDark != null && !#strings.isEmpty(theme.config.welcome.welcomeConfig.mascotDark) ? theme.config.welcome.welcomeConfig.mascotDark : '/themes/theme-Serenity/assets/images/welcome/babara.gif'}" 
               alt="" class="welcome-mascot-img welcome-mascot-dark" />

          <img th:src="${theme.config.welcome != null && theme.config.welcome.welcomeConfig != null && theme.config.welcome.welcomeConfig.mascotLight != null && !#strings.isEmpty(theme.config.welcome.welcomeConfig.mascotLight) ? theme.config.welcome.welcomeConfig.mascotLight : '/themes/theme-Serenity/assets/images/welcome/kirara.gif'}" 
               alt="" class="welcome-mascot-img welcome-mascot-light" />
        </div>
        <a th:if="${theme.config.welcome == null || theme.config.welcome.welcomeConfig == null || theme.config.welcome.welcomeConfig.mascotCredit == null || !#strings.isEmpty(theme.config.welcome.welcomeConfig.mascotCredit)}"
           th:href="${theme.config.welcome != null && theme.config.welcome.welcomeConfig != null && theme.config.welcome.welcomeConfig.mascotCredit != null ? theme.config.welcome.welcomeConfig.mascotCredit : 'https://x.com/Seseren_kr'}" 
           target="_blank" rel="noopener" class="welcome-mascot-credit" title="GIF Source" aria-label="GIF 来源">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
      </div>
    </div>
  </div>

  <script th:if="${theme.config.welcome != null and theme.config.welcome.welcomeConfig != null and theme.config.welcome.welcomeConfig.sayings != null and !#strings.isEmpty(theme.config.welcome.welcomeConfig.sayings)}" th:inline="javascript">
    window.WELCOME_SAYINGS = /*[[${theme.config.welcome.welcomeConfig.sayings}]]*/ '';
    window.WELCOME_SAYINGS = window.WELCOME_SAYINGS.split('\n').filter(function(s) { return s.trim(); });
  </script>

  <th:block th:if="${theme.config.basic != null and theme.config.basic.loadingConfig != null and theme.config.basic.loadingConfig.enableLoading}">
    <div class="page-transition" id="page-transition">
      <img class="page-transition-gif" th:src="${theme.config.basic.loadingConfig.loadingGif != null and !#strings.isEmpty(theme.config.basic.loadingConfig.loadingGif) ? theme.config.basic.loadingConfig.loadingGif : '/themes/theme-Serenity/assets/images/welcome/kirara.gif'}" alt="加载中" />
    </div>
  </th:block>
  
  <div class="page-gradient"></div>

  <th:block th:replace="~{modules/header}"></th:block>
  
  <th:block th:replace="~{modules/search-modal}"></th:block>

  <main class="main" id="pjax-container">
    <th:block th:replace="${content}" />
  </main>

  <th:block th:replace="~{modules/footer}"></th:block>

  <th:block th:if="${theme.config.music != null && theme.config.music.musicConfig != null && theme.config.music.musicConfig.enabled && ((!#strings.isEmpty(theme.config.music.musicConfig.playlistId)) || (!#strings.isEmpty(theme.config.music.musicConfig.metingApi)))}">
  <link rel="stylesheet" th:href="@{/assets/css/APlayer.min.css}" />
  <link rel="stylesheet" th:href="@{/assets/css/music-panel.css}" />
  <div id="nav-music" 
       th:attr="data-autoplay=${theme.config.music.musicConfig.autoPlay != null && theme.config.music.musicConfig.autoPlay ? 'true' : 'false'},
                data-meting-api=${theme.config.music.musicConfig.metingApi},
                data-playlist-id=${theme.config.music.musicConfig.playlistId}">
    <a id="nav-music-hoverTips" class="nav-music-tips">播放音乐</a>
    <meting-js
      th:if="${!#strings.isEmpty(theme.config.music.musicConfig.metingApi)}"
      th:attr="api=${theme.config.music.musicConfig.metingApi}"
      type="playlist"
      mutex="true"
      preload="auto"
      data-lrctype="0"
      order="random">
    </meting-js>
    <meting-js
      th:if="${#strings.isEmpty(theme.config.music.musicConfig.metingApi)}"
      th:id="${theme.config.music.musicConfig.playlistId}"
      server="netease"
      type="playlist"
      mutex="true"
      preload="auto"
      data-lrctype="0"
      order="random">
    </meting-js>
  </div>
  <!-- 展开式播放面板 -->
  <div id="music-panel" class="music-panel" style="display:none">
    <div class="music-panel-inner">
      <!-- 顶部：封面 + 歌曲信息 + 歌词/列表按钮 -->
      <div class="mp-header">
        <div class="mp-cover">
          <img id="mpCover" src="" alt="cover" />
        </div>
        <div class="mp-song-info">
          <div class="mp-title" id="mpTitle">Sample Song</div>
          <div class="mp-artist" id="mpArtist">Sample Artist</div>
          <div class="mp-time"><span id="mpCurrent">0:00</span> / <span id="mpDuration">0:00</span></div>
        </div>
        <div class="mp-header-actions">
          <button class="mp-btn mp-btn-list" id="mpListToggle" title="播放列表" aria-label="播放列表">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
          </button>
        </div>
      </div>
      <!-- 播放列表区域 -->
      <div class="mp-list-area" id="mpListArea" style="display:none" data-lenis-prevent>
        <ul class="mp-playlist" id="mpPlaylist"></ul>
      </div>
      <!-- 进度条 -->
      <div class="mp-progress-wrap">
        <div class="mp-progress" id="mpProgress">
          <div class="mp-progress-played" id="mpPlayed"></div>
          <div class="mp-progress-thumb" id="mpThumb"></div>
        </div>
      </div>
      <!-- 控制按钮 -->
      <div class="mp-controls">
        <button class="mp-btn mp-btn-mode" id="mpMode" title="播放模式" aria-label="播放模式">
          <!-- 列表顺序图标 -->
          <svg class="mp-icon-order" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
            <line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
          </svg>
          <!-- 随机播放图标 -->
          <svg class="mp-icon-random" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none">
            <polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/>
            <polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/>
            <line x1="4" y1="4" x2="9" y2="9"/><line x1="9" y1="4" x2="4" y2="9"/>
          </svg>
        </button>
        <button class="mp-btn mp-btn-prev" id="mpPrev" title="上一首" aria-label="上一首">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
        </button>
        <button class="mp-btn mp-btn-play" id="mpPlay" title="播放/暂停" aria-label="播放或暂停">
          <svg class="mp-icon-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          <svg class="mp-icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
        </button>
        <button class="mp-btn mp-btn-next" id="mpNext" title="下一首" aria-label="下一首">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
        </button>
        <button class="mp-btn mp-btn-loop" id="mpLoop" title="循环模式" aria-label="循环模式">
          <!-- 列表循环图标 -->
          <svg class="mp-icon-loop-all" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
            <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
          </svg>
          <!-- 单曲循环图标 -->
          <svg class="mp-icon-loop-one" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none">
            <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
            <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
            <text x="12" y="14" font-size="7" fill="currentColor" stroke="none" text-anchor="middle" font-weight="bold">1</text>
          </svg>
          <!-- 关闭循环图标 (带删除线) -->
          <svg class="mp-icon-loop-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none">
            <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
            <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
            <line x1="1" y1="1" x2="23" y2="23" stroke-width="2.5"/>
          </svg>
        </button>
      </div>
      <!-- 底部：音量 + 收起 -->
      <div class="mp-footer">
        <button class="mp-btn mp-btn-vol" id="mpVolBtn" title="音量" aria-label="音量">
          <svg class="mp-icon-vol" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
          <svg class="mp-icon-mute" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
        </button>
        <div class="mp-volume-wrap">
          <div class="mp-volume-bar" id="mpVolumeBar">
            <div class="mp-volume-level" id="mpVolumeLevel"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <script th:src="@{/assets/js/APlayer.min.js}"></script>
  <script th:src="@{/assets/js/Meting2.min.js}"></script>
  </th:block>

  <button class="back-to-top" id="back-to-top" aria-label="返回顶部">
    <svg class="back-to-top-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 15l-6-6-6 6"/>
    </svg>
    <span class="back-to-top-text">TOP</span>
  </button>

  <script th:src="@{/assets/js/lenis.min.js}" defer></script>
  <script th:src="@{/assets/js/swiper-bundle.min.js}" defer></script>
  <script th:src="@{/assets/js/aos.js}" defer></script>
  <script th:src="@{/assets/js/main.js}" defer></script>
    <script th:src="@{/assets/js/pjax.js}" defer></script>
  <script th:src="@{/assets/js/search.js}" defer></script>
  <script th:src="@{/assets/js/sidebar-sticky.js}" defer></script>
  
  <!-- 欢迎页控制脚本（全局） -->
  <script th:if="${theme.config.welcome == null || theme.config.welcome.welcomeConfig == null || theme.config.welcome.welcomeConfig.enabled == null || theme.config.welcome.welcomeConfig.enabled}" th:src="@{/assets/js/welcome.js}" defer></script>
  
  <!-- 音乐播放器控制 -->
  <script th:src="@{/assets/js/music-panel.js}" defer></script>
  <halo:footer />
</body>
</html>
