Merge pull request #815 from AvaloniaUI/luke-get-started-zh-translations

Luke get started zh translations

Author: luke-whos-here

docs/get-started/starter-tutorial/adding-a-control.mdx

@@ -7,7 +7,6 @@ description: How to add a button to your temperature converter app. Part 2 of 7
 import CalculateButtonLeft from '/img/get-started/calculate-button-left.png';
 import CalculateButtonCenter from '/img/get-started/calculate-button-center.png';
 
-
 # Adding a control
 
 The first step for our temperature converter app is to add a **control**. By “controls”, we mean UI elements that allow interaction with your app. Some examples of controls are buttons, sliders, checkboxes or menus.
@@ -58,4 +57,4 @@ Your **Calculate** button is currently aligned against the left edge of the wind
 
 <Image light={CalculateButtonCenter} alt="A screenshot of an app running in a window, with the button aligned center." maxWidth={400} cornerRadius="true" margin="0,0,30,0"/>
 
-On the next page of this tutorial, you will learn how to add multiple elements to your app using layout controls.
+On the next page of this tutorial, you will learn how to add multiple elements to your app using layout controls.

docs/get-started/starter-tutorial/adding-some-layout.mdx

@@ -52,7 +52,6 @@ We can use the `StackPanel` layout control to place some text above the button.
 
 <Image light={TemperatureConverterTextOnly} alt="A screenshot showing a work-in-progress app, with text above a button." position="center" maxWidth={400} cornerRadius="true" margin="0,0,30,0"/>
 
-
 4. Enclose the `TextBlock` with a `<Border>...</Border>` tag. Set the attributes of the `Border` as follows:
 
 - `Margin="5"`
@@ -113,7 +112,6 @@ We have specified some attributes for the `Grid`:
 
 <Image light={TemperatureConverterEmptyGrid} alt="A screenshot showing a work-in-progress app, with a title, a dotted line, and a button." position="center" maxWidth={400} cornerRadius="true"/>
 
-
 ## Inserting controls in the grid
 
 1. Insert `TextBlock` controls in the left cells of the grid, using the `Grid.Row` and `Grid.Column` attributes to assign the target cells. Use these text blocks to fill the cells with the text “Celsius” and “Fahrenheit”.
@@ -146,8 +144,6 @@ The first cell in a row or column of a `Grid` is numbered 0.
 
 3. Run the app or check the previewer. You should see your text and input boxes added to the window, within the cells marked by the gridlines.
 
-
 <Image light={TemperatureConverterFilledGrid} alt="A screenshot showing a work-in-progress app, with a title, input boxes in a grid, and a button." position="center" maxWidth={400} cornerRadius="true" margin="10,0,30,0"/>
 
-
 On the next page of this tutorial, you will learn how to adjust the size of the app window.

docs/get-started/starter-tutorial/customizing-the-avalonia-window.mdx

@@ -89,4 +89,4 @@ Height="450">
 Most mobile platforms actually ignore window sizes and automatically resize windows to fit the screen. When developing, you won’t literally need to set a separate size for each target platform.
 :::
 
-On the next page of this tutorial, you will learn how to create event handling so that the button responds to clicks.
+On the next page of this tutorial, you will learn how to create event handling so that the button responds to clicks.

docs/get-started/starter-tutorial/establishing-events-and-responses.mdx

@@ -78,7 +78,6 @@ To verify we’ve created the event handler correctly, we can check the debug ou
 
     <Image light={RiderRunDebugMode} alt="A screenshot showing the location of the button to run a project in debug mode in Rider." position="center" maxWidth={400} cornerRadius="true"/>
 
-
 	2. Open the **Debug Output** tab in the bottom panel.
     3. In the running app window, click the **Calculate** button a few times.
     4. You should see “Click!” being printed in the debug output in Rider.

docs/get-started/starter-tutorial/exercises.mdx

@@ -92,13 +92,14 @@ Make **GetStartedApp** calculate the temperature conversion as the user types.
 	```xml
 	<TextBox Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0" TextChanged="Celsius_TextChanged" Name="Celsius"/>
 	```
+
 	2. In **MainWindow.axaml**, delete the entire line starting `<Button>`. It is no longer needed.
 
     ~~`<Button HorizontalAlignment="Center" Click="Button_OnClick">Calculate</Button>`~~
 
     3. In **MainWindow.axaml.cs**, locate the event handler line starting `private void`. Change the event name from `Button_OnClick` to whatever you named it in the XAML file, e.g. `Celsius_TextChanged`.
 
