<!-- 1. 先静态显示阅读量/评论数的骨架屏 -->
<!-- 可选，不需要可以直接删掉下面的-->
<div id="waline-info">
  <div style="display: flex; align-items: center;">
    阅读量: <span class="waline-pageview-count"  style="margin-left: 5px;">--</span>
  </div>
  <div style="display: flex; align-items: center;">
    评论数：<span class="waline-comment-count" style="margin-left: 5px;">--</span>
  </div>
</div>

<!-- 2. 评论容器（初始为空） -->
<div id="waline"></div>

<!-- 3. 异步加载逻辑 -->
<script is:inline>
  (async () => {
    const loadCSS = () => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://unpkg.com/@waline/client@v3/dist/waline.css';
      document.head.appendChild(link);
    };

    const { init } = await import('https://unpkg.com/@waline/client@v3/dist/waline.js');

    const initWaline = () => {
      const isDark = document.documentElement.classList.contains('dark');
      init({
        el: '#waline',
        serverURL: 'https://waline.blueke.top/',
        dark: isDark ? 'html.dark' : false,
        pageview: true,
        comment: true,
        emoji: [
          'https://gcore.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs',
          'https://cdn.jsdelivr.net/npm/@waline/emojis@1.3.0/qq',
        ],
      });
    };

    // 并行加载资源
    loadCSS();
    initWaline();

    new MutationObserver(() => {
      const container = document.getElementById('waline');
      if (container?.innerHTML) {
        container.innerHTML = '';
        initWaline();
      }
    }).observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
  })();
</script>

<style>
  #waline-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  #waline {
    clear: both;
  }

  .waline-pageview-count::before,
  .waline-comment-count::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: #eee;
    animation: pulse 1.5s infinite;
    vertical-align: middle;
    margin-right: 0.3em;
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
</style>