跳到主要内容

3 篇博文 含有标签「docusaurus」

查看所有标签

· 阅读需 5 分钟
Sébastien Lorber

docusaurus V2 嵌入 youtube 视频​

docusaurus 支持 mdx 文档， 所以 react 插件应该是可以直接用的，但是我没写过 react 插件，让 chatGPT 教 我写的。

什么是 mdx​

MDX 是一种文件格式，它允许你在 Markdown 文件中编写 JSX 代码。这意味着您可以在文档中直接使用 React 组件。MDX 结合了 Markdown 的简洁性和 React 组件的强大功能，提供了更丰富的内容展示和交互能力。

MDX 文件通常以 .mdx 作为扩展名。您可以像编写普通的 Markdown 文件一样撰写 MDX 文件，但同时可以插入 JSX 代码或导入其他 React 组件。这对于创建自定义布局、交互式示例或嵌入复杂的可视化组件等场景非常有用。

下面是一个简单的 MDX 示例：

import { MyComponent } from './MyComponent';

# 这是一个标题

这是正文内容。

<MyComponent customProp="some-value" />

在上面的示例中，我们首先从 MyComponent.js 文件中导入了自定义的 React 组件 MyComponent。然后，在标题和正文内容之间，我们将 MyComponent 作为 JSX 标签插入到了文档中，并传递了自定义属性 customProp。

某些构建工具，如 Gatsby、Next.js 和 Docusaurus V2，允许您在项目中使用 MDX 文件。要在此类工具中使用 MDX，您需要安装适当的插件并配置相应的选项。您可以查阅相应工具的官方文档了解详细信息。

mdx 文件实现视频embed​

在 Docusaurus V2 中，您可以通过创建一个 React 组件并在 MDX 文件中使用它来实现视频嵌入。下面是具体步骤：

  1. 创建 VideoEmbed 组件：在项目的 src/components 目录下（如果不存在，请创建该目录），创建一个名为 VideoEmbed.js 的文件，并添加以下内容：

    import React from 'react';

    const VideoEmbed = ({ src, width = 560, height = 315 }) => (
      <iframe
        width={width}
        height={height}
        src={src}
        frameBorder="0"
        allow="autoplay; encrypted-media"
        allowFullScreen
      />
    );

    export default VideoEmbed;

    这里我们定义了一个名为 VideoEmbed 的 React 组件，该组件接受 src、width 和 height 属性，用于指定视频 URL 和尺寸。

  2. 在 MDX 文件中使用 VideoEmbed 组件：打开要嵌入视频的 MDX 文档（如 my-document.mdx），然后导入并使用 VideoEmbed 组件。例如：

    import VideoEmbed from '@site/src/components/VideoEmbed';

    # 这是一个标题

    这是正文内容。

    <VideoEmbed src="https://www.youtube.com/embed/视频ID" />

    将“视频ID”替换为实际 YouTube 视频的 ID。如需从其他来源嵌入视频，请修改相应的 src 属性值。

完成以上步骤后，Docusaurus V2 的文档页面将显示嵌入的视频。这种方法同样适用于其他类型的 media embed，只需要根据实际情况调整 VideoEmbed 组件即可。

mdx 嵌入 Youtube 视频​

在 Docusaurus V2 中嵌入 YouTube 视频非常简单。以下是具体步骤：

  1. 创建 YouTubeEmbed 组件：在项目的 src/components 目录下（如果不存在，请创建该目录），创建一个名为 YouTubeEmbed.js 的文件，并添加以下内容：

    import React from 'react';

    const YouTubeEmbed = ({ videoId, width = 560, height = 315 }) => (
      <iframe
        width={width}
        height={height}
        src={`https://www.youtube.com/embed/${videoId}`}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    );

    export default YouTubeEmbed;

    这里我们定义了一个名为 YouTubeEmbed 的 React 组件，该组件接受 videoId、width 和 height 属性，用于指定视频 ID 和尺寸。

  2. 在 MDX 文件中使用 YouTubeEmbed 组件：打开要嵌入视频的 MDX 文档（如 my-document.mdx），然后导入并使用 YouTubeEmbed 组件。例如：

    import YouTubeEmbed from '@site/src/components/YouTubeEmbed';

    # 这是一个标题

    这是正文内容。

    <YouTubeEmbed videoId="视频ID" />

    将“视频ID”替换为实际 YouTube 视频的 ID。

完成以上步骤后，Docusaurus V2 的文档页面将显示嵌入的 YouTube 视频。

示例​

· 阅读需 1 分钟
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet