docs: 重写网页 PR 教程 (#10005)

* docs: 初步重写 PR 网页教程

* chore: Auto update by pre-commit hooks [skip changelog]

* docs: 再加一个按钮

* chore: Auto update by pre-commit hooks [skip changelog]

* fix: 先把图片路径修了

* docs: 不新建分支了

* chore: Auto update by pre-commit hooks [skip changelog]

* docs: 修复坏图片

* docs: 完成英语翻译 | English version completed (translated by gpt)

* chore: Auto update by pre-commit hooks [skip changelog]

* i18n: english tweaks

* i18n: english tweaks

---------

Co-authored-by: 晓丶梦丶仁 <1020623818@qq.com>
Co-authored-by: Constrat <56174894+Constrat@users.noreply.github.com>

docs/.vuepress/client.ts

@@ -1,8 +1,12 @@
 import { defineClientConfig } from "vuepress/client";
-import ImageGrid from "../components/ImageGrid.vue";
+import Image1 from "../components/Image1.vue";
+import Image2 from "../components/Image2.vue";
+import Image4 from "../components/Image4.vue";
 
 export default defineClientConfig({
   enhance: ({ app }) => {
-    app.component("ImageGrid", ImageGrid);
+    app.component("Image1", Image1);
+    app.component("Image2", Image2);
+    app.component("Image4", Image4);
   },
 });

docs/components/Image1.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+      <img v-for="src of displayImageList" class="image" :src="src" alt="" />
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { PropType, defineComponent } from "vue";
+  import { withBase } from "vuepress/client";
+  
+  export default defineComponent({
+    props: {
+      imageList: Array as PropType<
+        Array<{ light: string; dark: string } | string>
+      >,
+    },
+    computed: {
+      displayImageList() {
+        return this.imageList.map((item) => {
+          const src =
+            typeof item === "string"
+              ? item
+              : this.$isDarkmode
+              ? item.dark
+              : item.light;
+          return withBase(src);
+        });
+      },
+    },
+  });
+  </script>
+  
+  <style scoped>
+  .image {
+    box-sizing: border-box;
+    width: auto;
+    padding: 9px;
+    border-radius: 16px;
+  }
+  </style>
+  

docs/components/Image2.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+      <img v-for="src of displayImageList" class="image" :src="src" alt="" />
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { PropType, defineComponent } from "vue";
+  import { withBase } from "vuepress/client";
+  
+  export default defineComponent({
+    props: {
+      imageList: Array as PropType<
+        Array<{ light: string; dark: string } | string>
+      >,
+    },
+    computed: {
+      displayImageList() {
+        return this.imageList.map((item) => {
+          const src =
+            typeof item === "string"
+              ? item
+              : this.$isDarkmode
+              ? item.dark
+              : item.light;
+          return withBase(src);
+        });
+      },
+    },
+  });
+  </script>
+  
+  <style scoped>
+  .image {
+    box-sizing: border-box;
+    width: 50%;
+    padding: 9px;
+    border-radius: 16px;
+  }
+
+  @media (max-width: 419px) {
+    .image {
+      width: auto;
+    }
+  }
+  </style>
+  

docs/components/Image4.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 
 @media (max-width: 419px) {
   .image {
-    width: 100%;
+    width: auto;
   }
 }
 </style>

docs/en-us/develop/pr-tutorial.md

@@ -22,17 +22,35 @@ This chapter contains slightly dry content. If you're not interested, you can sk
 
 👇 You can think of the current web page and all of its contents as the repository for MAA (we usually refer to it as MAA's main repository).
 
-![image](/image/zh-cn/pr-tutorial/repository.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/repository-light.png",
+      "dark": "image/zh-cn/pr-tutorial/repository-dark.png"
+    }
+  ]
+}
+```
 
 ### Fork
 
-Copy, literally meaning to make a copy of MAA's code, and then perform subsequent modifications and operations to avoid damaging the original.
+To fork,  literally meaning to make a copy of MAA's code, and then perform subsequent modifications and operations to avoid damaging the original repository.
 
 Since it's a copy, let's assume it's called `MAA (1)`.  
-To distinguish it from the original repository, we usually refer to the original MAA repository as "main repository", "upstream", or "origin".  
-Since everyone can make a copy of their own, the copied repository is called a "personal repository".
+To distinguish it from the original repository, we usually refer to the original MAA repository as "main repository" or "upstream".  
+Since everyone can make a copy of their own, the copied repository is called a "personal repository" or "origin".
 
-![image](/image/zh-cn/pr-tutorial/fork.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/fork-light.png",
+      "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+    }
+  ]
+}
+```
 
 ### Pull Request
 
@@ -42,7 +60,16 @@ Of course, since it's a "request", it naturally requires approval. MAA Team may
 
 👇 The following are the PRs currently submitted by contributors and awaiting approval from MAA Team.
 
-![image](/image/zh-cn/pr-tutorial/pull-request.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/pull-request-light.png",
+      "dark": "image/zh-cn/pr-tutorial/pull-request-dark.png"
+    }
+  ]
+}
+```
 
 ### Conflict
 
@@ -51,65 +78,196 @@ Now we have a conflict, as both of you have modified the A file but in different
 
 ## Full Process of Pure Web-based PR Operation
 
-1. First, go to the MAA main repository and fork a copy of the code.
+1. First, go to the MAA main repository and click the button in the top right corner to fork a copy of the code.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-1.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/fork-light.png",
+          "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+        }
+      ]
+    }
+    ```
 
-2. Remove the "Only master branch" option, then click "Create Fork".
+2. Then, click on 'Create Fork' directly.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-2.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-3. You will be taken to your personal repository, which will have a title of "Your Name/MaaAssistantArknights", with a small note below stating "forked from MaaAssistantArknights/MaaAssistantArknights" (copied from the MAA main repository).
+3. You will be taken to your personal repository, which will have a title of "your_name/MaaAssistantArknights", with a small note below stating "forked from MaaAssistantArknights/MaaAssistantArknights" (copied from the MAA main repository).
 
-    ![image](/image/zh-cn/pr-tutorial/pr-3.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-3-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-3-dark.png"
+        }
+      ]
+    }
+    ```
 
-4. Switch to the "dev" branch (the concept of branches is not relevant to this tutorial, so we will skip discussing it here, but you just need to follow these instructions to switch branches).
+4. Find the file you want to edit. You can click 'Go to file' to search globally, or you can browse through the folders below if you know where the file is located.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-4.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-4-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-4-dark.png"
+        }
+      ]
+    }
+    ```
 
-5. Find the file you want to modify. You can click "Go to file" to search for it globally, or you can navigate through the folders below (if you know where the file is located).
+5. After opening the file, click on the ✏️ icon on the top right corner of the file to start editing.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-5.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-5-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-5-dark.png"
+        }
+      ]
+    }
+    ```
 
-6. After opening the file, click on the ✏️ icon on the top right corner of the file to start editing.
+6. Make your changes! (If it's a resource file, we recommend testing the changes in your local MAA folder before pasting them in the web page to avoid errors).
+7. Once you've finished editing, click the button 👇 in the top right corner to open the commit page and write a brief description of what you changed.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-6.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-7. Make your changes! (If it's a resource file, we recommend testing the changes in your local MAA folder before pasting them in the web page to avoid errors).
-8. When you finish editing, scroll to the bottom of the page and describe your changes.
+    We have a simple commit title [naming format](https://www.conventionalcommits.org/zh-hans/v1.0.0/), which you should try to follow. However, if you find it difficult to understand, you can just write something for now.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-8.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-9. Need to edit another file? Made a mistake and want to change it again? No problem! Simply repeat steps 5-8 for the other file.
-10. When all changes are made, create a Pull Request by going to the Pull Request tab in your personal repository.
-    If there is a "Compare & Pull Request" button, that's great, just click it! If not, don't worry, clicking "New Pull Request" below is also the same (see step 11).
+8. Need to edit another file? Made a mistake and want to change it again? No problem! Simply repeat steps 4-7 for the other file.
+9. When all changes are made, create a Pull Request by going to the Pull Request tab in your personal repository.
+    If there is a "Compare & Pull Request" button, that's great, just click it!
+    If not, don't worry, clicking "Open Pull Request" below is also the same.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-10.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-9-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-9-dark.png"
+        }
+      ]
+    }
+    ```
+
+10. Now you are in the main repository, please double-check the changes you want to PR.
+    As shown in the figure, there is a leftward arrow, which means you want to merge the dev branch from your forked repository "your_name/MAA" to the dev branch of the main repository "MAA".
+    Scrolling down shows the differences between these two branches, indicating what changes you have made.
+
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-11. Now you are in the main repository, please double-check the changes you want to PR.
-    As shown in the figure, there is a leftward arrow, which means you want to merge the dev branch from your forked repository "Your name/MAA" to the dev branch of the main repository "MAA".
     Then, write a title and description of your changes, and click "Create Pull Request".
+    The PR title should also follow the [naming format](https://www.conventionalcommits.org/zh-hans/v1.0.0/). However, if you still don't understand it, you can also just write something for now.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-11.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-12. Just wait for the MAA Team's experts to review it! Of course, they may also provide some comments,
-  👇 for example (for entertainment purposes only, do not take it seriously):
-    ![image](/image/zh-cn/pr-tutorial/pr-12.png)
+11. Just wait for the MAA Team members to review it! Of course, they may also provide some comments,
+    👇 for example (for entertainment purposes only, do not take it seriously):
 
-13. If they request further changes, go back to your personal repository, switch to the dev branch, and repeat steps 3-9!
-  Note that you do not need to redo step 2 (re-fork) or step 10 (re-Pull Request), your current Pull Request is still pending review, and subsequent changes will be added directly to this Pull Request.
-  👇 For example, you can see that "revised demo" has been added at the bottom.
-    ![image](/image/zh-cn/pr-tutorial/pr-13.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-11-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-11-dark.png"
+        }
+      ]
+    }
+    ```
 
-14. Once the experts approve the PR, you're all set! After the version is released, your GitHub avatar will automatically be added to the contributors list. Thank you very much for your selfless dedication!
-    [![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
+12. If they request further changes, go back to **your personal repository** and repeat steps 4-7!
+    Note that you do not need to redo step 1-2 (re-fork) or step 9-10 (re-Pull Request), your current Pull Request is still pending review, and subsequent changes will be added directly to this Pull Request.
+    👇 For example, you can see that "revised demo" has been added at the bottom.
 
-15. Next time if you want to submit another PR, please switch to the dev branch first, and then follow the steps in the image below.
-    **Please note!** This operation will forcibly synchronize your personal repository to the exact same state as the main repository. This is the simplest but effective way to resolve conflicts. However, if you have made additional edits in your personal repository, they will be directly deleted!
-    If you are sure that it will not cause conflicts, please use the green Update Branch button on the right.
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-12-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-12-dark.png"
+        }
+      ]
+    }
+    ```
 
-    If you are not sure or don't care about what I said above, please click the button on the left.
+13. Once the experts approve the PR, you're all set! Your changes have been merged into the main MAA repository!
 
-    ![image](/image/zh-cn/pr-tutorial/pr-15.png)
+14. If you want to submit another PR next time, please first go back to the homepage of your personal repository and click 'Sync fork' to synchronize your repository with the main repository.
+    Note here: If there is a red 'Discard 1 commit', click the red one. If there isn't, then click the green 'Update branch'.
+    Next, you can repeat steps 4-10 to make further modifications.
 
-    Then repeat steps 3-14, make changes and submit PR.
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-1-dark.png"
+        },
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-2-dark.png"
+        }
+      ]
+    }
+    ```
+
+**After the version is released**, your GitHub avatar will automatically be added to the contributors list. Thank you very much for your selfless dedication!
+::: tip Contributors/Participators
+Thank you to everyone involved in development and testing. Your help is going to ~~Make MAA Great Again~~! (\*´▽ ｀)ノノ
+
+[![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
+:::

docs/en-us/readme.md

@@ -46,7 +46,7 @@ Development in progress  ✿✿ヽ(°▽°)ノ✿
 
 Talk is cheap. Show me the pictures!
 
-```component ImageGrid
+```component Image4
 {
   "imageList": [
     {

docs/ja-jp/develop/pr-tutorial.md

@@ -24,7 +24,16 @@ repo、コードやその他のリソースファイルを保存する場所で
 
 👇 これはMAAのリポジトリです（一般的にMAAのメインリポジトリと呼ばれます）。
 
-![image](/image/zh-cn/pr-tutorial/repository.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/repository-light.png",
+      "dark": "image/zh-cn/pr-tutorial/repository-dark.png"
+    }
+  ]
+}
+```
 
 ### Fork（複製）
 
@@ -35,7 +44,16 @@ repo、コードやその他のリソースファイルを保存する場所で
 区別するために、元のMAAリポジトリは「主リポジトリ」「upstream（上流リポジトリ）」「origin（元のリポジトリ）」と呼ばれます。  
 それぞれの人がコピーできるので、コピーしたものを「個人リポジトリ」と呼びます。
 
-![image](/image/zh-cn/pr-tutorial/fork.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/fork-light.png",
+      "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+    }
+  ]
+}
+```
 
 ### Pull Request（プルリクエスト、マージリクエスト）
 
@@ -47,7 +65,16 @@ repo、コードやその他のリソースファイルを保存する場所で
 
 👇 以下は、現在承認待ちの提出されたPRの例です。
 
-![image](/image/zh-cn/pr-tutorial/pull-request.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/pull-request-light.png",
+      "dark": "image/zh-cn/pr-tutorial/pull-request-dark.png"
+    }
+  ]
+}
+```
 
 ### Conflict（コンフリクト）
 
@@ -60,55 +87,166 @@ Conflictを解決するのは少し面倒ですが、ここでは概念につい
 
 1. まず、MAAのメインリポジトリにアクセスして、コードをforkします。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-1.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/fork-light.png",
+          "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+        }
+      ]
+    }
+    ```
 
 2. 「Copy the master branch only」オプションを外して、Create Forkをクリックします。
 
-    ![20221004144039](/image/zh-cn/pr-tutorial/pr-2.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-2-dark.png"
+        }
+      ]
+    }
+    ```
 
 3. 次に、あなたの個人リポジトリに移動し、「あなたの名前/ MaaAssistantArknights」というタイトルが表示され、下に「MAAメインリポジトリから複製されたMaaAssistantArknights/MaaAssistantArknights」という文言が表示されます。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-3.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-3-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-3-dark.png"
+        }
+      ]
+    }
+    ```
 
-4. devブランチに切り替えます（ブランチの概念はこの記事には関係ありませんが、興味があれば検索して理解してください。ここでは操作だけ覚えておけば十分です）。
+4. 変更するファイルを探します。 "Go to file" をクリックしてグローバル検索を行うか、下のフォルダーから直接検索することもできます（ファイルの場所を知っている場合）。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-4.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-4-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-4-dark.png"
+        }
+      ]
+    }
+    ```
 
-5. 変更するファイルを探します。 "Go to file" をクリックしてグローバル検索を行うか、下のフォルダーから直接検索することもできます（ファイルの場所を知っている場合）。
+5. ファイルを開いたら、ファイルの右上隅にある✏️をクリックして編集を開始します。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-5.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-5-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-5-dark.png"
+        }
+      ]
+    }
+    ```
 
-6. ファイルを開いたら、ファイルの右上隅にある✏️をクリックして編集を開始します。
+6. 変更を加えます！（もちろん、リソースファイルなどの場合は、まずMAAフォルダー内で変更をテストし、問題がないことを確認してから、ウェブページに貼り付けて変更を行ってください）
+7. 変更が完了したら、一番下までスクロールして、変更内容を記述します。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-6.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-7. 変更を加えます！（もちろん、リソースファイルなどの場合は、まずMAAフォルダー内で変更をテストし、問題がないことを確認してから、ウェブページに貼り付けて変更を行ってください）
-8. 変更が完了したら、一番下までスクロールして、変更内容を記述します。
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-    ![image](/image/zh-cn/pr-tutorial/pr-8.png)
-
-9. 変更するもう1つのファイルがある場合は、5-8を繰り返してください。
-10. 変更が完了したら、PRを行います！個人リポジトリのPull Requestタブをクリックします。  
+8. 変更するもう1つのファイルがある場合は、5-8を繰り返してください。
+9. 変更が完了したら、PRを行います！個人リポジトリのPull Requestタブをクリックします。  
     「Compare & Pull Request」ボタンがある場合は、それをクリックしてください。ない場合は、「New Pull Request」をクリックしてください。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-10.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-9-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-9-dark.png"
+        }
+      ]
+    }
+    ```
 
-11. これでメインリポジトリに移動します。PRする内容を確認してください。  
+10. これでメインリポジトリに移動します。PRする内容を確認してください。  
     スクリーンショットのように、真ん中に左向きの矢印があり、右側の「個人名/MAA」のdevブランチを「メインリポジトリ/MAA」のdevブランチにマージすることを申請しています。  
+
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-1-dark.png"
+        }
+      ]
+    }
+    ```
+
     次に、タイトルや変更内容などを記述して、承認をリクエストします。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-11.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-12. MAAチームの大佬たちに承認していただきましょう！もちろん、意見を提供してくださることもあるかもしれません  
+11. MAAチームの大佬たちに承認していただきましょう！もちろん、意見を提供してくださることもあるかもしれません  
   👇例えば（純粋に娯楽のために、本気にしないでください）
-    ![image](/image/zh-cn/pr-tutorial/pr-12.png)
 
-13. 大佬たちがさらに小さな問題を修正するように言った場合、あなたの個人のリポジトリに戻って、以前のdevブランチに切り替え、手順3-9を繰り返すだけで大丈夫です！  
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-11-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-11-dark.png"
+        }
+      ]
+    }
+    ```
+
+12. 大佬たちがさらに小さな問題を修正するように言った場合、あなたの個人のリポジトリに戻って、以前のdevブランチに切り替え、手順3-9を繰り返すだけで大丈夫です！  
   手順2（再度フォークする）を実行する必要はなく、手順10（再度プルリクエストする）を実行する必要もありません。現在のプルリクエストはまだ承認待ちの状態にあり、後続の変更はこのプルリクエストに直接反映されます。  
   👇 以下は例です。最下部に「再度変更デモを変更」というメッセージが追加されたことがわかります。
-    ![image](/image/zh-cn/pr-tutorial/pr-13.png)
 
-14. 大佬たちの承認を得たら、すべて完了です！ バージョンがリリースされた後、あなたのGitHubプロフィールアイコンは自動的に貢献者リストに追加されます。皆様のご奉仕に深く感謝申し上げます！  
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-12-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-12-dark.png"
+        }
+      ]
+    }
+    ```
+
+13. 大佬たちの承認を得たら、すべて完了です！ バージョンがリリースされた後、あなたのGitHubプロフィールアイコンは自動的に貢献者リストに追加されます。皆様のご奉仕に深く感謝申し上げます！  
     ~~なんで全部二次元キャラなんだろう、あ、私も二次元好きだったわ。ま、いいか~~
     ::: tip 貢献/参加者
     開発/テストに参加してくれたすべての友人たちに感謝します。皆さんの助けでMAAはますます良くなります！ (\*´▽ ｀)ノノ
@@ -116,7 +254,7 @@ Conflictを解決するのは少し面倒ですが、ここでは概念につい
     [![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
     :::
 
-15. 次回別のPRを提出する場合は、まずdevブランチに切り替えて、以下の図のように直接操作してください。  
+14. 次回別のPRを提出する場合は、まずdevブランチに切り替えて、以下の図のように直接操作してください。  
 
     ::: warning
     この操作は、あなたの個人リポジトリをメインリポジトリとまったく同じ状態に強制的に同期するものであり、最も簡単で効果的な競合解消方法です。ただし、あなたの個人リポジトリにすでに追加されているものは削除されます！  
@@ -125,6 +263,19 @@ Conflictを解決するのは少し面倒ですが、ここでは概念につい
 
     私が言ったことが何を意味するのか分からない/関係ない場合は、左側のボタンをクリックしてください。
 
-    ![image](/image/zh-cn/pr-tutorial/pr-15.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-1-dark.png"
+        },
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-2-dark.png"
+        }
+      ]
+    }
+    ```
 
     その後、ステップ3-14を繰り返し、変更を加え、PRを提出することができます。

docs/ja-jp/readme.md

@@ -47,36 +47,20 @@ MAAは、MAA Assistant Arknightsです。
 
 UIを見れば使い方もすぐ分かる！  
 
-<!-- markdownlint-disable -->
-
-<div class="image-ja-jp">
-  <img src="/image/ja-jp/readme/1-light.png" />
-  <img src="/image/ja-jp/readme/2-light.png" />
-</div>
-
-<style>
-  .image-ja-jp {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .image-ja-jp > img {
-     box-sizing: border-box;
-     width: 50% !important;
-     padding: 9px;
-     border-radius: 16px;
-  }
-
-  @media (max-width: 419px){
-    .image-ja-jp > img {
-      width: 100% !important;
+```component Image2
+{
+  "imageList": [
+    {
+      "light": "image/ja-jp/readme/1-light.png",
+      "dark": "image/ja-jp/readme/1-light.png"
+    },
+    {
+      "light": "image/ja-jp/readme/2-light.png",
+      "dark": "image/ja-jp/readme/2-light.png"
     }
-  }
-</style>
-
-<!-- markdownlint-restore -->
+  ]
+}
+```
 
 ## ダウンロードリンク
 

docs/ko-kr/develop/pr-tutorial.md

@@ -22,7 +22,16 @@ repo로도 알려져 있으며 코드 및 다른 리소스 파일을 저장하
 
 👇 현재 이 웹 페이지 및 그 내용 전체가 MAA의 저장소입니다 (일반적으로 MAA의 기본 저장소로 불립니다).
 
-![image](/image/zh-cn/pr-tutorial/repository.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/repository-light.png",
+      "dark": "image/zh-cn/pr-tutorial/repository-dark.png"
+    }
+  ]
+}
+```
 
 ### Fork (복사)
 
@@ -33,7 +42,16 @@ repo로도 알려져 있으며 코드 및 다른 리소스 파일을 저장하
 원래 저장소와 구별하기 위해 일반적으로 원래 MAA 저장소를 "원본 저장소", "원격 저장소", "상위 저장소"로 지칭합니다.
 각 사람이 자신의 복사본을 만들 수 있기 때문에 복사본을 "개인 저장소"로 지칭합니다.
 
-![image](/image/zh-cn/pr-tutorial/fork.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/fork-light.png",
+      "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+    }
+  ]
+}
+```
 
 ### Pull Request
 
@@ -44,7 +62,16 @@ PR로도 알려져 있으며, "풀 리퀘스트"라는 용어는 너무 길고
 
 👇  아래는 현재 전문가들이 제시한 PR을 대기 중인 상태입니다.
 
-![image](/image/zh-cn/pr-tutorial/pull-request.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/pull-request-light.png",
+      "dark": "image/zh-cn/pr-tutorial/pull-request-dark.png"
+    }
+  ]
+}
+```
 
 ### Conflict (충돌)
 
@@ -56,55 +83,166 @@ PR로도 알려져 있으며, "풀 리퀘스트"라는 용어는 너무 길고
 
 1. 먼저 MAA 주 저장소로 이동하여 코드를 fork합니다.
 
-   ![~ NKHB1CIE8`G(UK@ %3`H](/image/zh-cn/pr-tutorial/pr-1.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/fork-light.png",
+          "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+        }
+      ]
+    }
+    ```
 
 2. "마스터 브랜치만" 옵션을 해제한 다음 Fork를 클릭합니다.
 
-   ![20221004144039](/image/zh-cn/pr-tutorial/pr-2.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-2-dark.png"
+        }
+      ]
+    }
+    ```
 
 3. 이제 개인 저장소로 이동하면 제목이 "YourName/MaaAssistantArknights"이고 아래에 한 줄짜리 작은 글씨로 "forked from MaaAssistantArknights/MaaAssistantArknights" (MAA 주 저장소에서 복제됨)이라고 표시됩니다.
 
-   ![image](/image/zh-cn/pr-tutorial/pr-3.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-3-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-3-dark.png"
+        }
+      ]
+    }
+    ```
 
-4. dev 브랜치로 전환합니다. (브랜치 개념은 이 문서와는 관련이 없으며~~사실 나는 귀찮아서 쓰지 않았습니다~~, 관심이 있다면 검색하여 알아보세요. 여기에서는 그냥 이렇게 조작하면 됩니다. 원리를 고려할 필요는 없습니다)
+4. 수정하려는 파일을 찾아 "Go to file"을 클릭하여 전역 검색을 수행하거나 아래 폴더에서 직접 찾을 수 있습니다. (파일의 위치를 알고 있다면)
 
-   ![image](/image/zh-cn/pr-tutorial/pr-4.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-4-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-4-dark.png"
+        }
+      ]
+    }
+    ```
 
-5. 수정하려는 파일을 찾아 "Go to file"을 클릭하여 전역 검색을 수행하거나 아래 폴더에서 직접 찾을 수 있습니다. (파일의 위치를 알고 있다면)
+5. 파일을 열면 파일 오른쪽 상단의 ✏️을 클릭하여 편집합니다.
 
-   ![image](/image/zh-cn/pr-tutorial/pr-5.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-5-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-5-dark.png"
+        }
+      ]
+    }
+    ```
 
-6. 파일을 열면 파일 오른쪽 상단의 ✏️을 클릭하여 편집합니다.
+6. 수정하세요! (리소스 파일과 같은 경우 먼저 컴퓨터에있는 MAA 폴더에서 수정 사항을 테스트 한 다음 웹 페이지로 복사하여 잘못된 수정을 방지하세요)
+7. 수정이 완료되면 맨 아래로 스크롤하여 수정 내용을 적습니다.
 
-   ![image](/image/zh-cn/pr-tutorial/pr-6.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-7. 수정하세요! (리소스 파일과 같은 경우 먼저 컴퓨터에있는 MAA 폴더에서 수정 사항을 테스트 한 다음 웹 페이지로 복사하여 잘못된 수정을 방지하세요)
-8. 수정이 완료되면 맨 아래로 스크롤하여 수정 내용을 적습니다.
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-   ![image](/image/zh-cn/pr-tutorial/pr-8.png)
-
-9. 두 번째 파일을 수정해야합니까? 수정 후 오류가 발생하여 수정을 다시하고 싶습니까? 전혀 문제가되지 않습니다! 5-8을 반복하세요!
-10. 모두 완료되면 PR을 제출하세요! Pull Request 탭을 클릭합니다.
+8. 두 번째 파일을 수정해야합니까? 수정 후 오류가 발생하여 수정을 다시하고 싶습니까? 전혀 문제가되지 않습니다! 5-8을 반복하세요!
+9. 모두 완료되면 PR을 제출하세요! Pull Request 탭을 클릭합니다.
    Compare & Pull Request 버튼이 있으면 좋지만 없어도 걱정하지 마세요. 아래의 New Pull Request를 클릭하면 됩니다. (11단계 참조)
 
-    ![image](/image/zh-cn/pr-tutorial/pr-10.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-9-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-9-dark.png"
+        }
+      ]
+    }
+    ```
 
-11. 이제 주 저장소로 이동하여 제출할 PR을 확인합니다.
+10. 이제 주 저장소로 이동하여 제출할 PR을 확인합니다.
    아래 그림에서 화살표가 있는 곳은 오른쪽에 개인 이름/MAA의 dev 브랜치를 주 저장소/MAA의 dev 브랜치에 병합하는 것입니다.
-   그런 다음 제목, 수정한 내용 등을 작성하고 확인을 클릭합니다.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-11.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-12. MAA 팀의 전문가들의 검토를 기다립니다! 물론 그들도 의견을 제시 할 수 있습니다.
+    그런 다음 제목, 수정한 내용 등을 작성하고 확인을 클릭합니다.
+
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-2-dark.png"
+        }
+      ]
+    }
+    ```
+
+11. MAA 팀의 전문가들의 검토를 기다립니다! 물론 그들도 의견을 제시 할 수 있습니다.
    👇 예를 들어(오로지 오락을 위한 것이니 진지하게 받아들이지 마세요)
-    ![image](/image/zh-cn/pr-tutorial/pr-12.png)
 
-13. 만약 전문가들이 몇 가지 작은 문제를 수정하라고 말한다면 개인 저장소로 돌아가 이전의 dev 브랜치로 이동하여 3-9 단계를 반복하세요!
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-11-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-11-dark.png"
+        }
+      ]
+    }
+    ```
+
+12. 만약 전문가들이 몇 가지 작은 문제를 수정하라고 말한다면 개인 저장소로 돌아가 이전의 dev 브랜치로 이동하여 3-9 단계를 반복하세요!
    당신의 현재 PR은 여전히 검토 대기 중이므로 나중에 수정 사항이 이 PR에 직접 반영됩니다.
    👇 예를 들어 아래에서 "재수정 데모"라는 새로운 내용이 추가된 것을 볼 수 있습니다.
-    ![image](/image/zh-cn/pr-tutorial/pr-13.png)
 
-14. 전문가들의 승인을 기다리면 모두 완료됩니다! **버전이 출시**되면 당신의 GitHub 프로필 사진이 자동으로 기여자 목록에 추가됩니다. 모든 분들의 자비로운 공헌에 감사드립니다!  
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-12-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-12-dark.png"
+        }
+      ]
+    }
+    ```
+
+13. 전문가들의 승인을 기다리면 모두 완료됩니다! **버전이 출시**되면 당신의 GitHub 프로필 사진이 자동으로 기여자 목록에 추가됩니다. 모든 분들의 자비로운 공헌에 감사드립니다!  
     ~~왜 모든 사람들이 이중 인격이야, 오 나도 그렇지, 그럼 괜찮아~~
 
     ::: tip 기여자
@@ -113,7 +251,7 @@ PR로도 알려져 있으며, "풀 리퀘스트"라는 용어는 너무 길고
     [![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
     :::
 
-15. 다음에 다른 PR을 제출하려면 먼저 dev 브랜치로 전환한 다음 아래 그림과 같이 진행하세요.
+14. 다음에 다른 PR을 제출하려면 먼저 dev 브랜치로 전환한 다음 아래 그림과 같이 진행하세요.
 
     ::: warning
     이 조작은 개인 저장소를 주 저장소와 완전히 동일한 상태로 강제로 동기화합니다. 이것은 충돌을 해결하는 가장 간단하고 효과적인 방법입니다. 그러나 개인 저장소에 이미 추가한 것이 있으면 그것이 삭제됩니다!
@@ -122,6 +260,19 @@ PR로도 알려져 있으며, "풀 리퀘스트"라는 용어는 너무 길고
 
     에서 설명한 이 모든 것을 모르거나 알 필요가 없다면 왼쪽의 버튼을 클릭하세요.
 
-    ![image](/image/zh-cn/pr-tutorial/pr-15.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-1-dark.png"
+        },
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-2-dark.png"
+        }
+      ]
+    }
+    ```
 
     그러면 3-14 단계를 반복하여 수정하고 PR을 제출하면 됩니다~

docs/ko-kr/readme.md

@@ -49,36 +49,20 @@ MAA는 MAA Assistant Arknights의 약자입니다
 
 말로만 설명하기보다는 사진으로 보여드리겠습니다!
 
-<!-- markdownlint-disable -->
-
-<div class="image-ko-kr">
-  <img src="/image/ko-kr/readme/1-light.png" />
-  <img src="/image/ko-kr/readme/2-light.png" />
-</div>
-
-<style>
-  .image-ko-kr {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  .image-ko-kr > img {
-     box-sizing: border-box;
-     width: 50% !important;
-     padding: 9px;
-     border-radius: 16px;
-  }
-
-  @media (max-width: 419px){
-    .image-ko-kr > img {
-      width: 100% !important;
+```component Image2
+{
+  "imageList": [
+    {
+      "light": "image/ko-kr/readme/1-light.png",
+      "dark": "image/ko-kr/readme/1-light.png"
+    },
+    {
+      "light": "image/ko-kr/readme/2-light.png",
+      "dark": "image/ko-kr/readme/2-light.png"
     }
-  }
-</style>
-
-<!-- markdownlint-restore -->
+  ]
+}
+```
 
 ## 다운로드
 

docs/zh-cn/develop/pr-tutorial.md

@@ -9,7 +9,7 @@ icon: mingcute:git-pull-request-fill
 
 ::: warning
 本教程中对很多概念进行了简化，为了让更多朋友能实际用起来，甚至有一些很不优雅~~但是简单~~的操作，还有一些不那么正确的解释，还请大佬们轻喷。  
-若您有一定的 git 使用经验及编程基础，~~那你还看个~~🔨，可以看稍微进阶一点的教程 [Github Pull Request 流程简述](./development.md)
+若您有一定的 git 使用经验及编程基础，~~那你还看个 🔨~~，可以看稍微进阶一点的教程 [Github Pull Request 流程简述](./development.md)
 :::
 
 ## 基本概念及名词解释
@@ -22,7 +22,16 @@ icon: mingcute:git-pull-request-fill
 
 👇 可以简单理解为当前这个网页及里面所有的内容，就是 MAA 的仓库（我们一般称之为 MAA 的主仓库）
 
-![image](/image/zh-cn/pr-tutorial/repository.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/repository-light.png",
+      "dark": "image/zh-cn/pr-tutorial/repository-dark.png"
+    }
+  ]
+}
+```
 
 ### Fork（复制）
 
