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>

<!-- 最新版 Twikoo 前端，is:inline 防止 Astro 处理 -->
<script is:inline src="https://cdn.jsdelivr.net/npm/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;

    if (typeof window.twikoo === 'undefined') {
      setTimeout(function () {
        if (typeof window.twikoo !== 'undefined') {
          doInit(container, envId, path);
        } else {
          container.innerHTML =
            '<p class="text-red-500">评论系统加载失败，请刷新重试</p>';
        }
      }, 800);
      return;
    }

    doInit(container, envId, path);
  }

  function doInit(container, envId, path) {
    try {
      window.twikoo.init({
        envId: envId,
        el: '#tcomment',
        path: path,
        lang: 'zh-CN',
      });
    } catch (e) {
      console.error('Twikoo init error:', e);
      container.innerHTML = '<p class="text-red-500">评论初始化失败</p>';
    }
  }

  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>
  #tcomment {
    min-height: 200px;
  }

  .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;
  }

  #tcomment .tk-submit {
    max-width: 120px;
  }
</style>