Astro 使用 ClientRouter 后 Twikoo 样式崩了怎么解决

问题现象

在 Astro 博客中启用 <ClientRouter /> (View Transitions) 后，你可能会发现 Twikoo 评论组件的样式崩了：

第一次加载正常
页面切换后样式全部丢失
评论区变成无样式的裸 HTML

问题原因

Twikoo 默认使用的是 twikoo.min.js，这是一个 JS + CSS 合并版。它的样式是通过 JavaScript 动态注入到 <head> 中的。

当 Astro 使用 ClientRouter 进行客户端导航时：

新页面的 DOM 会替换旧页面
之前动态注入的 CSS 被移除
但 Twikoo 脚本检测到已加载，不会重新注入样式

解决方案

使用 twikoo.nocss.js 版本，并单独加载 CSS 文件。

修改 TwikooComment.astro

<!-- 1. 使用 link 标签静态加载 CSS (推荐) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.css">

<script>
// 动态加载 Twikoo 脚本（无 CSS 版本）
const loadTwikoo = () => {
    return new Promise((resolve, reject) => {
        // 检查是否已加载
        if (typeof window.twikoo !== 'undefined') {
            resolve();
            return;
        }
        
        const script = document.createElement('script');
        // 使用 nocss 版本，避免它自动注入 CSS 导致冲突
        script.src = 'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.nocss.js';
        script.onload = () => setTimeout(() => resolve(), 100);
        script.onerror = () => reject(new Error('Failed to load Twikoo'));
        document.head.appendChild(script);
    });
};
</script>

关键改动

之前	之后
`twikoo.min.js`	`twikoo.nocss.js`
CSS 内嵌在 JS 中	独立加载 `twikoo.css`

为什么这样能解决？

CSS 通过 <link> 静态引入：直接写在 HTML 模板中，ClientRouter 会像处理其他样式一样正确处理它，不会误删。
避免 JS 注入的副作用：不需要复杂的 JS 逻辑去判断是否加载过样式，交给浏览器和 Astro 自动管理。
CSS 加载更稳定：样式在页面解析时就开始加载，不会有样式闪烁 (FOUC) 问题。

别忘了处理页面切换

Twikoo 初始化逻辑也需要在页面切换后重新执行：

function initTwikoo() {
    const container = document.getElementById('tcomment');
    if (!container) return;
    
    container.innerHTML = '';  // 清空旧内容
    
    loadTwikoo().then(() => {
        window.twikoo.init({
            envId: 'your-env-id',
            el: '#tcomment',
            path: location.pathname,
            lang: 'zh-CN',
        });
    });
}

// 初始加载
initTwikoo();

// View Transitions 页面切换后重新初始化
document.addEventListener('astro:page-load', initTwikoo);