魔改 Docusaurus，给博客文章页面增加了几个功能

import confetti from 'canvas-confetti';

function onClap (e) {
  confetti({
    particleCount: 200, // 默认值：50，要发射的五彩纸屑的数量。
    startVelocity: 30, // 默认值：45，五彩纸屑开始移动的速度，以像素为单位
    angle: 90, // 发射的角度，0 表示水平向右；90 表示垂直向上；180 表示水平向左；270 表示垂直向下
    spread: 120, //默认值：45，五彩纸屑在垂直方向扩散的角度，45 表示五彩纸屑以垂直方向正负 22.5 度角发射
    ticks: 300, // 默认值: 200 ，值越小粒子消失得越快，值越大粒子消失得越慢
    gravity: 0.5, // 默认值：1，粒子下落的速度。1 是全重力，0.5 是半重力，0 表示无重力；大于 1 表示加速下落，负值表示粒子会向上升起。
    origin: { // 彩带起点位置，0.5表示位于页面的中心
      x: 0.5,
      y: 0.5
    }
  })
}

import React from 'react';
import Giscus from "@giscus/react";
import { useColorMode } from '@docusaurus/theme-common';
import styles from './style.module.scss';

export default function GiscusComponent() {
  const { colorMode } = useColorMode();

  return (
    <div className={styles.commentWrapper} id="Comment">
      <Giscus
        repo="fantingsheng/spacexcode-discus"
        repoId="R_kgDOJo****"
        category="General"
        categoryId="DIC_kwDOJoGL984CWxiW"  // E.g. id of "General"
        mapping="url"                        // Important! To map comments to URL
        term="Welcome to @giscus/react component!"
        strict="0"
        reactionsEnabled="1"
        emitMetadata="1"
        inputPosition="top"
        theme={colorMode}
        lang="zh-Hans"
        loading="lazy"
        crossorigin="anonymous"
        async
      />
    </div>
  );
}

const onCopy = () => {
  navigator.clipboard.writeText(blogUrl)
  .then(() => {
    console.log("复制链接成功");
  })
  .catch((error) => {
    console.error("复制时出错: ", error);
  });
};

import QRCode from 'qrcode.react';

<QRCode value="https://spacexcode.com/blog" renderAs="svg" />

import React from 'react';

export default function () {
  const [paused, setPaused] = React.useState(true);
  const audioRef = React.useRef();

  const onPlayAudio = () => {
    if (metadata.frontMatter.audio) {
      audioRef.current.play();
      paused ? audioRef.current.play() : audioRef.current.pause();
      setPaused(!paused)
    } else {
      console.log("本文未上传音频");
    }
  }

  return (
    <IconButton aria-label="听全文" onClick={onPlayAudio}>
      {paused ?
          (<svg width="24" height="24" viewBox="0 0 24 24" fill="#6B6B6B"><path fillRule="evenodd" clipRule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0zm9-10a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.38 10.42l-4.6 3.06a.5.5 0 0 1-.78-.41V8.93c0-.4.45-.63.78-.41l4.6 3.06c.3.2.3.64 0 .84z" fill="currentColor"></path></svg>)
        :
        (<svg viewBox="0 0 256 256" width="24" height="24"><rect width="256" height="256" fill="none"></rect>
          <circle cx="128" cy="128" r="96" fill="none" stroke="#6B6B6B" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8"></circle>
          <line x1="104" x2="104" y1="96" y2="160" fill="none" stroke="#6B6B6B" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8"></line>
          <line x1="152" x2="152" y1="96" y2="160" fill="none" stroke="#6B6B6B" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8"></line>
        </svg>)
      }
    </IconButton>
    <audio ref={audioRef} src={metadata.frontMatter.audio}></audio>
  )
}