MDX Blog Post

Blog posts support Docusaurus Markdown features, such as MDX.

提示

Use the power of React to create interactive blog posts.

<button onClick={() => alert('button clicked!')}>Click me!</button>

#编译会报错，原因是在页面/组件/MDX 里 顶层 就引用了 window、document、或者引用了 内部直接读 window 的库（APlayer、DPlayer、Meting 等）。
import APlayer from 'react-aplayer';
import APlayer from 'react-dplayer';
<DPlayer
  options={{
    container: document.getElementById('dplayer'), // 如果 react-dplayer 已封装可省略
    video: { url: '/path/123.mp4', type: 'auto' }, // 音频同样走 video 字段
    mutex: true,
    autoplay: false,
    theme: '#b7daff'
  }}
  style={{ maxWidth: 640, margin: '2rem auto' }}
/>
<APlayer
  audio={[{
    name: 'Part115.mp3',
    artist: 'English',
    url: '/path/123.mp3',
    cover: '/img/audio.png'
  }]}
  mini={false}
  autoplay={false}
/>

解决方案：

import BrowserOnly from '@docusaurus/BrowserOnly';
<BrowserOnly>
  {() => {
    // 1. 浏览器环境再加载库
    const APlayer = require('aplayer');
    require('aplayer/dist/APlayer.min.css');

    // 2. 把之前写的配置原样搬进来
    const audio = [{
      name: 'English.mp3',
      artist: 'English',
      url: '/path/English.mp3',
      cover: '/img/audio.png'
    }];

    // 3. 创建容器节点并实例化
    return (
      <div
        ref={node => {
          if (!node) return;          // 防止重复创建
          new APlayer({
            container: node,
            audio,
            mini: false,
            autoplay: false
          });
        }}
      />
    );
  }}
</BrowserOnly>