!3471 快速入门图片/文字间加换行&Sample链接修改：无需翻译

Merge pull request !3471 from 葛亚芳/master

!3471 快速入门图片/文字间加换行&Sample链接修改：无需翻译
Merge pull request !3471 from 葛亚芳/master
5bd5bc49 · openharmony_ci · Gitee · 7a0a2f0a · 48f235fe · 5bd5bc49
9 changed file
--- a/en/application-dev/quick-start/start-with-ets-low-code.md
+++ b/en/application-dev/quick-start/start-with-ets-low-code.md
@@ -22,9 +22,11 @@ You can develop applications or services in the low-code approach using either o
 ## Creating a Project That Supports Low-Code Development

 1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
+
   ![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png)

 2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters.
+
   ![en-us_image_0000001277728569](figures/en-us_image_0000001277728569.png)

 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
@@ -68,6 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
   ![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)

 5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks in the Previewer.
+
   ![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)


@@ -101,6 +104,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
      }
      ```
   - Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277488985](figures/en-us_image_0000001277488985.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hi there**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
+
      ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)

 5. Add a **Button** component.
@@ -141,6 +145,7 @@ You can implement page redirection through the page router, which finds the targ
     ```
   
   - In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
+
     ![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)

 2. Implement redirection from the second page to the first page.
@@ -170,9 +175,11 @@ You can implement page redirection through the page router, which finds the targ
      }
      ```
   - In the second.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
+
      ![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png)

 3. Open the **index.visual** or **index.ets** file and click ![en-us_image_0000001277608849](figures/en-us_image_0000001277608849.png) in the Previewer to refresh the file. The figure below shows the effect.
+
   ![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png)


@@ -181,9 +188,11 @@ You can implement page redirection through the page router, which finds the targ
 1. Connect the development board running the OpenHarmony standard system to the computer.

 2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+
   ![en-us_image_0000001277728613](figures/en-us_image_0000001277728613.png)

 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001277809373](figures/en-us_image_0000001277809373.png). The display effect is shown in the figure below.
+
   ![en-us_image_0000001233209024](figures/en-us_image_0000001233209024.png)

 Congratulations! You have finished developing your OpenHarmony application in eTS in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
--- a/en/application-dev/quick-start/start-with-ets.md
+++ b/en/application-dev/quick-start/start-with-ets.md
@@ -9,9 +9,11 @@
 ## Creating an eTS Project

 1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
+
   ![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png)

 2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters.
+
   ![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.png)

 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
@@ -234,6 +236,7 @@ You can implement page redirection through the page router, which finds the targ
   ```

 3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect.
+
   ![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png)


@@ -242,9 +245,11 @@ You can implement page redirection through the page router, which finds the targ
 1. Connect the development board running the OpenHarmony standard system to the computer.

 2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+
   ![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png)

 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below.
+
   ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png)

 Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
--- a/en/application-dev/quick-start/start-with-js-low-code.md
+++ b/en/application-dev/quick-start/start-with-js-low-code.md
@@ -23,10 +23,11 @@ You can develop applications or services in the low-code approach using either o
 > This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.

 1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
+
   ![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png)
 2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.

-  ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)
+    ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)

 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.

@@ -70,6 +71,7 @@ Add **Div**, **Text**, and **Button** components to the first page.
   ![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.gif)

 5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks on the Previewer.
+
   ![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png)


@@ -137,9 +139,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
      ```
   - In the second.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.

-   ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)
+     ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)

 3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect.
+
   ![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png)


@@ -148,9 +151,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
 1. Connect the development board running the OpenHarmony standard system to the computer.

 2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+
   ![en-us_image_0000001268283201](figures/en-us_image_0000001268283201.png)

 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below.
+
   ![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png)

 Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
--- a/en/application-dev/quick-start/start-with-js.md
+++ b/en/application-dev/quick-start/start-with-js.md
@@ -7,9 +7,11 @@
 ## Creating a JavaScript Project

 1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
+
   ![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png)

 2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters.
+
   ![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.png)

 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
@@ -189,6 +191,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
   ```

 3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect.
+
   ![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png)


@@ -197,9 +200,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
 1. Connect the development board running the OpenHarmony standard system to the computer.

 2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
+
   ![en-us_image_0000001223557290](figures/en-us_image_0000001223557290.png)

 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below.
+
   ![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png)

 Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
