MyBlog-Next/src/components/TwikooComments.astro

---
interface Props {
  envId: string;
  path?: string;
}

const { envId, path } = Astro.props;
---

<div class="twikoo-wrapper mx-auto max-w-2xl">
  <div id="tcomment" data-env-id={envId} data-path={path || 'auto'}></div>
</div>

<script is:inline src="https://unpkg.zhimg.com/twikoo@1/dist/twikoo.all.min.js" defer></script>

<script is:inline>
  var initDone = false;

  function initTwikoo() {
    var container = document.getElementById('tcomment');
    if (!container) return;

    var envId = container.dataset.envId;
    var path = container.dataset.path || location.pathname;

    function tryInit(retry) {
      if (typeof window.twikoo !== 'undefined') {
        window.twikoo.init({
          envId: envId,
          el: '#tcomment',
          path: path,
          lang: 'zh-CN',
        });
        return;
      }
      if (retry < 30) {
        setTimeout(function () { tryInit(retry + 1); }, 300);
      } else {
        container.innerHTML = '<p class="text-gray-500">评论正在赶来…</p>';
      }
    }

    tryInit(0);
  }

  document.addEventListener('DOMContentLoaded', function () {
    initTwikoo();
    initDone = true;
  });

  document.addEventListener('astro:after-swap', function () {
    initDone = false;
    initTwikoo();
  });

  if (
    document.readyState === 'interactive' ||
    document.readyState === 'complete'
  ) {
    if (!initDone) {
      initTwikoo();
      initDone = true;
    }
  }
</script>

<style is:global>
  /* 1. 评论区容器：防止加载时内容溢出 */
  #tcomment {
    min-height: 200px;
    overflow: hidden;          /* 加载时隐藏溢出（表情、字体等） */
  }

  /* 2. 强制 Footer 回到正常文档流，不让它覆盖评论区 */
  footer {
    position: static !important;  /* 移除 sticky/fixed */
    margin-top: 2rem !important;
  }

  /* 3. 如果 Paper 用了 footer 的 class 而非标签，同样处理 */
  .footer,
  [class*="footer"] {
    position: static !important;
  }

  /* 暗色模式适配（仅保留必要的输入背景修复） */
  .dark #tcomment .tk-content textarea,
  .dark #tcomment .tk-input input {
    background-color: rgb(39 39 42) !important;
    border-color: rgb(63 63 70) !important;
    color: rgb(228 228 231) !important;
  }
</style>