Browse Source
site: site optimization (#43007 )
* site: site optimization
* Update practical-projects.zh-CN.md
lijianan
1 year ago
GitHub
GPG Key ID:
8 changed files with
103 additions and
99 deletions
.dumi/theme/builtins/InstallDependencies/index.tsx
.dumi/theme/builtins/InstallDependencies/npm.tsx
.dumi/theme/builtins/InstallDependencies/pnpm.tsx
.dumi/theme/builtins/InstallDependencies/yarn.tsx
.dumi/theme/common/styles/Markdown.tsx
docs/react/introduce.en-US.md
docs/react/introduce.zh-CN.md
docs/react/practical-projects.zh-CN.md
@ -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 >
) ,
} ,
] }
@ -1,7 +1,16 @@
import React from 'react' ;
const NpmIcon : React.FC = ( ) = > (
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"
@ -13,5 +22,6 @@ const NpmIcon: React.FC = () => (
< path d = "M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" / >
< / svg >
) ;
} ;
export default NpmIcon ;
@ -1,7 +1,16 @@
import React from 'react' ;
const PnpmIcon : React.FC = ( ) = > (
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"
@ -15,5 +24,6 @@ const PnpmIcon: React.FC = () => (
< 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 ;
@ -1,7 +1,16 @@
import React from 'react' ;
const YarnIcon : React.FC = ( ) = > (
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"
@ -14,5 +23,6 @@ const YarnIcon: React.FC = () => (
< 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 ;
@ -180,15 +180,25 @@ const GlobalStyle: React.FC = () => {
line - height : 2 ;
}
}
. pic - plus {
& > * {
display : inline - block ! important ;
vertical - align : middle ;
}
span {
margin : 0 20 px ;
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 ;
}
}
}
@ -11,18 +11,6 @@ Following the Ant Design specification, we developed a React UI library `antd` t
< 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
**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.
### Using npm or yarn or pnpm
```bash
$ npm install antd
```
**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
$ 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 ).
@ -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 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
### 使用 npm 或 yarn 或 pnpm 安装
```bash
$ npm install antd --save
```
**我们推荐使用 [npm ](https://www.npmjs.com/ ) 或 [yarn ](https://github.com/yarnpkg/yarn/ ) 或 [pnpm ](https://pnpm.io/zh/ ) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
```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 )。
@ -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;
lijianan
1 year ago
GitHub