@@ -30,10 +39,19 @@ icon: mingcute:git-pull-request-fill
 但一般说中文“复制”我们可能首先想到的是 copy 的意思，fork 也没有其他明确的翻译，所以我们一般习惯直接说英文，比如“把代码 fork 一份走”
 
 既然是复制后的，那就是 `MAA (1)`（bushi）  
-为了和原本的仓库区分开，所以我们一般将原本的 MAA 仓库称为 “主仓库”、“upstream（上游仓库）”、“origin（原仓库）”；  
-因为每个人都可以自己复制一份走，所以复制后的称之为“个人仓库”
+为了和原本的仓库区分开，所以我们一般将原本的 MAA 仓库称为 “主仓库”、“upstream（上游仓库）”  
+因为每个人都可以自己复制一份走，所以复制后的称之为“个人仓库”，“origin（原仓库）”
 
-![image](/image/zh-cn/pr-tutorial/fork.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/fork-light.png",
+      "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+    }
+  ]
+}
+```
 
 ### Pull Request（拉取请求、合并请求）
 
@@ -44,7 +62,16 @@ icon: mingcute:git-pull-request-fill
 
 👇 下面的是目前大佬们提的 PR，正在等待审批的
 
-![image](/image/zh-cn/pr-tutorial/pull-request.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/pull-request-light.png",
+      "dark": "image/zh-cn/pr-tutorial/pull-request-dark.png"
+    }
+  ]
+}
+```
 
 ### Conflict（冲突）
 
@@ -55,72 +82,197 @@ icon: mingcute:git-pull-request-fill
 
 ## 纯网页端 PR 操作全流程
 
-1. 首先进入 MAA 主仓库，fork 一份代码
+1. 首先进入 MAA 主仓库，点右上角这个按钮 Fork 一份代码
 
-   ![image](/image/zh-cn/pr-tutorial/pr-1.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/fork-light.png",
+          "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+        }
+      ]
+    }
+    ```
 
-2. 把 “仅 master 分支” 这个选项去掉，然后点击 Create Fork
+2. 然后直接点击 Create Fork
 
-   ![image](/image/zh-cn/pr-tutorial/pr-2.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-2-dark.png"
+        }
+      ]
+    }
+    ```
 
 3. 接下来来到了你的个人仓库，可以看到标题是 “你的名字/MaaAssistantArknights”，下面一行小字 forked from MaaAssistantArknights/MaaAssistantArknights （复制自 MAA 主仓库）
 
-   ![image](/image/zh-cn/pr-tutorial/pr-3.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-3-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-3-dark.png"
+        }
+      ]
+    }
+    ```
 
-4. 切换到 dev 分支（分支这个概念和本文关系不大，~~其实是我懒得写~~，有兴趣可以搜索了解下，这里只需要这样操作即可，暂时不用关心原理）
+4. 找到你要改的文件，可以点 “Go to file” 进行全局搜索，也可以直接在下面的文件夹里翻（如果你知道文件在哪的话）
 
-   ![image](/image/zh-cn/pr-tutorial/pr-4.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-4-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-4-dark.png"
+        }
+      ]
+    }
+    ```
 
-5. 找到你要改的文件，可以点 “Go to file” 进行全局搜索，也可以直接在下面的文件夹里翻（如果你知道文件在哪的话）
+5. 打开文件后，直接点击文件右上角的 ✏️ 进行编辑
 
-   ![image](/image/zh-cn/pr-tutorial/pr-5.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-5-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-5-dark.png"
+        }
+      ]
+    }
+    ```
 
-6. 打开文件后，直接点击文件右上角的 ✏️ 进行编辑
+6. 开改！（如果是资源文件这种，我们建议先在你电脑上的 MAA 文件夹里测试修改，确认没问题了再粘贴到网页上，避免改错了）
+7. 改完了，点击右上角的 👇 这个按钮，打开提交页面，写一下你改了啥
 
-   ![image](/image/zh-cn/pr-tutorial/pr-6.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-7. 开改！（当然如果是资源文件这种，我们建议先在你电脑上的 MAA 文件夹里测试修改，确认没问题了再粘贴到网页上，避免改错了）
-8. 改完了，翻到最下面，写一下你改了啥
+    我们有一个简单的提交标题[命名格式](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，最好可以遵守一下，当然如果实在看不懂也可以先随便写
 
-   ![image](/image/zh-cn/pr-tutorial/pr-8.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-9. 还有第二个文件要改的？改完了发现弄错了想再改改？都没关系！重复 5-8 即可！
-10. 全改好了进行 PR ！直接点 **个人仓库** 里的 Pull Request 标签页  
-    如果有 Compare & Pull Request 按钮，那最好，直接点他！如果没有也不用着急，点下面的 New Pull Request 也是一样的（请看步骤 11）
+8. 还有第二个文件要改的？改完了发现弄错了想再改改？都没关系！重复步骤 4-7 即可！
+9. 全改好了进行 PR ！直接点 Code 回到**个人仓库**的主页  
+    如果有 Compare & Pull Request 按钮，那最好，直接点他！  
+    如果没有也不用着急，点下面的 Contribute（贡献）按钮，再点 Open Pull Request 也是一样的
 
-    ![image](/image/zh-cn/pr-tutorial/pr-10.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-9-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-9-dark.png"
+        }
+      ]
+    }
+    ```
+
+10. 这时候来到了主仓库的 PR 页面，请核对一下你要 PR 的是不是你想提交的  
+    如图中，中间有个向左的箭头，是将右边的的 个人姓名/MAA 的 dev 分支，申请合并到 主仓库/MAA 的 dev 分支  
+    而往下翻则是这两个分支之间的差异，即你都改了什么
+
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-11. 这时候来到了主仓库，请核对一下你要 PR 的是否确认。  
-    如图中，中间有个向左的箭头，是将右边的的 个人姓名/MAA 的 dev 分支，申请合并到 主仓库/MAA 的 dev 分支。  
     然后写一下标题，你要修改了的具体内容等等的，然后点确认
