如何在docusaurus.config.js中配置实现CusDis评论系统全站加载

要让CusDis自动加载到所有页面，无需在每个MDX文件重复编写代码，按以下步骤配置即可：

1. 全局注入CusDis脚本 #

打开项目根目录的docusaurus.config.js，在themeConfig节点下添加scripts数组，将CusDis的脚本加入其中：

module.exports = {
  // 其他已有配置...
  themeConfig: {
    // 其他已有theme配置...
    scripts: [
      {
        src: 'https://cusdis.com/js/cusdis.es.js',
        async: true,
        defer: true,
      },
    ],
  },
};

2. 创建全局CusDis组件 #

在src/components目录下新建CusDis.jsx文件，编写组件动态获取当前页面的标识信息：

import { useLocation } from '@docusaurus/router';
import React from 'react';

export default function CusDis() {
  const location = useLocation();
  const pageUrl = window.location.href;
  const pageTitle = document.title;
  // 用页面路径作为唯一ID，确保每个页面的评论区独立
  const pageId = location.pathname;

  return (
    <div id="cusdis"
      data-host="https://cusdis.com"
      data-app-id="你的CusDis应用ID" // 替换成你自己的App ID
      data-page-id={pageId}
      data-page-url={pageUrl}
      data-page-title={pageTitle}
    />
  );
}

3. 修改全局布局，挂载评论组件 #

要让所有页面都显示评论区，需修改Docusaurus的全局布局组件：

1. 执行命令npm run swizzle @docusaurus/theme-classic Layout，将默认的Layout组件导出到src/theme目录
2. 打开导出后的src/theme/Layout.jsx，导入并在页面内容末尾渲染CusDis组件：

import CusDis from '@site/src/components/CusDis';
import React from 'react';
// 保留原文件的其他默认导入...

export default function Layout(props) {
  const { children, ...rest } = props;
  return (
    <OriginalLayout {...rest}>
      {children}
      {/* 在页面内容与页脚之间添加评论区，可根据需求调整样式 */}
      <div style={{ maxWidth: '960px', margin: '0 auto', padding: '2rem 1.5rem' }}>
        <CusDis />
      </div>
    </OriginalLayout>
  );
}

验证效果 #

重启Docusaurus开发服务器（npm run start），访问任意页面即可看到底部自动加载的CusDis评论区。

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