--- a/zh-cn/application-dev/notification/common-event.md
+++ b/zh-cn/application-dev/notification/common-event.md
@@ -174,6 +174,6 @@ if (this.subscriber != null) {

 针对公共事件开发，有以下相关实例可供参考：

- [`CommonEvent`：订阅公共事件（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/ability/CommonEvent)
+- [`CommonEvent`：订阅公共事件（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/Notification/CommonEvent)


--- a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md
+++ b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md
@@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
 ## 创建新工程支持低代码开发

 1. 打开**DevEco Studio**，点击**File** &gt; **New** &gt; **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+
   ![zh-cn_image_0000001233528152](figures/zh-cn_image_0000001233528152.png)

 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
+
   ![zh-cn_image_0000001277728569](figures/zh-cn_image_0000001277728569.png)

 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
@@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
   ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif)

 5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示：
+
   ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png)


@@ -103,7 +106,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
      }
      ```
   - 选中Text组件，将其拖至画布，再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277488985](figures/zh-cn_image_0000001277488985.png)（Feature），设置Text组件的Content属性为“this.message”（即“Hi there”）；设置Text组件的FontSize样式为30fp；设置组件的TextAlign样式为center。再选中画布上的Text组件，拖动放大。操作如下所示：
-   ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
+
+        ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif)
   
 5. **添加按钮。**
   选中UI Control中的Button组件，将其拖至画布，再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)（General），设置Button组件的Height为40vp；点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)（Feature），设置Button组件的Value属性为“Back”；设置组件的FontSize样式为25fp，使得其文字放大。操作如下所示：
@@ -143,6 +147,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
     ```
   
   - “**index.visual**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233209020](figures/zh-cn_image_0000001233209020.png)（Events），鼠标点击OnClick事件的输入框，选择this.onclick，如下所示：
+
     ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png)

 2. **第二个页面返回到第一个页面。**
@@ -172,9 +177,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
      }
      ```
   - “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233368900](figures/zh-cn_image_0000001233368900.png)（Events），鼠标点击OnClick事件的输入框，选择this.back，如下所示：
+
      ![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png)

 3. **打开index.visual或index.ets文件，点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示：
+
   ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png)


@@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。

 2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+
   ![zh-cn_image_0000001277728613](figures/zh-cn_image_0000001277728613.png)

 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001277809373](figures/zh-cn_image_0000001277809373.png)按钮运行。效果如下图所示：
+
   ![zh-cn_image_0000001233209024](figures/zh-cn_image_0000001233209024.png)

 恭喜您已经使用eTS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
--- a/zh-cn/application-dev/quick-start/start-with-ets.md
+++ b/zh-cn/application-dev/quick-start/start-with-ets.md
@@ -9,9 +9,11 @@
 ## 创建eTS工程

 1. 打开**DevEco Studio**，点击**File** &gt; **New** &gt; **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+
   ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png)

 2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。
+
   ![zh-cn_image_0000001223716826](figures/zh-cn_image_0000001223716826.png)

 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
@@ -245,6 +247,7 @@
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。

 2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+
   ![zh-cn_image_0000001268077317](figures/zh-cn_image_0000001268077317.png)

 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)按钮运行。效果如下图所示：

--- a/zh-cn/application-dev/quick-start/start-with-js-low-code.md
+++ b/zh-cn/application-dev/quick-start/start-with-js-low-code.md
@@ -24,9 +24,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
 > 该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。

 1. 打开**DevEco Studio**，点击**File** &gt; **New** &gt; **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+
   ![zh-cn_image_0000001268198893](figures/zh-cn_image_0000001268198893.png)

 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
+
   ![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png)

 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
@@ -73,6 +75,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
   ![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif)

 5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示：
+
   ![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png)


@@ -140,7 +143,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
      ```
   - “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388262](figures/zh-cn_image_0000001215388262.png)（Events），鼠标点击Click事件的输入框，选择back，如下所示：

-   ![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)
+     ![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png)

 3. **打开index.visual或index.js文件，点击预览器中的** ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) **按钮进行刷新。** 效果如下图所示：

@@ -152,6 +155,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。

 2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+
   ![zh-cn_image_0000001268283201](figures/zh-cn_image_0000001268283201.png)

 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)按钮运行。效果如下图所示：

--- a/zh-cn/application-dev/quick-start/start-with-js.md
+++ b/zh-cn/application-dev/quick-start/start-with-js.md
@@ -8,9 +8,11 @@
 ## 创建JS工程

 1. 打开**DevEco Studio**，点击**File** &gt; **New** &gt; **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。
+
   ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png)

 2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。
+
   ![zh-cn_image_0000001223877162](figures/zh-cn_image_0000001223877162.png)

 3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
@@ -203,6 +205,7 @@
 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。

 2. 点击**File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：
+
   ![zh-cn_image_0000001223557290](figures/zh-cn_image_0000001223557290.png)

 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)按钮运行。效果如下图所示：