diff --git a/website/docs/tutorial/choose-driver.md b/website/docs/tutorial/choose-driver.md
index 454f994f..86998151 100644
--- a/website/docs/tutorial/choose-driver.md
+++ b/website/docs/tutorial/choose-driver.md
@@ -15,7 +15,7 @@ options:
 :::
 
 :::tip 提示
-如何**安装**驱动器请参考 [安装驱动器](../start/install-driver.md)
+如何**安装**驱动器请参考 [安装驱动器](../start/install-driver.mdx)
 
 如何**使用**驱动器请参考 [配置](./configuration.md#driver)
 :::
diff --git a/website/docs/tutorial/plugin/introduction.md b/website/docs/tutorial/plugin/introduction.md
index 7b0271d1..f0d0709a 100644
--- a/website/docs/tutorial/plugin/introduction.md
+++ b/website/docs/tutorial/plugin/introduction.md
@@ -15,7 +15,7 @@ description: 插件入门
 
 ### 模块插件（单文件形式）
 
-在合适的路径创建一个 `.py` 文件即可。例如在 [创建项目](../create-project.md) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件 `foo.py`。
+在合适的路径创建一个 `.py` 文件即可。例如在 [创建项目](../create-project.mdx) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件 `foo.py`。
 
 ```tree title=Project {4}
 📦 AweSome-Bot
@@ -37,7 +37,7 @@ description: 插件入门
 
 ### 包插件（文件夹形式）
 
-在合适的路径创建一个文件夹，并在文件夹内创建文件 `__init__.py` 即可。例如在 [创建项目](../create-project.md) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件夹 `foo`，并在这个文件夹内创建一个文件 `__init__.py`。
+在合适的路径创建一个文件夹，并在文件夹内创建文件 `__init__.py` 即可。例如在 [创建项目](../create-project.mdx) 中创建的项目中，我们可以在 `awesome_bot/plugins/` 目录中创建一个文件夹 `foo`，并在这个文件夹内创建一个文件 `__init__.py`。
 
 ```tree title=Project {4,5}
 📦 AweSome-Bot
diff --git a/website/docs/tutorial/plugin/load-plugin.md b/website/docs/tutorial/plugin/load-plugin.md
index 90aed864..60543d31 100644
--- a/website/docs/tutorial/plugin/load-plugin.md
+++ b/website/docs/tutorial/plugin/load-plugin.md
@@ -14,7 +14,7 @@ options:
 请勿在插件被加载前 `import` 插件模块，这会导致 NoneBot 无法将其转换为插件而损失部分功能。
 :::
 
-加载插件通常在机器人的入口文件进行，例如在 [创建项目](../create-project.md) 中创建的项目中的 `bot.py` 文件。在 NoneBot 初始化完成后即可加载插件。
+加载插件通常在机器人的入口文件进行，例如在 [创建项目](../create-project.mdx) 中创建的项目中的 `bot.py` 文件。在 NoneBot 初始化完成后即可加载插件。
 
 ```python title=bot.py {5}
 import nonebot
diff --git a/website/docs/tutorial/register-adapter.md b/website/docs/tutorial/register-adapter.md
index 98638c1f..ca9d0238 100644
--- a/website/docs/tutorial/register-adapter.md
+++ b/website/docs/tutorial/register-adapter.md
@@ -11,7 +11,7 @@ options:
 # 使用适配器
 
 :::tip 提示
-如何**安装**协议适配器请参考 [安装协议适配器](../start/install-adapter.md)
+如何**安装**协议适配器请参考 [安装协议适配器](../start/install-adapter.mdx)
 :::
 
 ## 协议适配器的功能
diff --git a/website/src/components/Asciinema/container.tsx b/website/src/components/Asciinema/container.tsx
new file mode 100644
index 00000000..68ca548f
--- /dev/null
+++ b/website/src/components/Asciinema/container.tsx
@@ -0,0 +1,35 @@
+import * as AsciinemaPlayer from "asciinema-player";
+import React, { useEffect, useRef } from "react";
+
+export type AsciinemaOptions = {
+  cols: number;
+  rows: number;
+  autoPlay: boolean;
+  preload: boolean;
+  loop: boolean;
+  startAt: number | string;
+  speed: number;
+  idleTimeLimit: number;
+  theme: string;
+  poster: string;
+  fit: string;
+  fontSize: string;
+};
+
+export type AsciinemaProps = {
+  url: string;
+  options?: Partial<AsciinemaOptions>;
+};
+
+export default function AsciinemaContainer({
+  url,
+  options = {},
+}: AsciinemaProps): JSX.Element {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    AsciinemaPlayer.create(url, ref.current, options);
+  }, []);
+
+  return <div ref={ref} className="not-prose w-full max-w-full my-4"></div>;
+}
diff --git a/website/src/components/Asciinema/index.tsx b/website/src/components/Asciinema/index.tsx
index cda11f71..e8f8b04e 100644
--- a/website/src/components/Asciinema/index.tsx
+++ b/website/src/components/Asciinema/index.tsx
@@ -2,38 +2,17 @@ import "asciinema-player/dist/bundle/asciinema-player.css";
 
 import "./styles.css";
 
-import * as AsciinemaPlayer from "asciinema-player";
-import React, { useEffect, useRef } from "react";
+import React from "react";
 
-export type AsciinemaOptions = {
-  cols: number;
-  rows: number;
-  autoPlay: boolean;
-  preload: boolean;
-  loop: boolean;
-  startAt: number | string;
-  speed: number;
-  idleTimeLimit: number;
-  theme: string;
-  poster: string;
-  fit: string;
-  fontSize: string;
-};
+import BrowserOnly from "@docusaurus/BrowserOnly";
 
-export type AsciinemaProps = {
-  url: string;
-  options?: Partial<AsciinemaOptions>;
-};
-
-export default function Asciinema({
-  url,
-  options = {},
-}: AsciinemaProps): JSX.Element {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    AsciinemaPlayer.create(url, ref.current, options);
-  }, []);
-
-  return <div ref={ref} className="not-prose w-full max-w-full my-4"></div>;
+export default function Asciinema(props): JSX.Element {
+  return (
+    <BrowserOnly fallback={<div></div>}>
+      {() => {
+        const AsciinemaContainer = require("./container.tsx").default;
+        return <AsciinemaContainer {...props} />;
+      }}
+    </BrowserOnly>
+  );
 }
diff --git a/website/src/components/Card/index.tsx b/website/src/components/Card/index.tsx
index 58fabfd8..ff9bce28 100644
--- a/website/src/components/Card/index.tsx
+++ b/website/src/components/Card/index.tsx
@@ -3,7 +3,6 @@ import copy from "copy-to-clipboard";
 import React, { useState } from "react";
 
 import Link from "@docusaurus/Link";
-import type { IconName } from "@fortawesome/fontawesome-common-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import type { Obj } from "../../libs/store";