diff --git a/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx b/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
index a4856c98570e1..22a5cbd80af93 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
@@ -6,59 +6,88 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
category: renderer
i18nReady: true
---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
此 **[Astro 集成][astro-integration]** 为你的 [Svelte](https://svelte.dev/) 组件启用服务器端渲染和客户端注入。它支持 Svelte 3、Svelte 4 以及 Svelte 5 版本（实验性）。
## 安装
-有两种方式可以将集成添加到你的项目当中，先让我们从最方便的方式来入手！
-
-### `astro add` 命令
-
-Astro 包含来一个 CLI 工具来提供一等集成支持，`astro add` 这个命令将会：
-
-1. 安装所有必须的依赖和对等依赖（可选）
-2. 更新你的 `astro.config.*` 文件，以应用当前的集成（同样可选）
+Astro 包含了一个 `astro add` 命令，用于自动设置官方集成。如果你愿意，可以改为[手动安装集成](#手动安装)。
安装 `@astrojs/svelte`，需要在你的项目工程中依次运行以下命令：
-```sh
-# 使用 NPM
-npx astro add svelte
-# 使用 Yarn
-yarn astro add svelte
-# 使用 PNPM
-pnpm astro add svelte
-```
+
+
+ ```sh
+ npx astro add svelte
+ ```
+
+
+ ```sh
+ pnpm astro add svelte
+ ```
+
+
+ ```sh
+ yarn astro add svelte
+ ```
+
+
如果你有任何问题，[欢迎随时在 GitHub 上开个 issue 来向我们报告](https://github.com/withastro/astro/issues) 然后尝试执行以下的手动安装步骤。
-### 手动安装依赖项
-
-首先像下面这样安装 `@astrojs/svelte` 集成：
-
-```sh
-npm install @astrojs/svelte
-```
-
-大多数包管理器将会安装关联的对等依赖，如果你在启动 Astro 的时候仍然遇到 "Cannot find package 'svelte'" 或者相似的警告，你将需要手动安装 Svelte：
-
-```sh
-npm install svelte
-```
-
-现在，使用 `integrations` 属性来应用你的集成到 `astro.config.*` 文件：
-
-```diff lang="js" "svelte()"
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
-+ import svelte from '@astrojs/svelte';
-
- export default defineConfig({
- // ...
- integrations: [svelte()],
- // ^^^^^^^^
- });
+### 手动安装
+
+首先，安装 `@astrojs/svelte` 包:
+
+
+
+ ```sh
+ npm install @astrojs/svelte
+ ```
+
+
+ ```sh
+ pnpm add @astrojs/svelte
+ ```
+
+
+ ```sh
+ yarn add @astrojs/svelte
+ ```
+
+
+
+大多数包管理器也会安装相关的对等依赖项。如果在启动 Astro 时看到 "Cannot find package 'svelte'" (或类似的)警告，则需要安装 Svelte：
+
+
+
+ ```sh
+ npm install svelte
+ ```
+
+
+ ```sh
+ pnpm add svelte
+ ```
+
+
+ ```sh
+ yarn add svelte
+ ```
+
+
+
+然后，使用 `integrations` 属性将集成应用到你的 `astro.config.*` 文件中：
+
+```js title="astro.config.mjs" ins={2} ins="svelte()"
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+export default defineConfig({
+ // ...
+ integrations: [svelte()],
+});
```
## 入门
@@ -69,20 +98,6 @@ npm install svelte
* 💧 客户端合成注水选项
* 🤝 将框架混合和嵌套在一起的时机
-## 疑难解答
-
-如需帮助，请查看我们在 [Discord](https://astro.build/chat) 上的 `#support` 频道。我们友好的支持小队成员随时为你提供帮助！
-
-你也可以查看我们的 [Astro 集成文档][astro-integration] 以获取集成的更多信息。
-
-## 贡献
-
-该 Astro 包是由核心团队维护的，欢迎提交 issue 和 PR！
-
-[astro-integration]: /zh-cn/guides/integrations-guide/
-
-[astro-ui-frameworks]: /zh-cn/core-concepts/framework-components/#使用框架组件
-
## 选项
@@ -106,8 +121,7 @@ const defaultOptions = {
你可以通过在 `astro.config.mjs` 或者 `svelte.config.js` 文件中传递这个选项配置给 `svelte` 集成，这两种方式都将覆盖默认的 `preprocess` 设置：
-```js
-// astro.config.mjs
+```js title="astro.config.mjs" "preprocess: []"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
@@ -116,7 +130,7 @@ export default defineConfig({
});
```
-```js
+```js title="svelte.config.js"
// svelte.config.js
export default {
preprocess: [],
@@ -125,12 +139,11 @@ export default {
## TypeScript 智能提示
-**添加于：** `@astrojs/svelte@2.0.0`
+
如果你的文件中使用了像 TypeScript 或 SCSS 预处理器，你可以创建一个 `svelte.config.js` 文件，确保 Svelte IDE 拓展能够正确解析 Svelte 文件。
-```js
-// svelte.config.js
+```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';
export default {
@@ -139,3 +152,7 @@ export default {
```
当你运行 `astro add svelte` 指令的时候，将自动为你添加配置文件。
+
+[astro-integration]: /zh-cn/guides/integrations-guide/
+
+[astro-ui-frameworks]: /zh-cn/core-concepts/framework-components/#使用框架组件