如何在Docusaurus及HTML中复用Markdown文件？解决部署报错

(a) Docusaurus 中的实现方法 #

方法1：MDX 组件复用（推荐） #

Docusaurus原生支持MDX，可直接将共享Markdown转为MDX组件，在任意MDX/React文件中导入复用：

1. 创建共享MDX文件：比如docs/shared/MyFile.mdx，内容为你的共享Markdown：

## Hello world
这里是需要多处复用的内容

2. 在其他MDX文件中引用：比如docs/anotherFile.mdx：

import MyFile from './shared/MyFile.mdx';

<MyFile />

3. 在React组件中引用：比如src/pages/SomePage.js：

import React from 'react';
import MyFile from '../../docs/shared/MyFile.mdx';

export default function SomePage() {
  return (
    <div>
      <h1>自定义页面</h1>
      <MyFile />
    </div>
  );
}

方法2：使用useDoc钩子复用现有文档 #

如果共享内容是已存在的文档（比如docs/myFile.md），可通过Docusaurus内置钩子获取并渲染：

1. 创建复用组件：src/components/SharedDoc.js：

import React from 'react';
import { useDoc } from '@docusaurus/theme-common/internal';

export default function SharedDoc() {
  // 参数为文档ID，对应sidebars.js配置或文件名（不含后缀）
  const { doc } = useDoc('myFile');
  return doc.content;
}

2. 在MDX/React中引用：比如docs/anotherFile.mdx：

import SharedDoc from '../src/components/SharedDoc';

<SharedDoc />

(b) HTML 中的实现方法 #

纯HTML环境下，可通过Fetch加载Markdown文件，再用第三方库解析为HTML：

1. 放置共享文件：将myFile.md放在静态资源目录（比如static/shared/myFile.md）
2. HTML页面中渲染：

<div id="shared-content"></div>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  // 加载并解析Markdown
  fetch('/shared/myFile.md')
    .then(res => res.text())
    .then(markdown => {
      document.getElementById('shared-content').innerHTML = marked.parse(markdown);
    });
</script>

(c) 更优方案 #

1. 统一目录管理：将所有共享内容集中放在docs/shared/或src/shared-content/目录，便于维护和查找。
2. 封装样式容器：给共享内容添加统一样式时，封装一个React组件包裹MDX内容，避免重复修改样式：

import React from 'react';
import MyFile from './shared/MyFile.mdx';

export default function SharedContentWrapper() {
  return (
    <div className="shared-content">
      <MyFile />
    </div>
  );
}

3. 优先MDX方案：MDX是Docusaurus原生支持的方式，既保留Markdown的简洁，又支持React组件的交互能力，扩展性最强。

你之前尝试的错误点 #

1. 直接导入.md文件到React组件：Docusaurus不会自动将普通Markdown解析为JSX，需改为.mdx格式。
2. 在普通.md文件中使用React语法：普通Markdown不支持JSX导入和组件渲染，需将文件改为.mdx格式，且导入路径需指向正确的组件/MDX文件。

内容的提问来源于stack exchange，提问作者Neil Sandy