自定义组件

BrowserWindow

http://localhost:3000

Hello World

像这样的浏览器窗口组件没有一个官方的开源组件可供安装，但是官网文档库用了，并且开源，所以我们可以直接从官网文档的源代码里拿。

https://github.com/facebook/docusaurus/tree/main/website/src/components/BrowserWindow

里面还有一个 IframeWindow，如果有需要也可以拿来用。

显示 Lottie 动画

在 Lottie 相关的资源中可以看到，有多个可用的 npm 包可供选择，这里以 react-lottie 为例，使用起来非常简单。

安装依赖

pnpm add react-lottie

使用示例

目前只能在 mdx 文件中使用，md 里直接用 ![] 来引用搞了好久，没成功。

import LottieAnimation from '@/components/LottieAnimation';
import * as animationData from '@site/static/lottie/github.json';

<LottieAnimation animationData={animationData} width={200} height={200} >
  该动画由 Lottie 生成
</LottieAnimation>

该动画由 Lottie 生成

组件代码

import React from "react";
import Lottie from "react-lottie";

const LottieAnimation = ({
  animationData,
  height = 400,
  width = 400,
  loop = true,
  autoplay = true,
  children,
}) => {
  const defaultOptions = {
    loop,
    autoplay,
    animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <>
      <Lottie options={defaultOptions} height={height} width={width} />
      {children && (
        <div className="caption flex justify-center items-center text-sm text-gray-800 mb-4 mt-4">
          {children}
        </div>
      )}
    </>
  );
};

export default LottieAnimation;