From 4a6c09ca2a5b2f62f020699f7f03f5e7fa1e2e2d Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 14 Jun 2023 16:28:38 +0800 Subject: [PATCH] site: site optimization (#43007) * site: site optimization * Update practical-projects.zh-CN.md --- .../builtins/InstallDependencies/index.tsx | 18 ++++----- .../builtins/InstallDependencies/npm.tsx | 36 +++++++++++------ .../builtins/InstallDependencies/pnpm.tsx | 40 ++++++++++++------- .../builtins/InstallDependencies/yarn.tsx | 38 +++++++++++------- .dumi/theme/common/styles/Markdown.tsx | 16 ++++++-- docs/react/introduce.en-US.md | 26 ++---------- docs/react/introduce.zh-CN.md | 24 ++--------- docs/react/practical-projects.zh-CN.md | 4 +- 8 files changed, 103 insertions(+), 99 deletions(-) diff --git a/.dumi/theme/builtins/InstallDependencies/index.tsx b/.dumi/theme/builtins/InstallDependencies/index.tsx index 56a0ae043a..5cfa9d42fb 100644 --- a/.dumi/theme/builtins/InstallDependencies/index.tsx +++ b/.dumi/theme/builtins/InstallDependencies/index.tsx @@ -22,30 +22,30 @@ const InstallDependencies: React.FC = (props) => { key: 'npm', children: {npm}, label: ( -
+ - npm -
+ npm + ), }, { key: 'yarn', children: {yarn}, label: ( -
+ - yarn -
+ yarn + ), }, { key: 'pnpm', children: {pnpm}, label: ( -
+ - pnpm -
+ pnpm + ), }, ]} diff --git a/.dumi/theme/builtins/InstallDependencies/npm.tsx b/.dumi/theme/builtins/InstallDependencies/npm.tsx index e8f9ce55ee..ffd6755688 100644 --- a/.dumi/theme/builtins/InstallDependencies/npm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/npm.tsx @@ -1,17 +1,27 @@ import React from 'react'; -const NpmIcon: React.FC = () => ( - - - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const NpmIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + + + ); +}; export default NpmIcon; diff --git a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx index 62d1620937..1be5a1ce3a 100644 --- a/.dumi/theme/builtins/InstallDependencies/pnpm.tsx +++ b/.dumi/theme/builtins/InstallDependencies/pnpm.tsx @@ -1,19 +1,29 @@ import React from 'react'; -const PnpmIcon: React.FC = () => ( - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const PnpmIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + ); +}; export default PnpmIcon; diff --git a/.dumi/theme/builtins/InstallDependencies/yarn.tsx b/.dumi/theme/builtins/InstallDependencies/yarn.tsx index 95eec5ea8d..c79ac4eee7 100644 --- a/.dumi/theme/builtins/InstallDependencies/yarn.tsx +++ b/.dumi/theme/builtins/InstallDependencies/yarn.tsx @@ -1,18 +1,28 @@ import React from 'react'; -const YarnIcon: React.FC = () => ( - -); +interface IconProps { + className?: string; + style?: React.CSSProperties; +} + +const YarnIcon: React.FC = (props) => { + const { className, style } = props; + return ( + + ); +}; export default YarnIcon; diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 03cfb0e4ff..efe65e2f57 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -180,15 +180,25 @@ const GlobalStyle: React.FC = () => { line-height: 2; } } - + .pic-plus { + & > * { + display: inline-block !important; + vertical-align: middle; + } + span { + margin: 0 20px; + color: #aaa; + font-size: 30px; + } + } .antd-site-snippet { .ant-tabs-tab { .snippet-label { display: flex; align-items: center; justify-content: center; - span { - margin-inline-start: 8px; + svg { + margin-inline-end: 8px; } } } diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index 7e87404d26..d7cd0b3dc9 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -8,21 +8,9 @@ Following the Ant Design specification, we developed a React UI library `antd` t
+ - +
- - --- ## ✨ Features @@ -56,17 +44,11 @@ You can subscribe to this feed for new version notifications: https://github.com ## Installation -### Using npm or yarn +### Using npm or yarn or pnpm -**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. +**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. -```bash -$ npm install antd -``` - -```bash -$ yarn add antd -``` + If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index 13632da76b..a206276d3a 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -11,18 +11,6 @@ title: Ant Design of React - - --- ## ✨ 特性 @@ -56,17 +44,11 @@ title: Ant Design of React ## 安装 -### 使用 npm 或 yarn 安装 +### 使用 npm 或 yarn 或 pnpm 安装 -**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 +**我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 -```bash -$ npm install antd --save -``` - -```bash -$ yarn add antd -``` + 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 3b2914be43..df02ae4b7d 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -11,7 +11,7 @@ Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架 ## 初始化项目 -推荐使用 [pnpm](https://pnpm.io/) 创建 Umi 脚手架，执行以下命令。 +推荐使用 [pnpm](https://pnpm.io/zh/) 创建 Umi 脚手架，执行以下命令。 ```bash $ mkdir myapp && cd myapp @@ -298,7 +298,7 @@ export default function Layout() { { if (menuItemProps.isUrl || menuItemProps.children) { return defaultDom;