add chinese doc

docs-src/0.5/zh/CLI/configure.md

@@ -0,0 +1,186 @@
+# 配置项目
+
+本章将教你如何使用 `Dioxus.toml` 文件配置 CLI。这里有一个 [示例](#config-example)，其中有注释来描述每个键。你可以复制它，或者查看本文档以获取更完整的学习体验。
+
+"🔒" 表示必填项。一些标题是必填的，但它们内部的键不是。在这种情况下，你只需要包含标题，但不需要包含键。这可能看起来有点奇怪，但是很正常。
+
+## 结构
+
+每个标题下面直接是其 TOML 表单。
+
+### 应用程序 🔒
+
+```toml
+[application]
+```
+
+应用程序范围的配置。适用于 Web 和桌面应用。
+
+* **name** 🔒 - 项目名称和标题。
+  ```toml
+  name = "my_project"
+  ```
+* **default_platform** 🔒 - 此项目的目标平台
+  ```toml
+    # 当前支持的平台：web，desktop
+    default_platform = "web"
+  ```
+* **out_dir** - 将 `dx build` 或 `dx serve` 的构建结果输出的目录。这也是 `assets` 目录将被复制到的位置。
+  ```toml
+  out_dir = "dist"
+  ```
+* **asset_dir** - 包含静态资产的目录。CLI 将在构建/服务之后自动将这些资产复制到 **out_dir** 中。
+  ```toml
+  asset_dir = "public"
+  ```
+- **sub_package** - 默认情况下要构建的工作区中的子包。
+  ```toml
+  sub_package = "my-crate"
+  ```
+
+### Web.App 🔒
+
+```toml
+[web.app]
+```
+
+Web 特定的配置。
+
+* **title** - 网页标题。
+  ```toml
+  # HTML 标题标签内容
+  title = "project_name"
+  ```
+* **base_path** - 为应用程序构建的基本路径。当在域名的子目录下服务应用程序时，这可能很有用。例如，在构建要在 GitHub Pages 上提供服务的站点时。
+  ```toml
+  # 应用程序将在 domain.com/my_application/ 处提供服务，因此我们需要将 base_path 修改为应用程序将被服务的路径
+  base_path = "my_application"
+  ```
+
+### Web.Watcher 🔒
+
+```toml
+[web.watcher]
+```
+
+开发服务器配置。
+
+* **reload_html** - 如果为 true，则每次重新构建应用程序时 CLI 将重新构建 index.html 文件
+  ```toml
+  reload_html = true
+  ```
+* **watch_path** - 要监视更改的文件和目录
+  ```toml
+  watch_path = ["src", "public"]
+  ```
+
+* **index_on_404** - 如果启用，当找不到路由时 Dioxus 将提供根页面。
+  *当服务使用路由器的应用程序时需要此选项*。但是，当使用非 Dioxus 的东西（例如 GitHub Pages）提供应用程序时，你需要检查如何在该平台上配置它。在 GitHub Pages 上，你可以将名为 `404.html` 的 `index.html` 的副本放在同一个目录中。
+  ```toml
+  index_on_404 = true
+  ```
+
+### Web.Resource 🔒
+
+```toml
+[web.resource]
+```
+
+静态资源配置。
+
+* **style** - 要包含在应用程序中的 CSS 文件。
+  ```toml
+  style = [
+  # 从 public_dir 包含。
+  "./assets/style.css",
+  # 或来自在线 CDN 的资产。
+  "https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.css"
+  ]
+  ```
+
+* **script** - 要包含在应用程序中的 JavaScript 文件。
+  ```toml
+  script = [
+  # 从 asset_dir 包含。
+  "./public/index.js",
+  # 或来自在线 CDN。
+  "https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.js"
+  ]
+  ```
+
+### Web.Resource.Dev 🔒
+
+```toml
+[web.resource.dev]
+```
+
+这与 [`[web.resource]`](#webresource-) 相同，但仅在开发服务器中有效。例如，如果你想在 `dx serve` 服务器中包含一个文件，但不在 `dx serve --release` 服务器中包含，那么将它放在这里。
+
+### Web.Proxy
+
+```toml
+[[web.proxy]]
+```
+
+与开发过程中应用程序需要的任何代理相关的配置。代理将请求转发到一个新的服务。
+
+* **backend** - 要代理的服务器的 URL。CLI 将把任何位于后端相对路径下的请求转发到后端，而不是返回 404
+  ```toml
+  backend = "http://localhost:8000/api/"
+  ```
+  这将导致任何发送到具有前缀 /api/ 的开发服务器的请求被重定向到本地主机的后端服务器 http://localhost:8000。路径和查询参数将原样传递（目前不支持路径重写）。
+
+## 配置示例
+
+这包括所有字段，无论是否必需。
+
+```toml
+[application]
+
+# 应用程序名称
+name = "project_name"
+
+# 默认的 Dioxus 平台
+default_platform = "web"
+
+# `build` & `serve` 输出路径
+out_dir = "dist"
+
+# 静态资源路径
+asset_dir = "public"
+
+[web.app]
+
+# HTML 标题标签内容
+title = "project_name"
+
+[web.watcher]
+
+# 当监视器触发时，重新生成 `index.html`
+reload_html = true
+
+# 将监视的文件或目录
+watch_path = ["src", "public"]
+
+# 包含样式或脚本资产
+[web.resource]
+
+# CSS 样式文件
+style = []
+
+# JavaScript 代码文件
+script = []
+
+[web.resource.dev]
+
+# 与 [web.resource] 相同，但用于开发服务器
+
+# CSS 样式文件
+style = []
+
+# JavaScript 文件
+script = []
+
+[[web.proxy]]
+backend = "http://localhost:8000/api/"
+```

docs-src/0.5/zh/CLI/creating.md

@@ -0,0 +1,24 @@
+# 创建项目
+
+安装了 Dioxus CLI 之后，你可以使用它来创建自己的项目！
+
+## 初始化项目
+
+首先，运行 `dx new` 命令来创建一个新项目。
+
+> 它会克隆这个 [模板](https://github.com/DioxusLabs/dioxus-template)，该模板用于创建 dioxus 应用程序。
+>
+> 你可以通过传递 `template` 参数从不同的模板创建项目：
+> ```
+> dx new --template gh:dioxuslabs/dioxus-template
+> ```
+
+接下来，使用 `cd project-name` 导航到你的新项目中，或者直接在 IDE 中打开它。
+
+> 在运行项目之前，请确保已安装 WASM 目标。
+> 你可以使用 rustup 安装 rust 的 WASM 目标：
+> ```
+> rustup target add wasm32-unknown-unknown
+> ```
+
+最后，使用 `dx serve` 来服务你的项目！CLI 将告诉你它正在哪个地址上提供服务，以及其他信息，如代码警告。

docs-src/0.5/zh/CLI/index.md

@@ -0,0 +1,13 @@
+# 介绍
+
+✨ **Dioxus CLI** ✨ 是一个帮助你快速启动 Dioxus 项目的工具。
+
+这里没有命令的文档，但是一旦你安装了 CLI，你可以使用 `dx --help` 查看所有命令！此外，你可以运行 `dx <command> --help` 来获取特定命令的帮助。
+
+## 特性
+
+* 构建和打包 Dioxus 项目。
+* 格式化 `rsx` 代码。
+* 热加载。
+* 从模板仓库创建一个 Dioxus 项目。
+* 等等!

docs-src/0.5/zh/CLI/translate.md

@@ -0,0 +1,105 @@
+# 翻译现有的 HTML
+
+Dioxus 使用一种称为 RSX 的自定义格式来表示 HTML，因为它更简洁，看起来更像 Rust 代码。然而，将现有的 HTML 转换为 RSX 可能有点麻烦。这就是为什么 Dioxus 提供了一个名为 `dx translate` 的工具，它可以自动将 HTML 转换为 RSX！
+
+Dx translate 可以使将大块的 HTML 转换为 RSX 变得更加容易！让我们尝试翻译一些来自 Dioxus 主页的 HTML：
+
+```sh
+dx translate --raw  "<div class=\"relative w-full mx-4 sm:mx-auto text-gray-600\"><div class=\"text-[3em] md:text-[5em] font-semibold dark:text-white text-ghdarkmetal font-sans py-12 flex flex-col\"><span>Fullstack, crossplatform,</span><span>lightning fast, fully typed.</span></div><h3 class=\"text-[2em] dark:text-white font-extralight text-ghdarkmetal pt-4 max-w-screen-md mx-auto\">Dioxus is a Rust library for building apps that run on desktop, web, mobile, and more.</h3><div class=\"pt-12 text-white text-[1.2em] font-sans font-bold flex flex-row justify-center space-x-4\"><a href=\"/learn/0.5/getting_started\" dioxus-prevent-default=\"onclick\" class=\"bg-red-600 py-2 px-8 hover:-translate-y-2 transition-transform duration-300\" data-dioxus-id=\"216\">Quickstart</a><a href=\"/learn/0.5/reference\" dioxus-prevent-default=\"onclick\" class=\"bg-blue-500 py-2 px-8 hover:-translate-y-2 transition-transform duration-300\" data-dioxus-id=\"214\">Read the docs</a></div><div class=\"max-w-screen-2xl mx-auto pt-36\"><h1 class=\"text-md\">Trusted by top companies</h1><div class=\"pt-4 flex flex-row flex-wrap justify-center\"><div class=\"h-12 w-40 bg-black p-2 m-4 flex justify-center items-center\"><img src=\"static/futurewei_bw.png\"></div><div class=\"h-12 w-40 bg-black p-2 m-4 flex justify-center items-center\"><img src=\"static/airbuslogo.svg\"></div><div class=\"h-12 w-40 bg-black p-2 m-4 flex justify-center items-center\"><img src=\"static/ESA_logo.svg\"></div><div class=\"h-12 w-40 bg-black p-2 m-4 flex justify-center items-center\"><img src=\"static/yclogo.svg\"></div><div class=\"h-12 w-40 bg-black p-2 m-4 flex justify-center items-center\"><img src=\"static/satellite.webp\"></div></div></div></div>"
+```
+
+我们得到以下的 RSX，你可以轻松地复制并粘贴到你的代码中：
+
+```rs
+div { class: "relative w-full mx-4 sm:mx-auto text-gray-600",
+div { class: "text-[3em] md:text-[5em] font-semibold dark:text-white text-ghdarkmetal font-sans py-12 flex flex-col",
+span { "Fullstack, crossplatform," }
+span { "lightning fast, fully typed." }
+}
+h3 { class: "text-[2em] dark:text-white font-extralight text-ghdarkmetal pt-4 max-w-screen-md mx-auto",
+"Dioxus is a Rust library for building apps that run on desktop, web, mobile, and more."
+}
+div { class: "pt-12 text-white text-[1.2em] font-sans font-bold flex flex-row justify-center space-x-4",
+a {
+href: "/learn/0.5/getting_started",
+data_dioxus_id: "216",
+dioxus_prevent_default: "onclick",
+class: "bg-red-600 py-2 px-8 hover:-translate-y-2 transition-transform duration-300",
+"Quickstart"
+}
+a {
+dioxus_prevent_default: "onclick",
+href: "/learn/0.5/reference",
+data_dioxus_id: "214",
+class: "bg-blue-500 py-2 px-8 hover:-translate-y-2 transition-transform duration-300",
+"Read the docs"
+}
+}
+div { class: "max-w-screen-2xl mx-auto pt-36",
+h1 { class: "text-md", "Trusted by top companies" }
+div { class: "pt-4 flex flex-row flex-wrap justify-center",
+div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
+img { src: "static/futurewei_bw.png" }
+}
+div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
+img { src: "static/airbuslogo.svg" }
+}
+div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
+img { src: "static/ESA_logo.svg" }
+}
+div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
+img { src: "static/yclogo.svg" }
+}
+div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
+img { src: "static/satellite.webp" }
+}
+}
+}
+}
+```
+
+## 使用方法
+
+`dx translate` 命令有几个标志，你可以使用它们来控制你的 HTML 输入和 RSX 输出。
+
+你可以使用 `--file` 标志将 HTML 文件翻译为 RSX：
+
+```sh
+dx translate --file index.html
+```
+
+或者你可以使用 `--raw` 标志将一串 HTML 转换为 RSX：
+
+```sh
+dx translate --raw "<div>Hello world</div>"
+```
+
+这两个命令将输出以下 RSX：
+
+```rs
+div { "Hello world" }
+```
+
+`dx translate` 命令将 RSX 输出到 stdout。你可以使用 `--output` 标志将 RSX 写入文件。
+
+```sh
+dx translate --raw "<div>Hello world</div>" --output index.rs
+```
+
+你可以使用 `--component` 标志自动创建一个组件。
+
+```sh
+dx translate --raw "<div>Hello world</div>" --component
+```
+
+这将输出以下组件：
+
+```rs
+fn component() -> Element {
+rsx! {
+div { "Hello world" }
+}
+}
+```
+
+要了解更多 `dx translate` 支持的不同标志，请运行 `dx translate --help`。

docs-src/0.5/zh/contributing/governance.md

@@ -0,0 +1 @@
+

docs-src/0.5/zh/contributing/guiding_principles.md

@@ -0,0 +1,37 @@
+# 总体目标
+
+本文档概述了 Dioxus 的一些总体目标。这些目标并不是一成不变的，但它们代表了项目的一般指导方针。
+
+Dioxus 的目标是让构建**可扩展的跨平台应用程序**变得容易。
+
+## 跨平台
+
+Dioxus 默认设计为跨平台。这意味着应该可以轻松构建在 Web、桌面和移动设备上运行的应用程序。但是，Dioxus 也应该足够灵活，允许用户在需要时选择平台特定的功能。`use_eval` 就是其中的一个例子。默认情况下，Dioxus 不假设平台支持 JavaScript，但它提供了一个钩子，允许用户在需要时选择 JavaScript。
+
+## 性能
+
+随着 Dioxus 应用程序的增长，它们应该保持相对高效，而无需进行手动优化。会有需要手动优化的情况，但是 Dioxus 应该尽量使这些情况变得尽可能少见。
+
+Dioxus 核心架构的一个好处是，即使组件经常重新渲染，它也能提供合理的性能。它基于虚拟 DOM，执行差异比较，即使组件树的大部分内容被重新运行，也应该防止不必要的重新渲染。此外，Dioxus 将 RSX 树的静态部分分组在一起，以完全跳过差异比较。
+
+## 类型安全
+
+随着团队的壮大，Rust 的类型安全性是一个巨大的优势。Dioxus 应该利用这个优势，使得使用大型团队构建应用程序变得容易。
+
+为了充分利用 Rust 的类型系统，Dioxus 应尽可能避免公开 `Any` 类型和字符串类型的 API。
+
+## 开发者体验
+
+Dioxus 应该易于学习且使用起来舒适。
+
+- Dioxus 的 API 在可能的情况下尽量保持与 React API 的接近。这使得如果他们已经了解 React，学习 Dioxus 就更容易。
+
+- 我们可以通过提供多层次的 API 来避免简单和灵活性之间的权衡：一个是用于非常常见的用例，一个是用于低级控制
+
+  - Hooks：hooks crate 包含了最常见的用例，但 `use_hook` 提供了一种访问底层持久值的方式，如果需要的话。
+  - 平台配置中的建造者模式：建造者模式用于默认使用最常见的用例，但用户可以根据需要更改默认值。
+
+- 文档：
+  - 所有公共 API 应该有 Rust 文档
+  - 所有公共功能都应提供示例。这些示例既作为文档又作为测试。CI 会检查它们是否继续编译
+  - 最常见的工作流程应该在指南中进行说明