+    PR 的标题也需要遵守一下[命名格式](https://www.conventionalcommits.org/zh-hans/v1.0.0/)，当然如果还是看不懂也可以先随便写
 
-    ![image](/image/zh-cn/pr-tutorial/pr-11.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-12. 等待 MAA Team 的大佬们审核吧！当然他们也可能会提意见  
+11. 等待 MAA Team 的大佬们审核吧！当然他们也可能会提意见  
     👇 比如（纯属娱乐切勿当真）
-    ![image](/image/zh-cn/pr-tutorial/pr-12.png)
 
-13. 如果大佬们说要再修改一些小问题的话，回到 **你的个人仓库**，切换到先前的 dev 分支，重复 步骤 3-9 即可！  
-    注意不需要操作步骤 2（重新 fork），也不需要操作步骤 10（重新 Pull Request），你当前的 Pull Request 仍处于待审核状态，后续的修改会直接进入到这个 Pull Request 中  
-    👇 比如可以看到最下面多了一条“重新修改演示”的内容
-    ![image](/image/zh-cn/pr-tutorial/pr-13.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-11-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-11-dark.png"
+        }
+      ]
+    }
+    ```
 
-14. 等大佬们审批通过，就全部完成啦！**版本发布后**，你的 GitHub 头像将会自动进入到贡献者列表名单中，非常感谢各位的无私奉献！  
-    ~~怎么全是二次元啊，哦我也是啊，那没事了~~
-    ::: tip 贡献/参与者
-    感谢所有参与到开发/测试中的朋友们，是大家的帮助让 MAA 越来越好！ (\*´▽ ｀)ノノ
+12. 如果大佬们说要再修改一些小问题的话，回到 **你的个人仓库**，重复 步骤 4-7 即可！  
+    注意不需要操作步骤 1-2（重新 fork）和步骤 9-10（重新 Pull Request），你当前的 Pull Request 仍处于待审核状态，后续的修改会直接进入到这个 Pull Request 中  
+    👇 比如可以看到最下面多了一条再次修改的内容
 
-    [![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
-    :::
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-12-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-12-dark.png"
+        }
+      ]
+    }
+    ```
 
-15. 下次如果还想提别的 PR，请先切换到 dev 分支，然后直接如下图操作  
-    ::: warning
-    这个操作会强制将你的个人仓库同步到和主仓库一模一样的状态，这是最简单粗暴但行之有效的解决冲突的方法。但如果你的个人仓库已经有额外的编辑了，会被直接删掉！
-    :::
-    如果确定不会造成冲突，请使用右侧绿色的 `Update Branch` 按钮  
+13. 等大佬们审批通过，就全部完成了，你修改的内容已经进入 MAA 主仓库啦！
 
-    如果你不清楚/不 care 我上面说的这一大堆，也请点击左侧的按钮
+14. 下次如果还想提别的 PR，请先回到你的个人仓库的主页，点击 Sync fork，让你的仓库和主仓库同步。
+    这里注意啦，如果有一个红色的 Discard 1 commit，那就点红色的这个；如果没有，再点绿色的 Update branch。
+    接下来就可以重复 4-10 的步骤再次修改啦
 
-    ![image](/image/zh-cn/pr-tutorial/pr-15.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-1-dark.png"
+        },
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-    接着重复步骤 3-14，修改、提 PR 即可~
+在**版本发布后**，你的 GitHub 头像将会自动进入到贡献者列表名单中，非常感谢各位的无私奉献！  
+~~怎么全是二次元啊，哦我也是啊，那没事了~~
+::: tip 贡献/参与者
+感谢所有参与到开发/测试中的朋友们，是大家的帮助让 MAA 越来越好！ (\*´▽ ｀)ノノ
+
+[![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
+:::

docs/zh-cn/readme.md

@@ -47,7 +47,7 @@ MAA 的意思是 MAA Assistant Arknights
 
 话不多说，看图！  
 
-```component ImageGrid
+```component Image4
 {
   "imageList": [
     {

docs/zh-tw/develop/pr-tutorial.md

@@ -21,7 +21,16 @@ icon: mingcute:git-pull-request-fill
 
 👇 可以簡單理解為目前這個網頁及裡面所有的內容，就是 MAA 的倉庫（我們一般稱之為 MAA 的主倉庫）
 
-![image](/image/zh-cn/pr-tutorial/repository.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/repository-light.png",
+      "dark": "image/zh-cn/pr-tutorial/repository-dark.png"
+    }
+  ]
+}
+```
 
 ### Fork（複製）
 
@@ -32,7 +41,16 @@ icon: mingcute:git-pull-request-fill
 為了和原本的倉庫區分開，所以我們一般將原本的 MAA 倉庫稱為 “主倉庫”、“upstream （上遊倉庫）”、“origin （原倉庫）”；  
 因為每個人都可以自己複製一份走，所以複製後的稱之為 “個人倉庫”
 
-![image](/image/zh-cn/pr-tutorial/fork.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/fork-light.png",
+      "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+    }
+  ]
+}
+```
 
 ### Pull Request（拉取請求、合併請求）
 
@@ -43,7 +61,16 @@ icon: mingcute:git-pull-request-fill
 
 👇 下面的是目前大佬們提的 PR，正在等待審批的
 
-![image](/image/zh-cn/pr-tutorial/pull-request.png)
+```component Image1
+{
+  "imageList": [
+    {
+      "light": "image/zh-cn/pr-tutorial/pull-request-light.png",
+      "dark": "image/zh-cn/pr-tutorial/pull-request-dark.png"
+    }
+  ]
+}
+```
 
 ### Conflict（衝突）
 
@@ -56,55 +83,166 @@ icon: mingcute:git-pull-request-fill
 
 1. 首先進入 MAA 主倉庫，fork 一份代碼
 
-    ![~ NKHB1CIE8`G(UK@ %3`H](/image/zh-cn/pr-tutorial/pr-1.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/fork-light.png",
+          "dark": "image/zh-cn/pr-tutorial/fork-dark.png"
+        }
+      ]
+    }
+    ```
 
 2. 把 “僅 master 分支” 這個選項去掉，然後點擊 Create Fork
 
-    ![20221004144039](/image/zh-cn/pr-tutorial/pr-2.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-2-dark.png"
+        }
+      ]
+    }
+    ```
 
 3. 接下來來到了你的個人倉庫，可以看到標題是 “你的名字/MaaAssistantArknights”，下面一行小字 forked from MaaAssistantArknights/MaaAssistantArknights （複製自 MAA 主倉庫）
 
-    ![image](/image/zh-cn/pr-tutorial/pr-3.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-3-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-3-dark.png"
+        }
+      ]
+    }
+    ```
 
-4. 切換到 dev 分支（分支這個概念和本文關係不大，~~其實是我懶得寫~~，有興趣可以搜尋了解下，這裡只需要這樣操作即可，暫時不用關心原理）
+4. 找到你要改的檔案，可以點 “Go to file” 進行全局搜尋，也可以直接在下面的資料夾裡翻（如果你知道檔案在哪的話）
 
-    ![image](/image/zh-cn/pr-tutorial/pr-4.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-4-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-4-dark.png"
+        }
+      ]
+    }
+    ```
 
