mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

site: site optimization (#43007)

Browse Source 
* site: site optimization

* Update practical-projects.zh-CN.md
This commit is contained in:
lijianan 2023-06-14 16:28:38 +08:00 committed by GitHub
parent 02d03ba4ca
commit 4a6c09ca2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 103 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.dumi/theme/builtins/InstallDependencies/index.tsx
View File

@ -22,30 +22,30 @@ const InstallDependencies: React.FC<InstallProps> = (props) => {
key: 'npm',
children: <SourceCode lang="bash">{npm}</SourceCode>,
label: (
<div className="snippet-label">
<span className="snippet-label">
<NpmLogo />
<span>npm</span>
</div>
npm
</span>
),
},
{
key: 'yarn',
children: <SourceCode lang="bash">{yarn}</SourceCode>,
label: (
<div className="snippet-label">
<span className="snippet-label">
<YarnLogo />
<span>yarn</span>
</div>
yarn
</span>
),
},
{
key: 'pnpm',
children: <SourceCode lang="bash">{pnpm}</SourceCode>,
label: (
<div className="snippet-label">
<span className="snippet-label">
<PnpmLogo />
<span>pnpm</span>
</div>
pnpm
</span>
),
},
]}

36
.dumi/theme/builtins/InstallDependencies/npm.tsx
View File

@ -1,17 +1,27 @@
import React from 'react';
const NpmIcon: React.FC = () => (
<svg
fill="#E53E3E"
focusable="false"
height="1em"
stroke="#E53E3E"
strokeWidth="0"
viewBox="0 0 16 16"
width="1em"
>
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
</svg>
);
interface IconProps {
className?: string;
style?: React.CSSProperties;
}
const NpmIcon: React.FC<IconProps> = (props) => {
const { className, style } = props;
return (
<svg
className={className}
style={style}
fill="#E53E3E"
focusable="false"
height="1em"
stroke="#E53E3E"
strokeWidth="0"
viewBox="0 0 16 16"
width="1em"
>
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
</svg>
);
};
export default NpmIcon;

40
.dumi/theme/builtins/InstallDependencies/pnpm.tsx
View File

@ -1,19 +1,29 @@
import React from 'react';
const PnpmIcon: React.FC = () => (
<svg
aria-hidden="true"
fill="#F69220"
focusable="false"
height="1em"
role="img"
stroke="#F69220"
strokeWidth="0"
viewBox="0 0 24 24"
width="1em"
>
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
</svg>
);
interface IconProps {
className?: string;
style?: React.CSSProperties;
}
const PnpmIcon: React.FC<IconProps> = (props) => {
const { className, style } = props;
return (
<svg
className={className}
style={style}
aria-hidden="true"
fill="#F69220"
focusable="false"
height="1em"
role="img"
stroke="#F69220"
strokeWidth="0"
viewBox="0 0 24 24"
width="1em"
>
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
</svg>
);
};
export default PnpmIcon;

38
.dumi/theme/builtins/InstallDependencies/yarn.tsx
View File

@ -1,18 +1,28 @@
import React from 'react';
const YarnIcon: React.FC = () => (
<svg
aria-hidden="true"
fill="#2C8EBB"
focusable="false"
height="1em"
stroke="#2C8EBB"
strokeWidth="0"
viewBox="0 0 496 512"
width="1em"
>
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
</svg>
);
interface IconProps {
className?: string;
style?: React.CSSProperties;
}
const YarnIcon: React.FC<IconProps> = (props) => {
const { className, style } = props;
return (
<svg
className={className}
style={style}
aria-hidden="true"
fill="#2C8EBB"
focusable="false"
height="1em"
stroke="#2C8EBB"
strokeWidth="0"
viewBox="0 0 496 512"
width="1em"
>
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
</svg>
);
};
export default YarnIcon;

16
.dumi/theme/common/styles/Markdown.tsx
View File

@ -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;
}
}
}

26
docs/react/introduce.en-US.md
View File

@ -8,21 +8,9 @@ Following the Ant Design specification, we developed a React UI library `antd` t
<div class="pic-plus">
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
<span>+</span>
<img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
<img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
</div>
<style>
.pic-plus > * {
display: inline-block !important;
vertical-align: middle;
}
.pic-plus span {
margin: 0 20px;
color: #aaa;
font-size: 30px;
}
</style>
---
## ✨ 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
```
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).

24
docs/react/introduce.zh-CN.md
View File

@ -11,18 +11,6 @@ title: Ant Design of React
<img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"/>
</div>
<style>
.pic-plus > * {
display: inline-block !important;
vertical-align: middle;
}
.pic-plus span {
margin: 0 20px;
color: #aaa;
font-size: 30px;
}
</style>
---
## ✨ 特性
@ -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
```
<InstallDependencies npm='$ npm install antd --save' yarn='$ yarn add antd' pnpm='$ pnpm install antd --save'></InstallDependencies>
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。

4
docs/react/practical-projects.zh-CN.md
View File

@ -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() {
<ProLayout
route={clientRoutes[0]}
location={location}
title={'Umi x Ant Design'}
title="Umi x Ant Design"
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || menuItemProps.children) {
return defaultDom;