docs: add built-in components reference

Author: meteorlxy

docs/guide/markdown.md

@@ -82,6 +82,8 @@ Take our documentation source files as an example:
 This links extension is supported by our built-in plugin.
 
 Config reference: [markdown.links](../reference/config.md#markdown-links)
+
+Also see: [Built-in Components > OutboundLink](../reference/components.md#outboundlink)
 :::
 
 ### Emoji :tada:

docs/reference/components.md

@@ -1,3 +1,56 @@
 # Built-in Components
 
-> TODO
+## ClientOnly
+
+- Usage:
+
+  ```md
+  <ClientOnly>
+    <NonSsrFriendlyComponent />
+  </ClientOnly>
+  ```
+
+- Details:
+
+  This component and its children will only be rendered in client-side. That means, it will not be rendered to HTML during build (SSR).
+
+  If a component is trying to access Browser / DOM APIs directly in `setup()`, an error will occur during build because those APIs are unavailable in Node.js environment. In such case, you could do either:
+
+  - Modify the component to only access Browser / DOM APIs in `onBeforeMount()` or `onMounted()` hook.
+  - Wrap the component with `<ClientOnly>`.
+
+## Content
+
+- Props:
+  - pagePath
+    - Type: `string`
+    - Required: `false`
+
+- Usage:
+
+  ```md
+  <Content page-path="/" />
+  <Content page-path="/foo.html" />
+  ```
+
+- Details:
+
+  This component will render the Markdown content of a page.
+
+  If the `pagePath` prop is not provided, it will render the page of current route path.
+
+  This component is mainly for developing themes. You won't need it in most cases.
+
+## OutboundLink
+
+- Usage:
+
+  ```md
+  <OutboundLink />
+  ```
+
+- Details:
+
+  This component will render an indicator for links to external URLs.
+
+  This component is mainly for developing themes. You won't need it in most cases.

docs/zh/guide/markdown.md

@@ -83,6 +83,8 @@ VuePress 会使用 [markdown-it](https://github.com/markdown-it/markdown-it) 来
 链接扩展是由我们的内置插件支持的。
 
 配置参考： [markdown.links](../reference/config.md#markdown-links)
+
+参考: [內置组件 > OutboundLink](../reference/components.md#outboundlink)
 :::
 
 ### Emoji :tada:

docs/zh/reference/components.md

@@ -1,3 +1,57 @@
 # 内置组件
 
-> TODO
+
+## ClientOnly
+
+- 使用：
+
+  ```md
+  <ClientOnly>
+    <NonSsrFriendlyComponent />
+  </ClientOnly>
+  ```
+
+- 详情：
+
+  该组件和它的子元素只会在客户端被渲染。也就是说，它不会在构建 (SSR) 过程中被渲染到 HTML 内。
+
+  如果一个组件在 `setup()` 中直接使用 浏览器 / DOM API ，它会导致构建过程报错，因为这些 API 在 Node.js 的环境中是无法使用的。在这种情况下，你可以选择一种方式：
+
+  - 修改这个组件，只在  `onBeforeMount()` 或 `onMounted()` Hook 中使用 浏览器 / DOM API 。
+  - 使用 `<ClientOnly>` 包裹这个组件。
+
+## Content
+
+- Props:
+  - pagePath
+    - 类型： `string`
+    - 是否必须： `false`
+
+- 使用：
+
+  ```md
+  <Content page-path="/" />
+  <Content page-path="/foo.html" />
+  ```
+
+- 详情：
+
+  该组件会渲染页面的 Markdown 内容。
+
+  如果没有传入 `pagePath` Prop ，它会渲染当前路由路径下的页面。
+
+  该组件主要是为了开发主题时使用。在绝大多数情况下你不会用到它。
+
+## OutboundLink
+
+- 使用：
+
+  ```md
+  <OutboundLink />
+  ```
+
+- 详情：
+
+  该组件会渲染一个标识外部 URL 链接的图标。
+
+  该组件主要是为了开发主题时使用。在绝大多数情况下你不会用到它。