ant-design · arvinxx · Jun 18, 2024 · Jun 18, 2024
diff --git a/docs/api/create-styles.zh-CN.md b/docs/api/create-styles.zh-CN.md
@@ -12,7 +12,7 @@ demo:
 这是最推荐的使用方式。书写应用样式或者覆写基础组件样式，都可以采用这种写法。
 :::
 
-使用 `createStyles` 可以创建具有作用域的的样式。书写能力上和 DX 基本与 CSS Modules 齐平。并在动态主题写法更方便，能力更强。createStyles 的基础使用方法详见[快速上手 - 样式创建](/guide/create-styles)，本节将重点介绍 createStyles 的 API。
+使用 `createStyles` 可以创建具有作用域的的样式。书写能力上和 DX 基本与 CSS Modules 齐平。并在动态主题写法更方便，能力更强。createStyles 的基础使用方法详见[快速上手 - 样式创建](/zh-CN/guide/create-styles)，本节将重点介绍 createStyles 的 API。
 
 <code src="../demos/api/createStyles/default.tsx"></code>
 
@@ -54,7 +54,7 @@ interface CssObject {
 
 CSS 序列化函数，是 createStyles 中的核心 api。该方法底层基于 `emotion/css` 封装，我们做了诸多能力上的强化，例如 支持多个 css 对象级联（ `@emotion/css` 在 v11 之后不再支持级联，相关 [issue](https://github.com/emotion-js/emotion/issues/1186)）、支持 `:where` 选择器等。
 
-该序列化函数支持 CSS Object，也支持 CSS String。CSS Object 写法默认可以获得 TS 类型提示， CSS String 写法需要结合 [相关插件](/guide/css-in-js-intro#工程化支持) 获得提示能力。
+该序列化函数支持 CSS Object，也支持 CSS String。CSS Object 写法默认可以获得 TS 类型提示， CSS String 写法需要结合 [相关插件](/zh-CN/guide/css-in-js-intro#工程化支持) 获得提示能力。
 
 :::warning{title=注意事项}
 与 @emotion/css 的 css 不同，该方法的产物类型为 SerializedStyles，是无法直接应用到 className 上的。我们在 createStyles 中做了一层转换，最终得到的 `styles.xxx` 是 className 字符串。

diff --git a/docs/api/create-stylish.zh-CN.md b/docs/api/create-stylish.zh-CN.md
@@ -8,7 +8,7 @@ group:
 
 ## 简介
 
-对于一般的样式诉求，通过 [createStyles](/usage/create-styles) 就可以基本满足，`createStylish` 属于进阶用法。
+对于一般的样式诉求，通过 [createStyles](/zh-CN/usage/create-styles) 就可以基本满足，`createStylish` 属于进阶用法。
 
 在一个复杂的业务系统中，可能会存在一些通用的样式，这些样式颗粒度更细，并不足以形成一个组件。但是如果每次都重复书写即耗费精力，又会有很多重复的代码，一旦设计师要求统一调整设计风格，多次修改的成本极高。为了解决这个问题，`createStylish` 应运而生。
 

diff --git a/docs/api/theme-provider.zh-CN.md b/docs/api/theme-provider.zh-CN.md
@@ -23,13 +23,13 @@ ThemeProvider 本质上是一个 React Context 的数据容器，用于为子级
 
 ## 主题切换
 
-ThemeProvider 默认集成亮暗色主题切换能力，通过 `appearance` props 即可快速完成亮暗色的主题切换。如需详细了解 `antd-style` 的主题切换能力，可以参阅 [主题切换](/guide/switch-theme) 这一部分。
+ThemeProvider 默认集成亮暗色主题切换能力，通过 `appearance` props 即可快速完成亮暗色的主题切换。如需详细了解 `antd-style` 的主题切换能力，可以参阅 [主题切换](/zh-CN/guide/switch-theme) 这一部分。
 
 <code src="../demos/ThemeProvider/SwitchTheme.tsx"></code>
 
 ## useTheme 用法
 
-全局顶层包裹 ThemeProvider 后，使用 `useTheme` 获取 theme 对象，其中包含 antd v5 token 主题值、自定义主题、当前的主题外观等方法。 api 详见 [](api/use-theme-mode)
+全局顶层包裹 ThemeProvider 后，使用 `useTheme` 获取 theme 对象，其中包含 antd v5 token 主题值、自定义主题、当前的主题外观等方法。 api 详见 [](/zh-CN/api/use-theme-mode)
 
 ```tsx | pure
 import { ThemeProvider, useTheme } from 'antd-style';
@@ -172,7 +172,7 @@ export default () => {
 
 :::info{title=全局样式作用域}
 
-在 css-in-js 的世界中，局部作用域非常容易实现。因此应该尽量减少全局作用域的使用（实在不行才用全局作用域）。 这也是 antd v5 中推荐的用法。但如果仍然需全局作用域层面的样式注入，可以使用 [createGlobalStyles](/usage/global-styles) 来完成。
+在 css-in-js 的世界中，局部作用域非常容易实现。因此应该尽量减少全局作用域的使用（实在不行才用全局作用域）。 这也是 antd v5 中推荐的用法。但如果仍然需全局作用域层面的样式注入，可以使用 [createGlobalStyles](/zh-CN/usage/global-styles) 来完成。
 
 :::
 

diff --git a/docs/best-practice/antd-override.zh-CN.md b/docs/best-practice/antd-override.zh-CN.md
@@ -17,7 +17,7 @@ antd 在 V5 提供了全新的 theme 属性用于自定义，因此如果需要
 更多基于 ConfigProvider 的主题定制能力，详见 [聊聊 Ant Design V5 的主题（上）：CSSinJS 动态主题的花活](https://www.yuque.com/antfe/featured/durxuu94nvgvgmzq#vFlnd)。
 :::
 
-antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装，提供业务友好的定制能力，查看：[自定义主题](/guide/custom-theme)
+antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装，提供业务友好的定制能力，查看：[自定义主题](/zh-CN/guide/custom-theme)
 
 ## 基本覆写
 

diff --git a/docs/best-practice/mirgration-less-global-style.zh-CN.md b/docs/best-practice/mirgration-less-global-style.zh-CN.md
@@ -13,7 +13,7 @@ group:
 
 ## 解决方案
 
-优先使用 [codemod](/guide/migrate-less-codemod) 一键迁移，该 Codemod 会自动将 Css Modules 语法中的 :global 转换为 antd-style 中的语法。
+优先使用 [codemod](/zh-CN/guide/migrate-less-codemod) 一键迁移，该 Codemod 会自动将 Css Modules 语法中的 :global 转换为 antd-style 中的语法。
 
 如需手动调整，那么直接移除 :global 语法既可。
 

diff --git a/docs/best-practice/nest-element-style.zh-CN.md b/docs/best-practice/nest-element-style.zh-CN.md
@@ -41,7 +41,7 @@ const useStyles = createStyles(({ css, cx }) => {
 
 ## 原理解析
 
-思路上很简单，因为 `css` 方法产出的始终是[序列化样式对象](/api/create-styles#css)。用 `cx` 包裹 `css` 对象，就会将该对象转成类名 (`acss-xxxx`)。
+思路上很简单，因为 `css` 方法产出的始终是[序列化样式对象](/zh-CN/api/create-styles#css)。用 `cx` 包裹 `css` 对象，就会将该对象转成类名 (`acss-xxxx`)。
 
 ## 相关讨论
 

diff --git a/docs/best-practice/static-message.zh-CN.md b/docs/best-practice/static-message.zh-CN.md
@@ -19,7 +19,7 @@ group: 主题定制
 
 ## 原理解析
 
-antd-style 在 `ThemeProvider` 中提供了一个 [`getStaticInstance`](api/theme-provider#消费静态实例方法) 接口，用户可以从中获取集成后的实例。
+antd-style 在 `ThemeProvider` 中提供了一个 [`getStaticInstance`](/zh-CN/api/theme-provider#消费静态实例方法) 接口，用户可以从中获取集成后的实例。
 
 该方法的实现原理也很简单，以 message 为例：
 

diff --git a/docs/guide/compare.zh-CN.md b/docs/guide/compare.zh-CN.md
@@ -69,7 +69,7 @@ export default () => {
 
 由于 styled 的写法可以保证每一个样式都能形成标准的 React 组件，且样式与样式之间的组合比较方便。因此，它非常适合制作一个从 0 开始建设的业务风格化组件库，或者制作一些具有统一风格的样式组件。
 
-通过 styled 来声明一系列标准的样式组件，可以极大程度地减少重复的样式代码，并且帮助开发者形成明确的样式语义认知。详见案例：[Typography 风格化组件](/case/styled)
+通过 styled 来声明一系列标准的样式组件，可以极大程度地减少重复的样式代码，并且帮助开发者形成明确的样式语义认知。详见案例：[Typography 风格化组件](/zh-CN/case/styled)
 
 如果是在已有一个设计系统的基础上，styled 是不合适的。尤其是 antd v5 本身已经具有很强的动态主题能力基础之上。
 

diff --git a/docs/guide/components-usage.zh-CN.md b/docs/guide/components-usage.zh-CN.md
@@ -114,13 +114,13 @@ export const { createStyles, ThemeProvider } = createInstance<ForDemoToken>({
 
 <code src="../demos/guide/component-usage/CustomInstance"></code>
 
-`createInstance` 方法详细的 API 请查阅: [createInstance](/api/create-instance)。
+`createInstance` 方法详细的 API 请查阅: [createInstance](/zh-CN/api/create-instance)。
 
 ## 最佳实践建议
 
 在组件研发的场景下，我们建议你使用 `createInstance` 方法来创建一个独立的样式实例，这样可以让你的组件库更加独立可控。自定义 token 的消费使用也更加便捷。
 
-针对从 less 迁移的部分，我们建议开启 `{ hashPriority: 'low' }` 配置，这样可以通过极小的迁移成本完成 cssinjs 的改造（详见：[组件代码迁移](/guide/migrate-less-component)）。
+针对从 less 迁移的部分，我们建议开启 `{ hashPriority: 'low' }` 配置，这样可以通过极小的迁移成本完成 cssinjs 的改造（详见：[组件代码迁移](/zh-CN/guide/migrate-less-component)）。
 
 针对使用 cssinjs 完全新写的组件，我们建议仍然使用 `{ hashPriority: 'high' }` 配置。并将所有样式实现放置在 `css` 中，有需要的部分再额外添加 className。这样有两点好处：
 

diff --git a/docs/guide/create-styles.zh-CN.md b/docs/guide/create-styles.zh-CN.md
@@ -111,4 +111,4 @@ const Select = () => {
 
 ## API
 
-关于 `createStyles` 方法的详细 API 说明，可以参阅 [createStyles API 文档](/api/create-styles)。
+关于 `createStyles` 方法的详细 API 说明，可以参阅 [createStyles API 文档](/zh-CN/api/create-styles)。
diff --git a/docs/guide/custom-theme.zh-CN.md b/docs/guide/custom-theme.zh-CN.md
@@ -121,7 +121,7 @@ export default () => (
 );
 ```
 
-关于自定义 Token API 的 demo、Typescript 类型定义集成 等详细介绍，可以查阅 [ThemeProvider - 注入自定义 Token 主题](/api/theme-provider#注入自定义-token-主题)。
+关于自定义 Token API 的 demo、Typescript 类型定义集成 等详细介绍，可以查阅 [ThemeProvider - 注入自定义 Token 主题](/zh-CN/api/theme-provider#注入自定义-token-主题)。
 
 :::success{title=应用案例}
 antd-style 所使用的文档主题包，就自定义了主题包所需的一些自定义 Token，若感兴趣可以前往 [dumi-theme-antd-style](https://dumi-theme-antd-style.arvinx.app/components/dumi-site-provider#demo) 查看。

diff --git a/docs/guide/migrate-less-component.zh-CN.md b/docs/guide/migrate-less-component.zh-CN.md
@@ -124,4 +124,4 @@ export const useStyles = createStyles(({ css, prefixCls })=>{
 
 ## 新组件书写方案
 
-详见：[组件研发](/guide/components-usage#最佳实践建议)
+详见：[组件研发](/zh-CN/guide/components-usage#最佳实践建议)
diff --git a/docs/guide/strategy.zh-CN.md b/docs/guide/strategy.zh-CN.md
@@ -66,12 +66,12 @@ styled 的语法候选池中有两个库： `styled-component` 和 `emotion`。
 
 此外，在我们实际业务落地测试中发现，95% 的样式书写场景都不会用到组件选择器的语法。只有在需要动画、复合选择器等场景才会用到， 而在这种场景下 `createStyles` 的写法将会更加自然易用。
 
-在我们看来，组件选择器的语法本质上是因为 styled 不支持创建 className 才不得已提供的补救措施。而为了这 5% 的使用场景再去额外增大 40% 的体积（10kb+），完全不划算。同时，在最终定稿的实现方案中也明确产出了 styled 的语法替换能力方案。详见：[createInstance-兼容 styled-components](/api/create-instance#兼容-styled-主题方案)。
+在我们看来，组件选择器的语法本质上是因为 styled 不支持创建 className 才不得已提供的补救措施。而为了这 5% 的使用场景再去额外增大 40% 的体积（10kb+），完全不划算。同时，在最终定稿的实现方案中也明确产出了 styled 的语法替换能力方案。详见：[createInstance-兼容 styled-components](/zh-CN/api/create-instance#兼容-styled-主题方案)。
 
 因此综合实践案例，结合包体积、使用场景，我们在多次摇摆下最终选择了 `@emotion/styled` 作为 `styled` 语法的样式引擎。
 
 :::info{title=特别说明}
-虽然选择了 `@emotion/styled` 作为 styled 语法的样式引擎，但是 antd-style 并没有内置 `styled` 方法，而仅仅默认集成 `@emotion/react` 的 ThemeContext。详情可以查看：[与 styled 集成](/guide/styled)
+虽然选择了 `@emotion/styled` 作为 styled 语法的样式引擎，但是 antd-style 并没有内置 `styled` 方法，而仅仅默认集成 `@emotion/react` 的 ThemeContext。详情可以查看：[与 styled 集成](/zh-CN/guide/styled)
 :::
 
 ### css: 为什么选择 emotion

diff --git a/docs/guide/styled.zh-CN.md b/docs/guide/styled.zh-CN.md
@@ -68,7 +68,7 @@ StyledButton.defaultProps = {
 
 这也就意味如果想要自定义一个 ThemeContext 作为组件的默认主题，并在 styled 的写法中获取到，就必须要自己实现自己的 styled 方法，但这对于绝大多数组件开发者来说并不现实。
 
-在 [CSS in JS 写法对比](/guide/compare) 这一章节中，我们认为 styled 这个 api 由于设计缺陷，在未来将会没落。所以我们在 antd-style 中也将只提供 styled 的 ThemeProvider 和 useTheme 的兼容使用方案。
+在 [CSS in JS 写法对比](/zh-CN/guide/compare) 这一章节中，我们认为 styled 这个 api 由于设计缺陷，在未来将会没落。所以我们在 antd-style 中也将只提供 styled 的 ThemeProvider 和 useTheme 的兼容使用方案。
 
 ## styled 与 ThemeProvider 集成
 
@@ -88,7 +88,7 @@ render(
 <code src="../demos/guide/styled/StyledComponentsProps"></code>
 <code src="../demos/guide/styled/EmotionStyledProps.tsx"></code>
 
-关于 ThemeProvider 的 styled API 文档，详见: [ThemeProvider - styled 集成配置](/api/theme-provider#styled-集成)
+关于 ThemeProvider 的 styled API 文档，详见: [ThemeProvider - styled 集成配置](/zh-CN/api/theme-provider#styled-集成)
 
 ## 全局统一集成 styled
 

diff --git a/docs/guide/switch-theme.zh-CN.md b/docs/guide/switch-theme.zh-CN.md
@@ -14,7 +14,7 @@ demo:
 
 ## 1. 亮暗色主题切换
 
-通过在容器组件 [ThemeProvider](/usage/theme-provider) 上修改 `appearance` props，即可实现主题切换，这是也是动态主题最简单的使用方式。
+通过在容器组件 [ThemeProvider](/zh-CN/usage/theme-provider) 上修改 `appearance` props，即可实现主题切换，这是也是动态主题最简单的使用方式。
 
 ```tsx | pure
 import { ThemeProvider } from 'antd-style';
@@ -31,10 +31,10 @@ export default () => {
 
 <code src="../demos/guide/switch-theme/default.tsx"></code>
 
-:::warning{title=如果你有使用message等静态方法}
+:::warning{title=如果你有使用 message 等静态方法}
 antd v5 中 message、notification、modal 这三个静态不会响应主题。建议优先使用 hooks 版本的静态方法。
 
-如果你有使用这三个静态方法的诉求，又同时希望能够响应主题，请查看 [静态方法响应主题](/case/static-method)。
+如果你有使用这三个静态方法的诉求，又同时希望能够响应主题，请查看 [静态方法响应主题](/zh-CN/case/static-method)。
 :::
 
 ## 2. 自动响应系统主题
@@ -59,7 +59,7 @@ export default () => {
 
 <code src="../demos/guide/switch-theme/AutoSwitch.tsx"></code>
 
-:::info{title=appearance与themeMode的差别是什么？}
+:::info{title=appearance 与 themeMode 的差别是什么？}
 appearance 描述了应用当前的外观状态， themeMode 则用于描述控制主题模式的逻辑。区分两者有助于实现高级的主题能力。
 
 详见讨论: [#52](https://github.com/ant-design/antd-style/issues/52)
@@ -124,4 +124,4 @@ export default () => (
 
 ## API
 
-与主题切换相关的 API 查阅：[ThemeProvider](/api/theme-provider#themeprovider-api)
+与主题切换相关的 API 查阅：[ThemeProvider](/zh-CN/api/theme-provider#themeprovider-api)
diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
@@ -4,33 +4,33 @@ hero:
   description: 基于 Ant Design V5 Token System 构建的应用级 CSS in JS 解决方案
   actions:
     - text: 立即开始
-      link: /guide
+      link: /zh-CN/guide
     - text: 使用案例
-      link: /case
+      link: /zh-CN/case
 
 features:
   - title: 兼容样式引擎
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*MvKkQqXEyfQAAAAAAAAAAAAADoN6AQ/original
     description: Ant Design Style 可以同时兼容 styled-components、emotion-styled 等多种样式引擎，兼具丰富的写法能力
-    link: /guide/strategy
+    link: /zh-CN/guide/strategy
     imageType: light
     row: 8
 
   - title: 暗色模式一键切换
-    link: /guide/switch-theme
+    link: /zh-CN/guide/switch-theme
     description: 我们基于 antd v5 cssinjs 动态主题配置与暗色主题算法封装了，为应用级场景提供易用的亮暗色主题切换能力，使用方式更加简单。
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*8KE7T7l39J0AAAAAAAAAAAAADoN6AQ/original
     imageType: primary
 
   - title: 主题灵活扩展
     description: Ant Design Style 提供自定义 token 与 自定义 stylish 的功能，当 antd 默认的 token 不能满足样式诉求时，可以灵活扩展出自己的主题体系，并在 CSS in JS 中自由消费。
-    link: /guide/custom-theme
+    link: /zh-CN/guide/custom-theme
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*6sjjRa7lLhAAAAAAAAAAAAAADoN6AQ/original
     imageType: primary
     row: 8
 
   - title: Ant Design Token System
-    link: /guide/switch-theme
+    link: /zh-CN/guide/switch-theme
     description: 默认集成 Ant Design V5 的 Token System，主题定制轻而易举，token 消费灵活易用
     image: https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png
     imageType: light
@@ -39,14 +39,14 @@ features:
 
   - title: 复合样式 —— Stylish
     description: Ant Design Style 提供了复合样式的能力，我们称它为 Stylish。Stylish 可以通过组合多个原子 token 来组织形成复杂的交互样式，实现极高的复用度。<quotient> 感觉很熟悉？没错，它和 tailwindcss 的思想高度一致，但 stylish 将会具有更加明确的设计语义，维护也会更加轻松。</quotient>
-    link: /guide/stylish
+    link: /zh-CN/guide/stylish
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*_in2RLf5pY8AAAAAAAAAAAAADoN6AQ/original
     imageType: primary
     row: 9
 
   - title: less 平滑迁移
     description: 旧项目需要迁移？使用 antd-style 可以将项目中的 less 较低成本地迁移到 CSS in JS，并获得更好的用户体验与开发体验。
-    link: /guide/migrate-from-less
+    link: /zh-CN/guide/migrate-from-less
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original
     imageType: primary
 
@@ -58,7 +58,7 @@ features:
 
   - title: 应用案例
     description: 展示使用 Ant Design Style 的组件、应用的各种案例，帮助开发者快速上手。<quotient> 本文档同样使用 Ant Design Style 构建样式，可以作为静态站点类的参考。</quotient>
-    link: /case
+    link: /zh-CN/case
     image: https://mdn.alipayobjects.com/huamei_rqvucu/afts/img/A*5H2ySLO-X4cAAAAAAAAAAAAADoN6AQ/original
     imageType: soon
     row: 8