Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3.4.x - docs translation #11600

Open
wants to merge 14 commits into
base: 3.4.x
Choose a base branch
from
54 changes: 22 additions & 32 deletions docs/docs/assets-image.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
---
translateHelp: true
---
# Using Images

# Use Image
## Using Images in JavaScript


## JS 里使用图片

通过 require 引用相对路径的图片。

比如:
You can reference images with relative paths using `require` in JavaScript. For example:

```js
export default () => <img src={require('./foo.png')} />
```

支持别名,比如通过 `@` 指向 src 目录:
Aliases are also supported, such as using `@` to point to the `src` directory:

```js
export default () => <img src={require('@/foo.png')} />
```

## JS 里使用svg
## Using SVGs in JavaScript

**组件式引入**
**Component-Based Import**

```js
import { ReactComponent as Logo } from './logo.svg'
Expand All @@ -33,7 +26,7 @@ function Analysis() {
}
```

**url式引入**
**URL-Based Import**

```js
import logoSrc from './logo.svg'
Expand All @@ -43,47 +36,44 @@ function Analysis() {
}
```

## Using Images in CSS

## CSS 里使用图片

通过相对路径引用。

比如,
You can reference images with relative paths in CSS. For example:

```css
.logo {
background: url(./foo.png);
}
```

CSS 里也支持别名,但需要在前面加 `~` 前缀,
Aliases are also supported in CSS, but you need to prefix them with `~`. For example:

```css
.logo {
background: url(~@/foo.png);
}
```

注意:
Please note:

1. 这是 webpack 的规则,如果切到其他打包工具,可能会有变化
2. less 中同样适用
1. These rules are specific to Webpack. If you switch to another bundling tool, there may be differences.
2. The same rules apply to Less as well.

## 图片路径问题
## Image Path Considerations

项目中使用图片有两种方式,
There are two ways to use images in your project:

1. 先把图片传到 cdn,然后在 JS CSS 中使用图片的绝对路径
2. 把图片放在项目里,然后在 JS CSS 中通过相对路径的方式使用
1. Upload the images to a CDN and then use absolute paths to reference them in your JS and CSS.
2. Place the images in your project and use relative paths in your JS and CSS.

前者不会有任何问题;后者,如果在 JS 中引用相对路径的图片时,在发布时会根据 publicPath 绝对引入路径,所以就算没有开启 dynamicImport 时,也需要注意 publicPath 的正确性。
The first approach should work without any issues. For the second approach, when referencing images with relative paths in JavaScript, they will be included with absolute paths in the build based on the `publicPath`. So, even if you haven't enabled `dynamicImport`, ensure that the `publicPath` is configured correctly.

## Base64 编译
## Base64 Encoding

通过相对路径引入图片的时候,如果图片小于 10K,会被编译为 Base64,否则会被构建为独立的图片文件。
When importing images with relative paths, images smaller than 10KB will be encoded as Base64. Otherwise, they will be built as separate image files.

