docs: 更新扩充 wiki 指南

docs/Automatic-Ignition-Chamber.mdx

@@ -12,7 +12,7 @@ import ImageGallery from '@site/src/components/ImageGallery';
 
 <ImageGallery images={[
   {
-    src: 'https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/auto-ignition-chamber-setup.png',
+    src: '/images/auto-ignition-chamber-setup.png',
     alt: '放置自动点火机',
     sizePercent: 80
   }

docs/Expanding-the-Wiki.md → docs/Expanding-the-Wiki.mdx

@@ -2,6 +2,8 @@
 sidebar_label: 帮我们扩充 Wiki！
 ---
 
+import ImageGallery from '@site/src/components/ImageGallery';
+
 # 扩充 Wiki {#expanding-the-wiki}
 
 如果你想帮助扩充官方 Wiki，请点击[这里](https://github.com/Slimefun/Slimefun4/wiki/Expanding-the-Wiki)。
@@ -12,21 +14,25 @@ sidebar_label: 帮我们扩充 Wiki！
 
 如果你想帮助我们扩充本 Wiki，请阅读以下内容。
 
-你需要拥有一个 GitHub 账号并登录，才能继续接下来的所有步骤。  
+你需要拥有一个 GitHub 账号并登录，才能继续接下来的所有步骤。
 如果你还没有注册，你可以点击这里立即[加入 GitHub](https://github.com/join)。
 
-## 步骤1：Fork 我们的 Wiki 仓库 {#step-1-forking-the-repository}
+## 步骤1：复刻我们的 Wiki 仓库 {#step-1-forking-the-repository}
 
 你需要打开本 Wiki 的 [GitHub 仓库](https://github.com/SlimefunGuguProject/Slimefun-Wiki)。
-然后，你可以在右上角找到**Fork**按钮。点击该按钮，选择要Fork到的账号（如果你有多个账号）。
+然后，你可以在右上角找到 **Fork** 按钮。
+
+<ImageGallery images={[
+  { src: '/images/github-tutorial-fork.png', alt: '创建复刻' }
+]}/>
 
-![Fork](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-fork.png)
+点击该按钮，进入创建复刻页面。选择要复刻到的账号（如果你有多个账号），其他的设置都可以保持默认。
 
-然后，进入下个步骤。
+点击 `Create fork`，然后，进入下个步骤。
 
 ## 步骤2：进行更改 {#step-2-making-your-changes}
 
-现在，你已经 Fork 了本 Wiki 的仓库，你可以对其中的内容进行更改。
+现在，你已经复刻了本 Wiki 的仓库，你可以对其中的内容进行更改。
 
 :::info 注意
 
@@ -36,20 +42,24 @@ sidebar_label: 帮我们扩充 Wiki！
 
 你可以选择添加内容，或修改已有内容。
 
-如果你熟悉使用 Git 或带有 Git 功能的编辑器，你可以略过大部分内容。  
-不过，我们仍然建议你遵循我们的指示（特别是有关内容的规则），避免你提交的更改被退回。
+如果你熟悉使用 Git 或带有 Git 功能的编辑器，你可以略过大部分内容。
+不过，我们仍然建议你遵循我们的指示（特别是有关内容的[规则](#step-3-general-guidelines-dos-and-donts)），避免你提交的更改被退回。
 
 ### 2.1 创建新页面 {#21-creating-a-new-page}
 
-访问你 Fork 的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
+访问你复刻的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
 
-然后，打开 `docs` 目录。（图中展示的是旧版本的目录 `pages`，现已更改为 `docs`）
+然后，打开 `docs` 目录。
 
-![docs 目录](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-pages.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-docs.png', alt: 'docs 目录' }
+]}/>
 
 在右上角点击 `Add file`，在下拉菜单中点击 `Create new file`。
 
-![创建新文件](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-new-file.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-new-file.png', alt: '创建新文件' }
+]}/>
 
 文件名必须遵遁以下规则：
 
@@ -62,19 +72,19 @@ sidebar_label: 帮我们扩充 Wiki！
 
 在输入完文件名后，你可以开始编辑页面内容了。
 
-我们使用 Markdown 来编写页面。如果你不了解什么是 Markdown，你可以点击[这里](https://ybw0014.net/post/markdown)查看教程。  
+我们使用 Markdown 来编写页面。如果你不了解什么是 Markdown，你可以点击[这里](https://ybw0014.net/post/markdown)查看教程。
 本 Wiki 使用 [Docusaurus](https://docusaurus.io/) 来渲染 Markdown 页面，因此，你还可以使用由 Docusaurus 提供的额外 Markdown 功能。
 
 以下是编辑文档时应注意的规则：
 
 - 所有文档应使用 2 格空格缩进。
   - 如果你完全按照本教程进行，使用的是 GitHub 的在线编辑器，你可能需要手动修改缩进设置。可以在编辑区域右上角找到缩进模式（*Indent mode*）与缩进大小（*Indent size*）
-  - 如果你使用的编辑器支持`.editorconfig`，你无需担心。只需要在编辑文件后使用格式化指令即可。
+  - 如果你使用的编辑器支持 `.editorconfig`，你无需担心。只需要在编辑文件后使用格式化指令即可。
 - 任何标题的下一行必须是空行。
 - 标题后方需指定[标题 ID](https://docusaurus.io/zh-CN/docs/markdown-features/toc#heading-ids) 确保标题的链接与[官方 Wiki](https://github.com/Slimefun/Slimefun4/wiki) 同步。
-- 避免使用除`<details>`和`<summary>`以外的 HTML 标签；HTML 标签必须匹配，否则页面可能无法正确渲染。
-  - 在 `.md` 文件中，换行应在行末添加两个空格`  `，而不是`<br />`标签。
-  - 在 `.mdx` 文件中，换行应在行末使用`<br />`标签。
+- 避免使用除 `<details>`、`<summary>` 与 `<br>` 以外的 HTML 标签；HTML 标签必须匹配，否则页面可能无法正确渲染。
+  - 在 `.md` 文件中，换行应在行末添加两个空格`  `，而不是`<br/>`标签。
+  - 在 `.mdx` 文件中，换行应在行末使用`<br/>`标签。
 - 适当使用[告示](https://docusaurus.io/zh-CN/docs/markdown-features/admonitions)强调内容。
 - 图片相关规则请查看[这里](#23-uploading-images)。
 
@@ -86,19 +96,22 @@ sidebar_label: 帮我们扩充 Wiki！
 
 ### 2.2 编辑现有页面 {#22-editing-existing-pages}
 
-访问你 Fork 的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories** ）中找到。
-
-然后，打开 `docs` 目录。（图中展示的是旧版本的目录 `pages`，现已更改为 `docs`）
+访问你复刻的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
 
-![docs目录](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-pages.png)
+然后，打开 `docs` 目录。
 
+<ImageGallery images={[
+  { src: '/images/github-tutorial-docs.png', alt: 'docs 目录' }
+]}/>
 打开任何你想要编辑的文件，你可以在内容区域右上角找到编辑按钮。
 
-![编辑文件](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-edit.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-edit.png', alt: '编辑文件' }
+]}/>
 
 现在，你可以编辑页面内容了。
 
-你应该在[2.1 步骤](#21-creating-a-new-page)中查看编辑文档应遵守的规则。
+你应该在 [2.1 步骤](#21-creating-a-new-page)中查看编辑文档应遵守的规则。
 
 :::info
 
@@ -108,35 +121,65 @@ sidebar_label: 帮我们扩充 Wiki！
 
 ### 2.3 上传图片 {#23-uploading-images}
 
-访问你 Fork 的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
+访问你复刻的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
 
 然后，打开 `static/images` 目录。
 
-![static/images 目录](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-images.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-images.png', alt: 'static/images 目录' }
+]}/>
 
 在右上角点击 `Add file`，在下拉菜单中点击 `Upload files`。
 
-![上传图片](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-upload-image.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-upload-image.png', alt: '上传图片' }
+]}/>
 
 你应该确保图片遵循以下规则：
 
 - 静态图片应使用 PNG 格式，动态图片应使用 GIF 格式。
-- 图片名称只能使用小写英文字母与连字符`-`。这些是有效的图片名："enhanced-crafting-table.png"，"gold-pan-usage.png"，"exoticgarden-apple-tree.png"。
+- 图片名称只能使用小写英文字母、数字与连字符 `-`。这些是有效的图片名："enhanced-crafting-table.png"，"gold-pan-usage.png"，"exoticgarden-apple-tree.png"。
 - 如要使用官方 Wiki 中的图片，无需在本 Wiki 中上传。
 
 选择或拖拽图片到指定区域，然后点击下方的 `Commit changes` 按钮来上传图片。
 现在，你可以在文档中插入你上传的图片了。
 
-我们推荐你使用 jsDelivr 的CDN来加载上传的图片，你可以使用以下内容来添加在本 Wiki 中上传的图片:
+本 Wiki 使用了自定义的画廊组件，可以将多个图片剧中横向排列展示。
+
+:::tip
+
+你需要将 Markdown 文件的后缀改为 `.mdx`，以便使用画廊组件。
+
+而且，你需要在标题前一行添加以下内容以导入画廊组件：
+
+```mdx
+import ImageGallery from '@site/src/components/ImageGallery';
+```
+
+:::
+
+对于上传到本 Wiki 仓库中的图片，直接使用绝对路径即可。将以下内容添加至文档中：
 
-```markdown
-![这里填写图片注释](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/这里填写图片文件名)
+```mdx
+<ImageGallery images={[
+  {
+    src: '/images/这里填写图片文件名',
+    alt: '这里填写图片注释',
+    sizePercent: 100 // 可选，可调节图片大小的百分比
+  }
+]}/>
 ```
 
-如需使用官方 Wiki 中的图片，添加以下内容至文档中:
+对于官方 Wiki 中的图片，我们推荐你使用 jsDelivr 的 CDN 来加载。将以下内容添加至文档中：
 
-```markdown
-![这里填写图片注释](https://cdn.jsdelivr.net/gh/Slimefun/Wiki@master/images/这里填写图片文件名)
+```mdx
+<ImageGallery images={[
+  {
+    src: 'https://cdn.jsdelivr.net/gh/Slimefun/Wiki@master/images/这里填写图片文件名',
+    alt: '这里填写图片注释',
+    sizePercent: 100 // 可选，可调节图片大小的百分比
+  }
+]}/>
 ```
 
 ## 步骤3：文档准则 {#step-3-general-guidelines-dos-and-donts}
@@ -164,22 +207,24 @@ sidebar_label: 帮我们扩充 Wiki！
 - 从本 Wiki 中删除任何页面或图片，如果你要这么做，请提供详细的原因。
 - 包含任何工作场所不宜（NSFW）、裸体、色情、歧视、暴力、政治内容。
 
-## 步骤4：提交 Pull request {#step-4-making-a-pull-request}
+## 步骤4：提交拉取请求 {#step-4-making-a-pull-request}
 
-访问你 Fork 的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
+访问你复刻的 Wiki 仓库，你可以在首页或仓库列表（在 GitHub 中点击右上角的头像，然后选择 **Your repositories**）中找到。
 
-点击上方的 `Pull requests` 标签页，然后点击右侧绿色的按钮`New pull request`来创建 Pull request。
+点击上方的 `Pull requests` 标签页，然后点击右侧绿色的按钮 `New pull request` 来创建拉取请求。
 
-![Pull request](https://cdn.jsdelivr.net/gh/SlimefunGuguProject/Slimefun-Wiki@master/images/github-tutorial-pr.png)
+<ImageGallery images={[
+  { src: '/images/github-tutorial-pr.png', alt: '创建 Pull request' }
+]}/>
 
 尽量详细地描述一下你对 Wiki 作出的修改，然后点击 `Create pull request` 按钮提交。
 
 感谢你对本 Wiki 作出的贡献！
 
-## 步骤5：对 Pull request 进行更改 {#step-5-making-changes-to-your-pull-request}
+## 步骤5：对拉取请求进行更改 {#step-5-making-changes-to-your-pull-request}
 
-如果你已经提交了 Pull request，但你仍想更改一些文件，你可以重复[步骤2](#step-2-making-your-changes)。
+如果你已经提交了拉取请求，但你仍想更改一些文件，你可以重复[步骤 2](#step-2-making-your-changes)。
 
-你做出的更改将会自动更新至 Pull request，直到其被合并或关闭。
+你做出的更改将会自动更新至拉取请求，直到其被合并或关闭。
 
 当我们要求你进行修改时，你应该了解该步骤中的内容，这非常重要。