docs: link and example on using components

packages/document/docs/en/guide/advanced/custom-theme.mdx

@@ -38,9 +38,9 @@ On the one hand, you need to export a theme configuration object through `export
 
 ### 2. Use slot
 
-It is worth noting that the Layout component has designed a series of props to support slot elements. You can use these props to extend the layout of the default theme. For example, change the above Layout component to the following form:
+It is worth noting that the `Layout` component has designed a series of props to support slot elements. You can use these props to extend the layout of the default theme. For example, change the above `Layout` component to the following form:
 
-```tsx
+```tsx title="theme/index.tsx"
 import Theme from 'rspress/theme';
 
 // Show all props below

packages/document/docs/en/guide/basic/use-mdx.mdx

@@ -14,15 +14,44 @@ MDX is a superset of Markdown, which means you can write Markdown files as usual
 
 When you want to use React components in Markdown files, you should name your files with `.mdx` extension. For example:
 
-```mdx
-// docs/index.mdx
+```mdx title="index.mdx"
 import { CustomComponent } from './custom';
 
 # Hello World
 
 <CustomComponent />
 ```
 
+All mdx files are also components and they can import each other:
+
+```mdx
+import Foo from './shared/foo.mdx';
+
+# Hello world
+
+<Foo />
+```
+
+::: tip
+
+Relevant components need to be excluded from routing meta info through [route.exclude](/api/config/config-basic#routeexclude) configuration.
+
+You can also place components in an adjacent directory outside [root](/api/config/config-basic#root). For example:
+
+```mdx
+// <cwd>/docs/index.mdx
+import { Button } from '../components/button';
+
+# Button
+
+<Button />
+
+// <cwd>/components/button.mdx
+export Button = () => <button />;
+```
+
+:::
+
 ## Front Matter
 
 You can add Front Matter at the beginning of your Markdown file, which is a YAML-formatted object that defines some metadata. For example:

packages/document/docs/zh/guide/advanced/custom-theme.mdx

@@ -38,9 +38,9 @@ export * from 'rspress/theme';
 
 ### 2. 使用插槽
 
-值得注意的是，Layout 组件设计了一系列的 props 支持插槽元素，你可以通过这些 props 来扩展默认主题的布局，比如将上面的 Layout 组件改成如下的形式:
+值得注意的是，`Layout` 组件设计了一系列的 props 支持插槽元素，你可以通过这些 props 来扩展默认主题的布局，比如将上面的 `Layout` 组件改成如下的形式:
 
-```tsx
+```tsx title="theme/index.tsx"
 import Theme from 'rspress/theme';
 
 // 以下展示所有的 Props

packages/document/docs/zh/guide/basic/use-mdx.mdx

@@ -14,15 +14,44 @@ MDX 是 Markdown 的超集，这意味着你可以像往常一样编写 Markdown
 
 当你想在 Markdown 文件中使用 React 组件时，你应该使用 `.mdx` 扩展名来命名你的文件。例如：
 
-```mdx
-// docs/index.mdx
+```mdx title="index.mdx"
 import { CustomComponent } from './custom';
 
 # Hello World
 
 <CustomComponent />
 ```
 
+所有的 mdx 文件也被视为组件，它们可以被互相引用：
+
+```mdx
+import Foo from './shared/foo.mdx';
+
+# Hello world
+
+<Foo />
+```
+
+::: tip
+
+相关组件需要通过 [route.exclude](/api/config/config-basic#routeexclude) 配置从路由信息中排除。
+
+你也可以将组件放到 [root](/api/config/config-basic#root) 以外的相邻目录，例如：
+
+```mdx
+// <cwd>/docs/index.mdx
+import { Button } from '../components/button';
+
+# Button
+
+<Button />
+
+// <cwd>/components/button.mdx
+export Button = () => <button />;
+```
+
+:::
+
 ## Front Matter
 
 你可以在 Markdown 文件的开头添加 Front Matter，它是一个 YAML 格式的对象，用于定义一些元数据。例如：