-5. 找到你要改的檔案，可以點 “Go to file” 進行全局搜尋，也可以直接在下面的資料夾裡翻（如果你知道檔案在哪的話）
+5. 打開檔案後，直接點擊檔案右上角的 ✏️ 進行編輯
 
-    ![image](/image/zh-cn/pr-tutorial/pr-5.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-5-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-5-dark.png"
+        }
+      ]
+    }
+    ```
 
-6. 打開檔案後，直接點擊檔案右上角的 ✏️ 進行編輯
+6. 開改！（當然如果是資源檔案這種，我們建議先在你電腦上的 MAA 資料夾裡測試修改，確認沒問題了再貼上到網頁上，避免改錯了）
+7. 改完了，翻到最下面，寫一下你改了啥
 
-    ![image](/image/zh-cn/pr-tutorial/pr-6.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-1-dark.png"
+        }
+      ]
+    }
+    ```
 
-7. 開改！（當然如果是資源檔案這種，我們建議先在你電腦上的 MAA 資料夾裡測試修改，確認沒問題了再貼上到網頁上，避免改錯了）
-8. 改完了，翻到最下面，寫一下你改了啥
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-7-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-7-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-    ![image](/image/zh-cn/pr-tutorial/pr-8.png)
-
-9. 還有第二個檔案要改的？改完了發現弄錯了想再改改？都沒關係！重複 5-8 即可！
-10. 全改好了進行 PR ！直接點 **個人倉庫** 裡的 Pull Request 標籤頁  
+8. 還有第二個檔案要改的？改完了發現弄錯了想再改改？都沒關係！重複 5-8 即可！
+9. 全改好了進行 PR ！直接點 **個人倉庫** 裡的 Pull Request 標籤頁  
     如果有 Compare & Pull Request 按鈕，那最好，直接點他！如果沒有也不用著急，點下面的 New Pull Request 也是一樣的（請看步驟 11）
 
-    ![image](/image/zh-cn/pr-tutorial/pr-10.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-9-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-9-dark.png"
+        }
+      ]
+    }
+    ```
 
-11. 這時候來到了主倉庫，請核對一下你要 PR 的是否確認。  
+10. 這時候來到了主倉庫，請核對一下你要 PR 的是否確認。  
     如圖中，中間有個向左的箭頭，是將右邊的 個人姓名/MAA 的 dev 分支，申請合併到 主倉庫/MAA 的 dev 分支。  
+
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-1-dark.png"
+        }
+      ]
+    }
+    ```
+
     然後寫一下標題，你修改的具體內容等等的，然後點確認
 
-    ![image](/image/zh-cn/pr-tutorial/pr-11.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-10-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-10-2-dark.png"
+        }
+      ]
+    }
+    ```
 
-12. 等待 MAA Team 的大佬們審核吧！當然他們也可能會提意見  
+11. 等待 MAA Team 的大佬們審核吧！當然他們也可能會提意見  
   👇 比如（純屬娛樂切勿當真）
-    ![image](/image/zh-cn/pr-tutorial/pr-12.png)
 
-13. 如果大佬們說要再修改一些小問題的話，回到 **你的個人倉庫**，切換到先前的 dev 分支，重複 步驟 3-9 即可！  
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-11-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-11-dark.png"
+        }
+      ]
+    }
+    ```
+
+12. 如果大佬們說要再修改一些小問題的話，回到 **你的個人倉庫**，切換到先前的 dev 分支，重複 步驟 3-9 即可！  
   注意不需要操作步驟 2（重新 fork），也不需要操作步驟 10（重新 Pull Request），你目前的 Pull Request 仍處於待審核狀態，後續的修改會直接進入到這個 Pull Request 中  
   👇 比如可以看到最下面多了一條 “重新修改演示” 的內容
-    ![image](/image/zh-cn/pr-tutorial/pr-13.png)
 
-14. 等大佬們審批通過，就全部完成啦！**版本發布後**，你的 GitHub 頭像將會自動進入到貢獻者列表名單中，非常感謝各位的無私奉獻！  
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-12-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-12-dark.png"
+        }
+      ]
+    }
+    ```
+
+13. 等大佬們審批通過，就全部完成啦！**版本發布後**，你的 GitHub 頭像將會自動進入到貢獻者列表名單中，非常感謝各位的無私奉獻！  
     ~~怎麽全是二次元啊，哦我也是啊，那沒事了~~
     ::: tip 貢獻 / 參與者
     感謝所有參與到開發 / 測試中的朋友們，是大家的幫助讓 MAA 越來越好！ (*´▽｀)ノノ
@@ -112,7 +250,7 @@ icon: mingcute:git-pull-request-fill
     [![Contributors](https://contributors-img.web.app/image?repo=MaaAssistantArknights/MaaAssistantArknights&max=114514&columns=15)](https://github.com/MaaAssistantArknights/MaaAssistantArknights/graphs/contributors)
     :::
 
-15. 下次如果還想提別的 PR，請先切換到 dev 分支，然後直接如下圖操作  
+14. 下次如果還想提別的 PR，請先切換到 dev 分支，然後直接如下圖操作  
     ::: warning
     這個操作會強制將你的個人倉庫同步到和主倉庫一模一樣的狀態，這是最簡單粗暴但行之有效的解決衝突的方法。但如果你的個人倉庫已經有額外的編輯了，會被直接刪掉！
     :::
@@ -120,6 +258,19 @@ icon: mingcute:git-pull-request-fill
 
     如果你不清楚 / 不 care 我上面說的這一大堆，也請點擊左側的按鈕
 
-    ![image](/image/zh-cn/pr-tutorial/pr-15.png)
+    ```component Image1
+    {
+      "imageList": [
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-1-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-1-dark.png"
+        },
+        {
+          "light": "image/zh-cn/pr-tutorial/pr-14-2-light.png",
+          "dark": "image/zh-cn/pr-tutorial/pr-14-2-dark.png"
+        }
+      ]
+    }
+    ```
 
     接著重複步驟 3-14，修改、提 PR 即可 ~

docs/zh-tw/readme.md

@@ -48,7 +48,7 @@ MAA 的意思是 MAA Assistant Arknights
 
 話不多說，看圖！
 
-```component ImageGrid
+```component Image4
 {
   "imageList": [
     {