10K 这个阈值可以通过 [inlineLimit 配置](../config#inlinelimit)修改。
You can modify the 10KB threshold using the [inlineLimit configuration](../config#inlinelimit).

## 使用 CDN
## Using CDN

TODO
61 changes: 28 additions & 33 deletions docs/docs/cli.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
---
translateHelp: true
---

# Cli Commands

# CLI Commands

## umi build

编译构建 web 产物。通常需要针对部署环境,做特定的配置和环境变量修改。相关详情,请查阅[部署](./deployment)
Compiles and builds web assets. Typically, you need to make specific configurations and environment variable modifications for the deployment environment. For more details, please refer to the [deployment](./deployment) documentation.

```bash
$ umi build
Expand All @@ -21,32 +16,32 @@ Build success.
✨ Done in 9.77s.
```

默认产物输出到项目的 `dist` 文件夹,你可以通过修改配置 `outputPath` 指定产物输出目录。
默认编译时会将 `public` 文件夹内的所有文件,原样拷贝到 `dist` 目录,如果你不需要这个特性,可以通过配置 `chainWebpack` 来删除它。
By default, the build output goes to the `dist` folder in your project. You can specify the output directory by modifying the `outputPath` configuration.

During compilation, all files within the `public` folder are copied as-is to the `dist` directory. If you don't need this feature, you can remove it by configuring `chainWebpack`:

```js
export default {
chainWebpack(memo, { env, webpack }) {
// 删除 umi 内置插件
// Remove the built-in copy plugin
memo.plugins.delete('copy');
}
}
```

> 注意:如果 `public` 里面存在产物同名文件,如 `index.html`,将会导致产物文件被覆盖。
> Note: If there are files with the same name in the `public` folder, like `index.html`, they will overwrite the output files.

## umi dev

启动本地开发服务器进行项目的开发调试
Starts a local development server for debugging and developing your project.

```bash
$ umi dev
```

启动在浏览器中运行的开发服务器,并监视源文件变化,自动热加载。
It launches a development server in your browser, watches for source file changes, and provides hot reloading.

默认使用 `8000` 端口,如果 `8000` 端口被占用,将会使用 `8001` 端口,以此类推。
你可以通过设置环境变量 `PORT` 来指定开发端口号。更多环境变量配置,请查阅[环境变量](/docs/env-variables)。
By default, it uses port `8000`, and if port `8000` is occupied, it will use `8001`, and so on. You can specify the development port by setting the `PORT` environment variable. For more environment variable configurations, please refer to the [environment variables](/docs/env-variables) documentation.

```bash
umi dev
Expand All @@ -62,19 +57,19 @@ Starting the development server...
- Network: http://192.168.50.236:8000
```

开启开发服务还会同时提供一个 Network 的链接,你可以在能访问到你当前运行设备的其他设备中预览页面。
Starting the development server also provides a Network link that allows you to preview the page on other devices that can access the current running device.

> 注意:如果是在开启了VPN,或者虚拟机等复杂的网络环境中,这个地址很可能会错误。你可以通过访问你真实可用 `ip` 的对应端口号来访问开发页面。
> Note: If you are in a complex network environment with VPN or virtual machines, this address may be incorrect. You can access the development page by using the corresponding port number of your real and available IP.

## umi generate

内置的生成器功能,内置的类型有 `page` ,用于生成最简页面。支持别名调用 `umi g`
This command is an embedded generator with the built-in type `page` for generating simple pages. You can also use the alias `umi g`.

```bash
$ umi generate <type> <name> [options]
```

这个命令支持扩展,通过 `api.registerGenerator` 注册,你可以通过插件来实现自己常用的生成器。
This command can be extended by registering generators with `api.registerGenerator`. You can create your own custom generators using plugins.

```ts
import { Generator, IApi } from 'umi';
Expand All @@ -100,17 +95,17 @@ umi generate page pageName --typescript
umi generate page pageName --less
```

更多使用类型和参数,请查阅提供生成器扩展的插件的文档。
For more usage types and options, please refer to the documentation of plugins that provide generator extensions.

## umi plugin

快速查看当前项目使用到的所有的 `umi` 插件。
Quickly view all `umi` plugins used in the current project.

```bash
$ umi plugin <type> [options]
```

当前支持的 `type` `list`,可选参数 `key`
The currently supported `type` is `list`, and it accepts an optional `key` parameter.

```bash
$ umi plugin list
Expand All @@ -136,15 +131,15 @@ Plugins:

## umi help

umi 命令行的简易帮助文档。
Provides a simple help documentation for `umi` commands.

```bash
$ umi help <command>
```

## umi version

查看当前使用的 umi 的版本号,可以使用别名 `-v` 调用。
View the current version of `umi`. You can also use the alias `-v`.

```bash
$ umi version
Expand All @@ -153,22 +148,22 @@ $ umi -v

## umi webpack

查看 umi 使用的 webpack 配置。
View the webpack configuration used by `umi`.

```bash
$ umi webpack [options]
```

参数,
Parameters:

| 可选参数 | 说明 |
| Optional Parameter | Description |
| :- | :-: |
| rules | 查看 webpack.module.rules 配置详情 |
| rule=[name] | 查看 webpack.module.rules 中某个规则的配置详情 |
| plugins | 查看 webpack.plugins 配置详情 |
| plugin=[name] | 查看 webpack.plugins 中某个插件的配置详情 |
| rules | View details of webpack.module.rules configuration |
| rule=[name] | View the configuration details of a specific rule in webpack.module.rules |
| plugins | View details of webpack.plugins configuration |
| plugin=[name] | View the configuration details of a specific plugin in webpack.plugins |

示例,
Examples:

```bash
$ umi webpack
Expand Down Expand Up @@ -239,7 +234,7 @@ MiniCssExtractPlugin {
}
```

默认会打印 development 的配置,如需查看 production 配置,需要指定环境变量:
By default, it prints the development configuration. If you want to view the production configuration, you need to specify the `NODE_ENV` environment variable:

```bash
$ NODE_ENV=production umi webpack
Expand Down
33 changes: 14 additions & 19 deletions docs/docs/contributing.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,33 @@
---
translateHelp: true
---

# Contributing

## Contributing to Umi Core Code

## 贡献 Umi Core 代码

参考 Umi 的 [CONTRIBUTING 文档](https://github.com/umijs/umi/blob/master/CONTRIBUTING.md)。
Please refer to Umi's [CONTRIBUTING documentation](https://github.com/umijs/umi/blob/master/CONTRIBUTING.md).

## 贡献 Umi 官方插件
## Contributing to Official Umi Plugins

参考 Umi Plugins 的 [CONTRIBUTING 文档](https://github.com/umijs/plugins/blob/master/CONTRIBUTING.md)
Please refer to the CONTRIBUTING documentation for Umi Plugins [here](https://github.com/umijs/plugins/blob/master/CONTRIBUTING.md).

## 如何调试 Umi 代码
## How to Debug Umi Code

在 umi 代码中加上 `debugger`,然后执行以下命令(确保先执行过 `yarn build -w` 将源码编译)
To debug Umi code, add `debugger` statements in the Umi codebase and then execute the following commands (make sure to run `yarn build -w` to compile the source code):

```bash
# 调试 umi dev
# Debug umi dev
$ yarn debug examples/normal dev

# 调试 umi build
# Debug umi build
$ yarn debug examples/normal build
```

![image](https://user-images.githubusercontent.com/13595509/82630300-e56b6d80-9c24-11ea-9966-5e9f38889518.png)

**注意**:提交代码前记得将 `debugger` 删除。
**Note**: Remember to remove the `debugger` statements before submitting your code.

## 贡献文档
## Contributing to Documentation

Umi 使用 Umi 本身 + dumi 插件作为文档工具,
Umi uses Umi itself along with the dumi plugin for documentation purposes.

1. 每篇文档左下方有 “在 GitHub 上编辑这篇文档”,你可以通过这里进行文档修改
2. 打开 [Github 上的 docs](https://github.com/umijs/umi/tree/master/docs) 目录,用文件编辑器新建、修改、预览文件,然后提 PR
3. 你还可以 clone [Umi 仓库](https://github.com/umijs/umi),修改 docs 目录下的文件,本地文档调试完成后统一提 PR
1. Each document has an "Edit this document on GitHub" link at the bottom left, which you can use to make document modifications.
2. Open the [docs directory on GitHub](https://github.com/umijs/umi/tree/master/docs), use a file editor to create, modify, and preview files, and then submit a pull request.
3. You can also clone the [Umi repository](https://github.com/umijs/umi), make changes to files in the docs directory, and submit a pull request after completing local documentation debugging.
Loading