refactor: doc md to mdx (#2530)

* refactor: doc md to mdx
galacean · Jan 24, 2025 · 7814b04 · 7814b04
1 parent 7dc4430
commit 7814b04
Show file tree

Hide file tree

Showing 34 changed files with 637 additions and 647 deletions.
diff --git a/docs/en/core/canvas.md → docs/en/core/canvas.mdx b/docs/en/core/canvas.md → docs/en/core/canvas.mdx
diff --git a/docs/en/core/clone.md → docs/en/core/clone.mdx b/docs/en/core/clone.md → docs/en/core/clone.mdx
diff --git a/docs/en/core/component.md b/docs/en/core/component.md
diff --git a/docs/en/core/component.mdx b/docs/en/core/component.mdx
@@ -0,0 +1,98 @@
+---
+order: 4
+title: Components
+type: Core
+label: Core
+---
+
+An [Entity](/apis/core/#Entity) does not have actual functionalities such as rendering models. These functionalities are achieved by loading [Component](/apis/core/#Component) classes. For example, if you want an _Entity_ to become a camera, you simply add a camera component [Camera](/apis/core/#Camera) to the _Entity_. This component-based extension approach focuses on encapsulating functionalities independently and combining them as needed, which is very beneficial for reducing program coupling and enhancing code reusability.
+
+Common Components:
+
+| Name                                               | Description      |
+| :------------------------------------------------- | :--------------- |
+| [Camera](/apis/core/#Camera)                       | Camera           |
+| [MeshRenderer](/apis/core/#MeshRenderer)           | Static model renderer |
+| [SkinnedMeshRenderer](/apis/core/#SkinnedMeshRenderer) | Skinned model renderer |
+| [Animator](/apis/core/#Animator)                   | Animation control component |
+| [DirectLight](/apis/core/#DirectLight)             | Directional light |
+| [PointLight](/apis/core/#PointLight)               | Point light      |
+| [SpotLight](/apis/core/#SpotLight)                 | Spotlight        |
+| [ParticleRenderer](/apis/core/#ParticleRenderer)   | Particle system  |
+| [BoxCollider](/apis/core/#BoxCollider)             | Box collider     |
+| [SphereCollider](/apis/core/#SphereCollider)       | Sphere collider  |
+| [PlaneCollider](/apis/core/#PlaneCollider)         | Plane collider   |
+| [Script](/apis/core/#Script)                       | Script           |
+
+## Using the Editor
+
+After selecting an entity from the **[Hierarchy Panel](/docs/interface/hierarchy)** or the scene, the inspector will display all the components mounted on the currently selected node, with the component name displayed in the top left corner.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*tZcpRrrYQcMAAAAAAAAAAAAADsJ_AQ/original" alt="Name" style={{zoom: "50%"}} />
+
+You can control whether it is enabled in the inspector.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*QRG8TZ1IorQAAAAAAAAAAAAADsJ_AQ/original" alt="Enable" style={{zoom: "50%"}} />
+
+If you don't need it, you can also delete it.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*uqFGQIHyLAwAAAAAAAAAAAAADsJ_AQ/original" alt="Delete" style={{zoom: "50%"}} />
+
+Or edit its various properties.
+
+<Image src="https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*IFnGRYHdi7gAAAAAAAAAAAAADsJ_AQ/original" alt="Edit" style={{zoom: "50%"}} />
+
+If it's an empty node, you can click the `Add Component` button to add new components to the current entity.
+
+<Image src="https://gw.alipayobjects.com/zos/OasisHub/95d58dde-109f-44b2-89ef-2959ad8b4fe3/image-20230926112713126.png" alt="image-20230926112713126" style={{zoom: "50%"}} />
+
+## Using Scripts
+
+### Adding a Component
+
+We use [addComponent(Component)](/apis/core/#Entity-addComponent) to add components. For example, to add a "parallel light" component ([DirectLight](/apis/core/#DirectLight)) to an `Entity`:
+
+```typescript
+const lightEntity = rootEntity.createChild("light");
+const directLight = lightEntity.addComponent(DirectLight);
+directLight.color = new Color(0.3, 0.3, 1);
+directLight.intensity = 1;
+```
+
+### Finding Components on an Entity
+
+When we need to get a component on an entity, the [getComponent](/apis/core/#Entity-getComponent) API will help you find the target component.
+
+```typescript
+const component = newEntity.getComponent(Animator);
+```
+
+Sometimes there may be multiple components of the same type, and the above method will only return the first found component. If you need to find all components, you can use [getComponents](/apis/core/#Entity-getComponents):
+
+```typescript
+const components = [];
+newEntity.getComponents(Animator, components);
+```
+
+In entities obtained from assets like glTF, we might not know which entity contains the target component. In this case, you can use [getComponentsIncludeChildren](/apis/core/#Entity-getComponentsIncludeChildren) to search.
+
+```typescript
+const components = [];
+newEntity.getComponentsIncludeChildren(Animator, components);
+```
+
+### Obtaining the Entity of a Component
+
+Continuing from the example of adding a component at the beginning, you can directly obtain the entity of a component:
+
+```typescript
+const entity = directLight.entity;
+```
+
+### State
+
+When you temporarily do not need a component, you can actively call the component's [enabled](/apis/core/#Component-enabled).
+
+```typescript
+directLight.enabled = false;
+```
diff --git a/docs/en/core/engine.md → docs/en/core/engine.mdx b/docs/en/core/engine.md → docs/en/core/engine.mdx
diff --git a/docs/en/core/math.md → docs/en/core/math.mdx b/docs/en/core/math.md → docs/en/core/math.mdx
@@ -255,7 +255,7 @@ color2.toLinear(linearColor);
 ## Plane
 We can define a plane using a vector (normal) and a distance. The normal represents the direction of the plane based on the coordinate origin, and the plane is perpendicular to the normal. The distance represents the distance of the plane from the coordinate origin along the normal direction. For example, a plane perpendicular to the Y-axis with a distance of 5 is illustrated as follows:
 
-![plane](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original)
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*1HMeRbPQv1kAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "30%"}} />
 
 The code to create it is as follows:
 ```typescript
@@ -394,7 +394,8 @@ const isIntersect4 = frustum.intersectsSphere(sphere2);
 ```
 ## Ray
 A ray represents a line that starts from a point (origin) and extends infinitely in a specified direction (direct), as shown below:
-![alt text](https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original)
+
+<Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*w2XVQL-K4UEAAAAAAAAAAAAADjCHAQ/original" style={{zoom: "50%"}} />
 
 The types of detection supported by rays are as follows:
 | Type | Description |

diff --git a/docs/en/core/prefab.md b/docs/en/core/prefab.md