-    ```xml
+    ```csharp
     private void Celsius_TextChanged(object? sender, RoutedEventArgs e)
     ```
 

docs/get-started/starter-tutorial/index.mdx

@@ -38,4 +38,4 @@ In the **Views** folder of your project directory, open the file **MainWindow.ax
 
 Nearly everything in **MainWindow.axaml** goes between the `<Window>...</Window>` XAML tag. This tag represents the Avalonia window, where your app will run on the target platform. We’ll look at Avalonia windows in more detail later, when we get to [customizing the Avalonia window](/docs/get-started/starter-tutorial/customizing-the-avalonia-window).
 
-Proceed to the next page of this tutorial to learn how to add a button to the app.
+Proceed to the next page of this tutorial to learn how to add a button to the app.

docs/get-started/xaml-previewers.mdx

@@ -18,7 +18,7 @@ If you are new to developing with IDEs, here's how to enable the XAML previewer
 
 <Tabs groupId="ide">  
   <TabItem value="rider" label="Rider">
-	1. In Rider, select a **.axaml** file from the top ribbon.
+	  1. In Rider, select a **.axaml** file from the top ribbon.
     2. On the right side of the top ribbon, click **Editor and Preview**.
     3. Build your project.
 
@@ -52,4 +52,4 @@ If you are new to developing with IDEs, here's how to enable the XAML previewer
 
 :::tip
 If the previewer is unresponsive to your changes, try building the project again.
-:::
+:::

i18n/zh-Hans/docusaurus-plugin-content-docs/current/get-started/index.mdx

@@ -0,0 +1,247 @@
+---
+id: index
+title: 入门指南
+description: 开始使用 Avalonia。安装 Avalonia 及其先决条件，然后使用 Avalonia 模板启动您的第一个项目。
+---
+import DownloadAvaloniaRider from '/img/get-started/download-rider-avaloniarider.png';
+import DownloadAvaloniaExtensionForVS from '/img/get-started/download-vs-avalonia-extension.png';
+import WelcomeToAvalonia from '/img/get-started/welcome-to-avalonia.png';
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+# 入门指南
+
+让我们开始使用 Avalonia。本指南将带您完成安装 Avalonia 并在集成开发环境 (IDE) 中启动第一个项目的过程。
+
+## 先决条件
+
+您必须已安装：
+
+- .NET（8.0 或更高版本，截至 2025 年 10 月）
+- 您选择的 IDE（我们推荐 JetBrains Rider 或 Visual Studio）
+
+### 安装 .NET
+
+从 [.NET 官网](https://dotnet.microsoft.com/en-us/download/dotnet)下载，然后按照安装说明进行操作。
+
+### 选择 IDE
+
+Avalonia 在 Visual Studio 或 JetBrains Rider 中效果最佳。
+
+Visual Studio Code 也受支持，但由于功能较为有限，我们不推荐使用。
+
+<Tabs groupId="ide">  
+  <TabItem value="rider" label="Rider">
+	如果您使用 macOS 或 Linux，我们推荐使用 [JetBrains Rider](https://www.jetbrains.com/rider/)。JetBrains Rider 在这些操作系统上提供完整、成熟的开发体验，包括对 XAML 的内置支持。
+
+	建议安装第三方插件 [AvaloniaRider](https://plugins.jetbrains.com/plugin/14839-avaloniarider)，该插件可在您工作时实时预览 XAML。
+
+	安装 AvaloniaRider：
+
+	1. 在 JetBrains Rider 中，转到**设置 → 插件**。
+	2. 转到**市场**选项卡。
+	3. 在搜索栏中输入"AvaloniaRider"。
+	4. 点击**安装**。
+	5. 按照任何其他安装说明进行操作。您可能需要关闭并重新打开 JetBrains Rider 以完成安装。
+
+	<div className="center" style={{maxWidth:400}}>
+	<img className="center" src={DownloadAvaloniaRider} alt="显示如何在 Rider 中下载 AvaloniaRider 扩展的屏幕截图。" />
+	</div>
+
+	有关使用 XAML 预览器的更多信息，请参阅 [XAML 预览器](/docs/get-started/xaml-previewers)页面。
+  </TabItem>
+  <TabItem value="vs" label="Visual Studio">
+  如果您在 Windows 上工作，可以使用 [Visual Studio](https://visualstudio.microsoft.com/) 及其 Avalonia for Visual Studio 扩展。
+
+  安装 Avalonia for Visual Studio：
+
+  1. 在 Visual Studio 中，转到**扩展 → 管理扩展**。
+  2. 在搜索栏中输入"Avalonia"。
+  3. 点击**安装**。
+  4. 按照任何其他安装说明进行操作。您可能需要关闭并重新打开 Visual Studio 以完成安装。
+
+	<div className="center" style={{maxWidth:400}}>
+	<img className="center" src={DownloadAvaloniaExtensionForVS} alt="显示如何在 Visual Studio 中下载 Avalonia 扩展的屏幕截图。" />
+	</div>
+  
+  或者，您可以[从 Visual Studio Marketplace 下载该扩展](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS)。
+
+  :::note
+  如果您使用的是较旧版本的 Visual Studio，可能需要从 Marketplace 下载较旧版本的扩展，例如 [2019 版本](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaforVisualStudio)。
+  :::
+
+  有关使用 XAML 预览器的更多信息，请参阅 [XAML 预览器](/docs/get-started/xaml-previewers)页面。
+  </TabItem>
+  <TabItem value="vsc" label="Visual Studio Code">
+  如果您更喜欢使用 [Visual Studio Code](https://code.visualstudio.com/)，Avalonia for VSCode 扩展提供基本功能，如自动完成和预览器。您可以[从 Visual Studio Code Marketplace 下载该扩展](https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.vscode-avalonia)。
+
+  由于支持有限，我们不推荐使用 Visual Studio Code。
+  </TabItem>
+</Tabs>
+
+## 安装 Avalonia 模板
+
+根据您使用的 IDE，您可能已经安装了 [Avalonia 模板](https://github.com/AvaloniaUI/avalonia-dotnet-templates)。使用 Avalonia for Visual Studio 扩展的 Visual Studio 就是这种情况。
+
+您可以运行此命令来检查有哪些可用的 .NET 模板：
+
+```
+dotnet new list
+```
+
+在其他 .NET 模板中查找这些 Avalonia 模板：
+
+```
+Template Name                                 Short Name                  Language    Tags
+--------------------------------------------  --------------------------  ----------  ---------------------------------------------------------
+Avalonia .NET App                             avalonia.app                [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia .NET MVVM App                        avalonia.mvvm               [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Cross Platform Application           avalonia.xplat              [C#],F#     Desktop/Xaml/Avalonia/Browser/Mobile
+```
+
+如果您在列表中没有看到这些模板，可以运行此命令来安装它们：
+
+```
+dotnet new install Avalonia.Templates
+```
+
+检查输出。您应该会看到这些模板已安装：
+
+```
+Template Name                                 Short Name                  Language    Tags
+--------------------------------------------  --------------------------  ----------  ---------------------------------------------------------
+Avalonia .NET App                             avalonia.app                [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia .NET MVVM App                        avalonia.app                [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Cross Platform Application           avalonia.xplat              [C#],F#     Desktop/Xaml/Avalonia/Web/Mobile
+Avalonia Resource Dictionary                  avalonia.resource                       Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Styles                               avalonia.styles                         Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia TemplatedControl                     avalonia.templatedcontrol   [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia UserControl                          avalonia.usercontrol        [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+Avalonia Window                               avalonia.window             [C#],F#     Desktop/Xaml/Avalonia/Windows/Linux/macOS
+```
+
+### 安装故障排除
+
+#### .NET 不是已识别的程序
+
+首先，确保已安装 .NET SDK。运行此命令：
+
+```
+dotnet --list-sdks
+```
+
+如果正确安装了 .NET SDK，将返回类似以下的输出：
+
+```
+8.0.202 [C:\Program Files\dotnet\sdk]
+```
+
+如果终端继续报告缺少 .NET，请尝试重新启动终端。
+
+#### 找不到 `Avalonia.Templates` 包
+
+确保 NuGet 已正确设置。运行此命令：
+
+```
+dotnet nuget list source
+```
+
+检查输出是否显示以下内容作为已注册的源：
+
+```
+nuget.org [Enabled]
+https://api.nuget.org/v3/index.json
+```
+
+如果未列出此源，请使用此命令添加它：
+
+```
+dotnet nuget add source https://api.nuget.org/v3/index.json -n nuget.org
+```
+
+如果即使 NuGet 已列为已注册源，包安装仍然失败，请检查您的网络连接或防火墙设置。
+
+## 创建您的第一个项目
+
+您的第一个项目将使用 MVVM 模板。
+
+<Tabs groupId="ide">  
+  <TabItem value="rider" label="Rider">
+	1. 在 Rider 启动屏幕上，选择**新建解决方案**。
+  2. 在侧边栏中，向下滚动到"自定义模板"。选择 **Avalonia .NET MVVM App**。
+  3. 将您的解决方案命名为"GetStartedApp"。
+  4. 点击**创建**。
+  </TabItem>
+  <TabItem value="vs" label="Visual Studio">
+  1. 在 Visual Studio 中，点击**文件 → 新建 → 项目/解决方案**。
+  2. 在搜索框中输入"Avalonia"。
+  3. 从搜索结果中选择 **Avalonia .NET MVVM App**。如果 Visual Studio 提供多个选项，请选择 **C#** 的选项。然后点击**下一步**。
+  4. 将您的项目命名为"GetStartedApp"。
+  5. 如果需要，更改目标目录。然后点击**下一步**。
+  6. 选择您首选的 **.NET** 版本作为框架。
+  7. 如果有选择目标平台的选项，选择**桌面**。
+  8. 点击**创建**。
+  </TabItem>
+  <TabItem value="vsc" label="Visual Studio Code">
+  1. 在 Visual Studio Code 中，调出命令面板。在 Windows 上为 Ctrl + Shift + P，在 macOS 上为 Cmd + Shift + P。
+  2. 在搜索中输入".NET"。
+  3. 从搜索结果中选择 **.NET: New Project...**
+  4. 从项目模板列表中选择 **Avalonia MVVM App**。
+  5. 为项目指定设备上的目录。
+  6. 将您的项目命名为"GetStartedApp"。
+  7. 点击**创建项目**。
+  </TabItem>
+  <TabItem value="cli" label="命令行">
+  1. 在命令行中运行此命令：
+
+  ```
+  dotnet new avalonia.mvvm -o GetStartedApp
+  ```
+
+  2. 检查您的设备上是否有一个名为 **GetStartedApp** 的新文件夹，其中包含新的项目文件。
+  </TabItem>
+</Tabs>
+
+## 运行您的项目
+<Tabs groupId="ide">  
+  <TabItem value="rider" label="Rider">
+	点击顶部工具栏中的**运行**。
+
+  解决方案将构建并在新窗口中运行您的应用程序。默认情况下，会显示字符串"Welcome to Avalonia!"
+  </TabItem>
+  <TabItem value="vs" label="Visual Studio">
+  在顶部工具栏中，选择**运行**按钮旁边的"GetStartedApp"。然后点击**运行**。
+
+  解决方案将构建并在新窗口中运行您的应用程序。默认情况下，会显示字符串"Welcome to Avalonia!"
+  </TabItem>
+  <TabItem value="vsc" label="Visual Studio Code">
+  1. 在侧边导航栏中选择**运行和调试**。
+  2. 如果提示选择调试器，选择 **C#**。
+  3. 点击**运行和调试**。
+
+  解决方案将构建并在新窗口中运行您的应用程序。默认情况下，会显示字符串"Welcome to Avalonia!"
+  </TabItem>
+  <TabItem value="cli" label="命令行">
+  1. 导航到包含您的 **GetStartedApp** 项目的目录。
+  2. 运行命令 `dotnet run`。
+
+  解决方案将构建并在新窗口中运行您的应用程序。默认情况下，会显示字符串"Welcome to Avalonia!"
+  </TabItem>
+</Tabs>
+
+<div className="center" style={{maxWidth:400}}>
+<img className="center" src={WelcomeToAvalonia} alt="在窗口中运行的默认 Avalonia 应用程序的屏幕截图。" />
+</div>
+
+## 后续步骤
+
+您现在已经在设备上安装了 Avalonia，并知道如何创建和运行 Avalonia 项目。
+
+您可以立即开始开发应用程序。
+
+或者，如果想要一个简短的教程，构建一个简单的应用程序，介绍 Avalonia 中的基本概念和功能，请继续阅读下一页：
+
+<br />
+<div style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
+  <Button label="入门教程：构建温度转换器应用程序 →" link="/docs/get-started/starter-tutorial" variant="primary" outline />
+</div>