在Docusaurus网站集成Cusdis评论遇加载异常问题求助

你当前的核心问题是同时混用了react-cusdis组件和原生Cusdis嵌入代码，导致初始化逻辑冲突，才出现本地刷新可用、部署后完全空白的情况。以下是具体修复步骤：

1. 移除冗余的原生嵌入代码 #

删掉你手动添加的<head>里的Cusdis脚本和<div id="cusdis">代码——react-cusdis组件已经封装了脚本加载和DOM渲染逻辑，重复引入会让两者的初始化流程互相干扰。

2. 正确使用ReactCusdis组件 #

直接在页面组件中使用封装好的ReactCusdis组件，传入对应props即可：

import { ReactCusdis } from 'react-cusdis';
// 如果需要处理完整URL，可引入Docusaurus的useBaseUrl
import { useBaseUrl } from '@docusaurus/useBaseUrl';

export default function YourPageComponent(props) {
  const { frontMatter } = props;
  const baseUrl = useBaseUrl();
  // 确保pageUrl是完整的页面地址，Cusdis需要用它关联评论
  const fullPageUrl = `${window.location.origin}${baseUrl}${frontMatter.slug}`;

  return (
    <div>
      {/* 你的页面内容 */}
      <ReactCusdis
        host="https://cusdis.com"
        appId="49da488c-98c0-4284-943e-fc2be8b8504b"
        pageId={frontMatter.id}
        pageUrl={fullPageUrl}
        pageTitle={frontMatter.title}
        theme="auto"
      />
    </div>
  );
}

3. 问题原因说明 #

• 本地仅刷新可用：Docusaurus是单页应用，路由切换时不会重新加载页面，你手动加的原生脚本只会在页面首次加载时执行一次；但刷新页面会重新执行脚本，所以能渲染评论区。
• Vercel部署后空白：生产环境下异步脚本加载时机和React组件渲染顺序不匹配，混用原生代码和React组件会导致Cusdis无法正确绑定到DOM节点，最终完全加载失败。

内容的提问来源于stack exchange，提问作者Bhavya Verma