diff --git a/src/content/docs/zh-cn/guides/integrations-guide/alpinejs.mdx b/src/content/docs/zh-cn/guides/integrations-guide/alpinejs.mdx
index 862e738b7f08b..05959d934166e 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/alpinejs.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/alpinejs.mdx
@@ -90,7 +90,7 @@ Alpine.js 集成不允许你控制脚本的加载或初始化方式。如果你
## 示例
-* [Astro Alpine.js 示例](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) 演示了如何在 Astro 项目中使用 Alpine.js。
+* [Astro Alpine.js 示例](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) 演示了如何在 Astro 项目中使用 Alpine.js。
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/cloudflare.mdx b/src/content/docs/zh-cn/guides/integrations-guide/cloudflare.mdx
index 1ac25ea6c9ed1..cc7e8042e2855 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/cloudflare.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/cloudflare.mdx
@@ -54,8 +54,8 @@ npm install @astrojs/cloudflare
这个配置选项定义了你的 Astro 项目如何部署到 Cloudflare Pages。
-* `advanced` 模式会获取 `dist` 文件夹中的 `_worker.js` 文件。
-* `directory` 模式会获取 `functions` 文件夹中的文件，默认只会生成一个 `[[path]].js` 文件。
+* `advanced` 模式会获取 `dist` 文件夹中的 `_worker.js` 文件。
+* `directory` 模式会获取 `functions` 文件夹中的文件，默认只会生成一个 `[[path]].js` 文件。
切换到 `directory` 模式允许你手动添加额外的文件例如 [Cloudflare Pages 插件](https://developers.cloudflare.com/pages/platform/functions/plugins/)、[Cloudflare Pages 中间件](https://developers.cloudflare.com/pages/platform/functions/middleware/) 甚至使用了 [Cloudflare Pages 函数路由](https://developers.cloudflare.com/pages/platform/functions/routing/) 的自定义函数。
@@ -93,49 +93,49 @@ export default defineConfig({
这有三个选项可供选择：
-* **`"auto"`（默认）**：自动选择生成最少条目的策略。这通常应该够用了，除非你有某些理由要选择其他选项。
-* **`include`**：不会被预渲染的页面和端点将会被列为 `include` 条目，并告诉 Cloudflare 将这些路由作为函数调用。而 `exclude` 条目仅用于解决冲突。通常情况下，如果你的网站大多数是静态页面，只有少数动态页面或端点时，这将是最好的策略。
-
-
- 示例：对于 `src/pages/index.astro`（静态），`src/pages/company.astro`（静态），`src/pages/users/faq.astro`（静态），以及 `/src/pages/users/[id].astro` （SSR），将产生以下 `_routes.json`:
-
- ```json
- {
- "version": 1,
- "include": [
- "/_image", // Astro 的图片端点
- "/users/*" // 动态路由
- ],
- "exclude": [
- // 排除上述动态通配符路由中后的静态路由
- "/users/faq/",
- "/users/faq/index.html"
- ]
- }
- ```
-
-* **`exclude`：** 预渲染的页面将被列为 `exclude` 条目（即告诉 Cloudflare 将这些路由作为静态资源处理）。通常情况下，如果你的网站大多数是动态页面或端点，只有少数静态页面时，这将是最好的策略。
-
- 示例：对于前面示例中相同的页面，这将产生以下 `_routes.json`:
-
- ```json
- {
- "version": 1,
- "include": [
- "/*" // 除了后面的路由外，所有路由都会被作为函数处理
- ],
- "exclude": [
- // 所有静态资源
- "/",
- "/company/",
- "/index.html",
- "/users/faq/",
- "/favicon.png",
- "/company/index.html",
- "/users/faq/index.html"
- ]
- }
- ```
+* **`"auto"`（默认）**：自动选择生成最少条目的策略。这通常应该够用了，除非你有某些理由要选择其他选项。
+* **`include`**：不会被预渲染的页面和端点将会被列为 `include` 条目，并告诉 Cloudflare 将这些路由作为函数调用。而 `exclude` 条目仅用于解决冲突。通常情况下，如果你的网站大多数是静态页面，只有少数动态页面或端点时，这将是最好的策略。
+
+
+ 示例：对于 `src/pages/index.astro`（静态），`src/pages/company.astro`（静态），`src/pages/users/faq.astro`（静态），以及 `/src/pages/users/[id].astro` （SSR），将产生以下 `_routes.json`:
+
+ ```json
+ {
+ "version": 1,
+ "include": [
+ "/_image", // Astro 的图片端点
+ "/users/*" // 动态路由
+ ],
+ "exclude": [
+ // 排除上述动态通配符路由中后的静态路由
+ "/users/faq/",
+ "/users/faq/index.html"
+ ]
+ }
+ ```
+
+* **`exclude`：** 预渲染的页面将被列为 `exclude` 条目（即告诉 Cloudflare 将这些路由作为静态资源处理）。通常情况下，如果你的网站大多数是动态页面或端点，只有少数静态页面时，这将是最好的策略。
+
+ 示例：对于前面示例中相同的页面，这将产生以下 `_routes.json`:
+
+ ```json
+ {
+ "version": 1,
+ "include": [
+ "/*" // 除了后面的路由外，所有路由都会被作为函数处理
+ ],
+ "exclude": [
+ // 所有静态资源
+ "/",
+ "/company/",
+ "/index.html",
+ "/users/faq/",
+ "/favicon.png",
+ "/company/index.html",
+ "/users/faq/index.html"
+ ]
+ }
+ ```
### `routes.include`
@@ -175,8 +175,8 @@ export default defineConfig({
控制适配器使用哪个图像服务。当配置了不兼容的图像服务时，适配器将默认到 `passthrough` 模式。否则，它将使用全局配置的图像服务：
-* **`cloudflare`:** 使用 [Cloudflare Image Resizing](https://developers.cloudflare.com/images/image-resizing/) 服务。
-* **`passthrough`:** 使用现有的 [`noop`](/zh-cn/guides/images/#配置-no-op-透传服务) 服务。
+* **`cloudflare`:** 使用 [Cloudflare Image Resizing](https://developers.cloudflare.com/images/image-resizing/) 服务。
+* **`passthrough`:** 使用现有的 [`noop`](/zh-cn/guides/images/#配置-no-op-透传服务) 服务。
### `wasmModuleImports`
@@ -213,13 +213,13 @@ export default defineConfig({
`type` 属性定义了你的 Astro 项目将部署到哪：
-* `pages`：部署到 [Cloudflare Pages](https://pages.cloudflare.com/)
-* `workers`：部署到 [Cloudflare Workers](https://workers.cloudflare.com/)
+* `pages`：部署到 [Cloudflare Pages](https://pages.cloudflare.com/)
+* `workers`：部署到 [Cloudflare Workers](https://workers.cloudflare.com/)
`mode` 属性则定义了你希望运行时在 `astro dev` 中支持什么：
-* `off`：使用 `astro dev` 时无法访问运行时。当你需要访问运行时来模拟本地的生产环境时，可以选择[使用 Wrangler 预览](#使用-wrangler-预览)。
-* `local`：使用由 miniflare 和 workerd 驱动的本地运行时，它支持 Cloudflare 绑定。只有当你想使用不支持的功能，如 `eval`，或没有本地支持的绑定时，才选择[使用 Wrangler 预览](#使用-wrangler-预览)。
+* `off`：使用 `astro dev` 时无法访问运行时。当你需要访问运行时来模拟本地的生产环境时，可以选择[使用 Wrangler 预览](#使用-wrangler-预览)。
+* `local`：使用由 miniflare 和 workerd 驱动的本地运行时，它支持 Cloudflare 绑定。只有当你想使用不支持的功能，如 `eval`，或没有本地支持的绑定时，才选择[使用 Wrangler 预览](#使用-wrangler-预览)。
在 `mode: local` 中，你可以访问 `persistTo` 属性，它定义了本地绑定状态保存的位置。这避免了每次重启开发服务器时都刷新绑定。这个值是相对于你执行 `astro dev` 的路径的一个目录。默认情况下它被设置为 `.wrangler/state/v3`，以允许使用 `wrangler` 命令行工具（例如用于迁移）。将这个路径会添加到你的 `.gitignore` 中。
@@ -229,11 +229,11 @@ Cloudflare 运行时让你能够访问环境变量和 Cloudflare 绑定。你可
目前支持的绑定有：
-* 环境变量
-* [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
-* [Cloudflare D1](https://developers.cloudflare.com/d1/)
-* [Cloudflare R2](https://developers.cloudflare.com/r2/)
-* [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/)
+* 环境变量
+* [Cloudflare Workers KV](https://developers.cloudflare.com/kv/)
+* [Cloudflare D1](https://developers.cloudflare.com/d1/)
+* [Cloudflare R2](https://developers.cloudflare.com/r2/)
+* [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/)
### Config
@@ -285,8 +285,10 @@ export default defineConfig({
如果你还需要定义 `secrets` 以外的环境变量，你需要在 Astro 项目的根目录下添加一个 `.dev.vars` 文件：
- # .dev.vars
- DB_PASSWORD=myPassword
+```
+# .dev.vars
+DB_PASSWORD=myPassword
+```
如果你想使用 `wrangler` 进行命令行操作，比如 D1 迁移，你还需要在 Astro 项目的根目录下添加一个包含正确内容的 `wrangler.toml` 文件。请查阅[Cloudflare 的文档](https://developers.cloudflare.com/)以获取更多详细信息。
@@ -340,9 +342,10 @@ class_name = "DO"
如果你还需要定义 `secrets` 以外的环境变量，你需要在 Astro 项目的根目录下添加一个 `.dev.vars` 文件：
- # .dev.vars
- DB_PASSWORD=myPassword
-
+```
+# .dev.vars
+DB_PASSWORD=myPassword
+```
### 用例
@@ -464,17 +467,17 @@ export async function GET(context) {
Astro 的 Cloudflare 适配器允许你使用任何 Cloudflare 支持的 Node.js 运行时 API，例如：
-* assert
-* AsyncLocalStorage
-* Buffer
-* Crypto
-* Diagnostics Channel
-* EventEmitter
-* path
-* process
-* Streams
-* StringDecoder
-* util
+* assert
+* AsyncLocalStorage
+* Buffer
+* Crypto
+* Diagnostics Channel
+* EventEmitter
+* path
+* process
+* Streams
+* StringDecoder
+* util
如果要使用这些 API，你的页面或端点必须是服务器渲染的（而不是预渲染的），并使用 `import {} from 'node:*'` 导入语法。
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx b/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx
index 31393e5d5a2a2..2cdc9f691bf11 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/lit.mdx
@@ -18,8 +18,8 @@ i18nReady: true
Astro 包含一个用于添加第一方集成的 CLI 工具：`astro add`。这个命令将：
-1. (可选) 安装所有必要的依赖和同行依赖
-2. (同样可选) 更新你的 `astro.config.*` 文件来应用这个集成
+1. (可选) 安装所有必要的依赖和同行依赖
+2. (同样可选) 更新你的 `astro.config.*` 文件来应用这个集成
要安装 `@astrojs/lit`，请从项目目录运行以下命令并按照提示操作：
@@ -66,9 +66,9 @@ npm install lit @webcomponents/template-shadowroot
要在 Astro 中使用你的第一个 Lit 组件，你可以移步我们的 [UI 框架文档][astro-ui-frameworks]。你将会了解到：
-* 📦 如何加载框架组件
-* 💧 客户端水合选项
-* 🤝 混合和嵌套框架的机会
+* 📦 如何加载框架组件
+* 💧 客户端水合选项
+* 🤝 混合和嵌套框架的机会
在 Astro 中编写和导入 Lit 组件的代码如下：
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/markdoc.mdx b/src/content/docs/zh-cn/guides/integrations-guide/markdoc.mdx
index adc1f8f0e0a4f..f18dd49914e92 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/markdoc.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/markdoc.mdx
@@ -181,8 +181,8 @@ export default defineMarkdocConfig({
所有的 Markdown 标题都会渲染 `Heading.astro` 组件，并将以下 `attributes` 作为组件的 props 传递：
-* `level: number` 标题级别 1 - 6
-* `id: string` 从标题的文本内容生成的 `id`。这对应于 [内容 `render()` 函数生成的 `slug`](/zh-cn/guides/content-collections/#将内容渲染成-html)。
+* `level: number` 标题级别 1 - 6
+* `id: string` 从标题的文本内容生成的 `id`。这对应于 [内容 `render()` 函数生成的 `slug`](/zh-cn/guides/content-collections/#将内容渲染成-html)。
例如，标题 `### Level 3 heading!` 将会传递 `level: 3` 和 `id: 'level-3-heading'` 作为组件的 props。
@@ -362,10 +362,10 @@ export default defineMarkdocConfig({
]
```
`schema` 属性 包含了为 Astro 内容集合配置语言服务器的所有信息。它接受以下属性：
-* `path`: 配置文件的路径。
-* `type`: 配置文件使用的模块类型（`esm` 允许 `import` 语法）。
-* `property`: 包含配置对象的导出属性名称。
-* `watch`: 告诉服务器监听配置中的更改。
+* `path`: 配置文件的路径。
+* `type`: 配置文件使用的模块类型（`esm` 允许 `import` 语法）。
+* `property`: 包含配置对象的导出属性名称。
+* `watch`: 告诉服务器监听配置中的更改。
顶级 `path` 属性告诉服务器内容位于哪里。由于 Markdoc 是特定于内容集合的，因此可以使用 `src/content`。
### 传递 Markdoc 变量
@@ -489,7 +489,7 @@ Astro Markdoc 集成处理了在 `markdoc.config.js` 文件中不可用的 Markd
## 示例
-* [Astro Markdoc 入门模板](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) 展示了如何在你的 Astro 项目中使用 Markdoc 文件。
+* [Astro Markdoc 入门模板](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) 展示了如何在你的 Astro 项目中使用 Markdoc 文件。
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx b/src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx
index ced3299b09ae2..d0fc3133d8a82 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx
@@ -76,10 +76,10 @@ Astro 的 MDX 集成为标准的 MDX 增加了额外的功能，包括 Markdown
你可以通过以下选项配置你的 MDX 的渲染方式：
-* [继承自 Markdown 配置的选项](#继承自-markdown-配置的选项)
-* [`extendMarkdownConfig`](#extendmarkdownconfig)
-* [`recmaPlugins`](#recmaplugins)
-* [`优化`](#优化)
+* [继承自 Markdown 配置的选项](#继承自-markdown-配置的选项)
+* [`extendMarkdownConfig`](#extendmarkdownconfig)
+* [`recmaPlugins`](#recmaplugins)
+* [`优化`](#优化)
### 继承自 Markdown 配置的选项
@@ -114,8 +114,8 @@ MDX 不支持以字符串形式传递备注和 rehype 插件。你应该安装
### `extendMarkdownConfig`
-* **类型：** `boolean`
-* **默认值：** `true`
+* **类型：** `boolean`
+* **默认值：** `true`
MDX 将默认扩展[你的项目现有的 Markdown 配置](/zh-cn/reference/configuration-reference/#markdown-选项)。要覆盖个别选项，你可以在你的 MDX 配置中进行等价配置。
@@ -175,7 +175,7 @@ export default defineConfig({
### 优化
-* **类型：** `boolean | { customComponentNames?: string[] }`
+* **类型：** `boolean | { customComponentNames?: string[] }`
这是一个可选的配置设置，用于优化 MDX 输出，以便通过内部 rehype 插件加快构建和渲染速度。如果你的 MDX 文件较多，并注意到构建速度较慢，这可能会很有用。不过，该选项可能会生成一些未转义的 HTML，因此请确保你网站的交互式部分在启用该选项后仍能正常工作。
@@ -197,7 +197,7 @@ export default defineConfig({
#### customComponentNames
-* **类型：** `string[]`
+* **类型：** `string[]`
`optimize` 的一个可选属性，用于防止 MDX 优化器处理[通过组件属性传递给导入的 MDX 内容的任何自定义组件](/zh-cn/guides/markdown-content/#使用导入的-mdx-的自定义组件)。
@@ -239,7 +239,7 @@ export default defineConfig({
## 例子
-* [Astro MDX 启动模板](https://github.com/withastro/astro/tree/latest/examples/with-mdx)显示了如何在你的 Astro 项目中使用 MDX 文件。
+* [Astro MDX 启动模板](https://github.com/withastro/astro/tree/latest/examples/with-mdx)显示了如何在你的 Astro 项目中使用 MDX 文件。
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/netlify.mdx b/src/content/docs/zh-cn/guides/integrations-guide/netlify.mdx
index e99a3e9fac895..86fe0e9696dd0 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/netlify.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/netlify.mdx
@@ -8,7 +8,7 @@ category: adapter
i18nReady: true
---
-此适配器允许 Astro 部署 SSR 网站到 [Netlify](https://www.netlify.com/)。
+此适配器可以部署你的 [`hybrid` 或 `server` 渲染站点](/zh-cn/core-concepts/rendering-modes/#按需渲染) 到 [Netlify](https://www.netlify.com/)。
在我们的 [Netlify 部署指南](/zh-cn/guides/deploy/netlify/) 中学习如何部署你的 Astro 网站。
@@ -16,13 +16,13 @@ i18nReady: true
如果你正在使用 Astro 作为静态站点生成器——也就是它的开箱即用的行为——你不需要一个适配器。
-如果你希望 [使用服务器端渲染（SSR）](/zh-cn/guides/server-side-rendering/)，Astro 需要一个与你的部署运行时相匹配的适配器。
+如果你希望 [使用按需渲染，也称作服务器端渲染（SSR）](/zh-cn/guides/server-side-rendering/)，Astro 需要一个与你的部署运行时相匹配的适配器。
[Netlify](https://www.netlify.com/) 是一个部署平台，允许你通过直接连接 GitHub 仓库来托管您的网站。这个适配器增强了 Astro 的构建流程，为通过 Netlify 部署项目做好准备。
## 安装
-添加 Netlify 适配器以在 Astro 项目中启用 SSR，使用以下 `astro add` 命令。这将在一步中安装适配器并对 `astro.config.mjs` 文件进行适当的更改。
+使用以下 `astro add` 命令添加 Netlify 适配器。这将在一步中安装适配器并对 `astro.config.mjs` 文件进行适当的更改。
```sh
# Using NPM
@@ -37,80 +37,80 @@ pnpm astro add netlify
如果你更喜欢手动安装适配器，请完成以下两个步骤：
-1. 安装 Netlify 适配器到你的项目依赖中，使用你喜欢的包管理器。如果你使用 npm 或者不确定，请在终端中运行：
+1. 安装 Netlify 适配器到你的项目依赖中，使用你喜欢的包管理器。如果你使用 npm 或者不确定，请在终端中运行：
- ```bash
- npm install @astrojs/netlify
- ```
+ ```bash
+ npm install @astrojs/netlify
+ ```
2. 添加两行内容到你的 `astro.config.mjs` 项目配置文件中。
- ```diff lang="js"
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
- + import netlify from '@astrojs/netlify/functions';
-
- export default defineConfig({
- + output: 'server',
- + adapter: netlify(),
- });
- ```
+ ```diff lang="js"
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ + import netlify from '@astrojs/netlify';
+
+ export default defineConfig({
+ + output: 'server',
+ + adapter: netlify(),
+ });
+ ```
-### 在 Edge Functions 中使用中间件
+## 用法
-当部署到 Netlify Functions 时，您可以选择使用 Edge Function 来运行 Astro 中间件。
+[阅读完整的部署指南](/zh-cn/guides/deploy/netlify/)
-为了启用这个功能，将 `edgeMiddleware` Astro 配置选项设置为 `true`：
+按照指南 [在本地构建你的站点](/zh-cn/guides/deploy/#在本地构建站点)。构建完成后，你将会有一个包含 [Netlify Functions](https://docs.netlify.com/functions/overview/) 的 `.netlify/` 文件夹，其中包含 `.netlify/functions-internal/` 文件夹中的函数和 `.netlify/edge-functions/` 文件夹中的 [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/)。
-```diff lang="js"
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
- import netlify from '@astrojs/netlify/functions';
-
- export default defineConfig({
- output: 'server',
- adapter: netlify({
-+ edgeMiddleware: true,
- }),
- });
+要部署你的站点，请安装 [Netlify CLI](https://docs.netlify.com/cli/get-started/) 并运行：
+
+```sh
+netlify deploy
```
-#### 传递 edge 上下文到你的站点
+这篇 [Netlify 博客文章](https://www.netlify.com/blog/how-to-deploy-astro/) 和 [Netlify 文档](https://docs.netlify.com/integrations/frameworks/astro/) 提供了更多关于如何使用这个集成部署到 Netlify 的信息。
+
+### 从你的站点访问 edge 上下文
-Netlify 的 Edge Functions 提供了一个 [context 对象](https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object)，其中包含有关请求的元数据，例如用户的 IP、地理位置数据和 cookie。
+Netlify Edge Functions 提供了一个 [context 对象](https://docs.netlify.com/edge-functions/api/#netlify-specific-context-object)，其中包含有关请求的元数据，例如用户的 IP、地理位置数据和 cookie。
-为了将这个上下文中的值暴露给你的站点，在你项目的 [srcDir](/zh-cn/reference/configuration-reference/#srcdir) 中创建一个 `netlify-edge-middleware.ts`（或 `.js`）文件。这个文件必须导出一个函数，它返回要添加到 [Astro 的 `locals` 对象](/zh-cn/reference/api-reference/#astrolocals)中的数据，该对象在中间件和 Astro 路由中可用。
+这可以通过 `Astro.locals.netlify.context` 对象访问：
-在这个例子中，`visitorCountry` 和 `hasEdgeMiddleware` 都会被添加到 Astro 的 `locals` 对象中：
+```astro
+---
+const {
+ geo: { city },
+} = Astro.locals.netlify.context;
+---
+
+你好，来自{city}的友好访客！
+```
+
+如果你使用 TypeScript，你可以通过更新 `src/env.d.ts` 来使用 `NetlifyLocals` 来获得正确的类型：
```ts
-// src/netlify-edge-middleware.ts
-import type { Context } from 'https://edge.netlify.com';
-
-export default function ({ request, context }: { request: Request; context: Context }) {
- // Return serializable data to add to Astro.locals
- return {
- visitorCountry: context.geo.country.name,
- hasEdgeMiddleware: true,
- };
+// src/env.d.ts
+///
+///
+
+type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals
+
+declare namespace App {
+ interface Locals extends NetlifyLocals {
+ ...
+ }
}
```
-:::note
-Netlify Edge Functions 运行在 [Deno 环境](https://docs.netlify.com/edge-functions/api/#runtime-environment)中，所以这个文件中的导入语句必须使用 Deno 的 URL 语法。
-:::
-
-`netlify-edge-middleware.ts` 必须提供一个函数作为它的默认导出。这个函数：
+这不适用于预渲染的页面。
-* 必须返回一个 JSON 可序列化的对象，不能包含像 `Map`、`function`、`Set` 等类型。
-* 总是先运行，然后再运行其他中间件和路由。
-* 无法返回响应或重定向。
+### 在 Edge Functions 中运行 Astro 中间件
-### 每个页面单独的 functions
+任何 Astro 中间件都会在构建时应用于预渲染页面，在运行时应用于按需渲染页面。
-Netlify 适配器默认构建到一个函数。Astro 2.7 添加了对将构建拆分为每个页面的单独入口的支持。如果你使用这个配置，Netlify 适配器将为每个页面生成一个单独的函数。这可以帮助减少每个函数的大小，因此它们只绑定该页面上使用的代码。
+要在预渲染页面上实现重定向、访问控制或自定义响应头，请通过启用 `edgeMiddleware` 选项在 Netlify Edge Functions 上运行你的中间件：
-```js
+```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';
@@ -118,14 +118,25 @@ import netlify from '@astrojs/netlify/functions';
export default defineConfig({
output: 'server',
adapter: netlify({
- functionPerRoute: true,
++ edgeMiddleware: true,
}),
});
```
-### 静态网站
+配置 `edgeMiddleware: true` 将会将你的中间件部署为 Edge Function，并在所有路由上运行它——包括预渲染的页面。但是，中间件中指定的 locals 不会对任何预渲染的页面可用，因为它们已经在构建时完全渲染了。
+
+### Netlify 图片 CDN 支持
+
+这个适配器使用 [Netlify 图片 CDN](https://docs.netlify.com/image-cdn/) 来实时转换图片，而不会影响构建时间。
+它背后是使用 [Astro 图片服务](/zh-cn/reference/image-service-reference/) 实现的。
-对于静态网站，你通常不需要一个适配器。但是，如果你在 Astro 配置中使用 `redirects` 配置，Netlify 适配器可以将其转换为正确的 `_redirects` 格式。
+:::note
+这个适配器不支持你的 Astro 配置中的 `image.domains` 和 `image.remotePatterns` 属性。要[为 Netlify 图片 CDN 指定远程路径](https://docs.netlify.com/image-cdn/overview/#remote-path)，请使用 `netlify.toml` 中的 `remote_images` 字段。
+:::
+
+### 静态站点和重定向
+
+对于静态站点，你通常不需要适配器。但是，如果你在 Astro 配置中使用了 `redirects` 配置，Netlify 适配器可以将其转换为正确的 `_redirects` 格式。
```js
// astro.config.mjs
@@ -141,120 +152,43 @@ export default defineConfig({
});
```
-只有在你运行 `astro build` 之后，才会有一个 `dist/_redirects` 文件。Netlify 将使用它来正确地路由生产中的页面。
+一旦你运行了 `astro build`，就会有一个 `dist/_redirects` 文件。Netlify 将使用它来正确地路由生产环境中的页面。
:::note
-你依然可以在 `public/_redirects` 文件中手动添加重定向。你在重定向配置中指定的任何重定向都会被追加到你自己的重定向之后。
+你仍然可以包含一个 `public/_redirects` 文件来手动重定向。你在重定向配置中指定的任何重定向都会被追加到你自己的重定向的末尾。
:::
-### 按需构建器
-
-[Netlify 按需构建器](https://docs.netlify.com/configure-builds/on-demand-builders/) 是用于在 Netlify 的 Edge CDN 上构建和缓存页面内容的无服务器函数。你可以使用 [`builders` 选项](#构建器) 启用这些函数：
-
-默认情况下，所有页面在首次访问时会被渲染，并且渲染结果将在每次后续访问时复用，直到重新部署为止。如要设置重验证时间，请使用指定的持续时间（以秒为单位）调用 [`runtime.setBuildersTtl(ttl)` local](/zh-cn/reference/api-reference/#astrolocals)。
-
-下面的示例将重新验证时间设置为 45，这意味着 Netlify 将存储渲染的 HTML 内容 45 秒。
-
-```astro
----
-// src/pages/index.astro
-import Layout from '../components/Layout.astro';
-if (import.meta.env.PROD) {
- Astro.locals.runtime.setBuildersTtl(45);
-}
----
-
- {new Date(Date.now())}
-
-```
-
-重要的是要注意，按需构建器在检查缓存页面时会忽略查询参数。例如，如果 `example.com/?x=y` 被缓存，它将同时用于 `example.com/?a=b`（不同的查询参数）和 `example.com/`（没有查询参数）。
-
-## 用法
-
-[阅读完整的部署指南](/zh-cn/guides/deploy/netlify/)
-
-在 [执行构建](/zh-cn/guides/deploy/#在本地构建站点) 之后，`netlify/` 文件夹将包含 `netlify/functions/` 文件夹中的 [Netlify Functions](https://docs.netlify.com/functions/overview/)。
-
-现在你可以部署了。安装 [Netlify CLI](https://docs.netlify.com/cli/get-started/) 并运行：
-
-```sh
-netlify deploy --build
-```
+### 缓存页面
-[Netlify 关于 Astro 的博客文章](https://www.netlify.com/blog/how-to-deploy-astro/) 和 [Netlify 文档](https://docs.netlify.com/integrations/frameworks/astro/) 提供了更多关于如何使用这个集成部署到 Netlify 的信息。
+可以缓存没有任何动态内容的按需渲染页面，以提高性能并降低资源使用率。
+在适配器中启用 `cacheOnDemandPages` 选项将会缓存所有服务器渲染的页面，最长可达一年：
-## 配置
-
-为了配置这个适配器，在 `astro.config.mjs` 中的 `netlify()` 函数调用中传递一个对象——只有一个可能的配置选项：
-
-### dist 目录
-
-我们在你的项目根目录下的 `dist` 目录中构建。要更改这个目录，使用 `dist` 选项：
-
-```js
+```ts
// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import netlify from '@astrojs/netlify/functions';
-
export default defineConfig({
output: 'server',
adapter: netlify({
- dist: new URL('./dist/', import.meta.url),
+ cacheOnDemandPages: true,
}),
});
```
-并且在你的 `netlify.toml` 中指向 dist：
-
-```toml
-# netlify.toml
-[functions]
-directory = "dist/functions"
-```
-
-### 构建器
-
-你可以使用 `builders` 选项来启用按需构建器：
+这可以通过向你的响应添加缓存头来根据每个页面进行更改：
+```astro
+---
+// src/pages/index.astro
+import Layout from '../components/Layout.astro';
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import netlify from '@astrojs/netlify/functions';
+Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=45, must-revalidate');
+---
-export default defineConfig({
- output: 'server',
- adapter: netlify({
- builders: true,
- }),
-});
+
+ {new Date()}
+
```
-按需构建器仅适用于 `@astrojs/netlify/functions` 适配器，并且与 Edge Functions 不兼容。
-
-### 二进制媒体类型
-
-> 这个选项只适用于 Functions 适配器，不适用于 Edge Functions。
-
-Netlify Functions 需要 `body` 中的二进制数据被 base64 编码。`@astrojs/netlify/functions` 适配器根据 `Content-Type` 头自动处理这个问题。
-我们检查音频、图像和视频文件的常见 mime 类型。要包含应该被视为二进制数据的特定 mime 类型，请使用 `binaryMediaTypes` 选项包含一个二进制 mime 类型列表。
-
-```js
-// src/pages/image.jpg.ts
-import fs from 'node:fs';
-
-export function GET() {
- const buffer = fs.readFileSync('../image.jpg');
-
- // Return the buffer directly, @astrojs/netlify will base64 encode the body
- return new Response(buffer, {
- status: 200,
- headers: {
- 'content-type': 'image/jpeg',
- },
- });
-}
-```
+使用[细粒度缓存控制](https://www.netlify.com/blog/swr-and-fine-grained-cache-control/)，Netlify 支持标准缓存头，例如 `CDN-Cache-Control` 或 `Vary`。
+请参阅文档，了解如何实现例如 TTL 或 SWR 缓存：https://docs.netlify.com/platform/caching
## 示例
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/node.mdx b/src/content/docs/zh-cn/guides/integrations-guide/node.mdx
index 08db05d2d5b62..54583ecc609de 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/node.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/node.mdx
@@ -36,23 +36,23 @@ pnpm astro add node
如果你更喜欢手动安装适配器，请完成以下两个步骤：
1. 使用你喜欢的包管理器将 Node 适配器安装到项目的依赖项中。如果你正在使用 npm 或 不确定的包管理器，请在终端中运行：
- ```bash
- npm install @astrojs/node
- ```
+ ```bash
+ npm install @astrojs/node
+ ```
2. 在 `astro.config.mjs` 项目配置文件中添加两行。
- ```diff lang="js"
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
- + import node from '@astrojs/node';
+ ```diff lang="js"
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ + import node from '@astrojs/node';
- export default defineConfig({
- + output: 'server',
- + adapter: node({
- + mode: 'standalone',
- + }),
- });
- ```
+ export default defineConfig({
+ + output: 'server',
+ + adapter: node({
+ + mode: 'standalone',
+ + }),
+ });
+ ```
## 配置
@@ -64,18 +64,18 @@ pnpm astro add node
* `middleware` 模式允许将构建的输出用作另一个 Node.js 服务器的中间件，例如 Express.js 或 Fastify。
- ```js
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
- import node from '@astrojs/node';
+ ```js
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ import node from '@astrojs/node';
- export default defineConfig({
- output: 'server',
- adapter: node({
- mode: 'middleware',
- }),
- });
- ```
+ export default defineConfig({
+ output: 'server',
+ adapter: node({
+ mode: 'middleware',
+ }),
+ });
+ ```
* `standalone` 构建到服务器，随着入口模块的运行会自动启动。这使你可以更轻松地部署到主机，而无需任何额外的代码。
@@ -195,8 +195,9 @@ export $(cat .env.runtime) && astro build
`dist/client/_astro/` 文件夹中的资源文件由 Astro 构建。这些资源文件都是带有哈希命名的，因此可以设置长时间的缓存标头。所以在内部，适配器为这些资源添加了如下的标头信息：
- Cache-Control: public, max-age=31536000, immutable
-
+```
+Cache-Control: public, max-age=31536000, immutable
+```
## 故障排除
### SyntaxError: Named export 'compile' not found
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/partytown.mdx b/src/content/docs/zh-cn/guides/integrations-guide/partytown.mdx
index 8aa23bae1e3c3..b9c58b041afb5 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/partytown.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/partytown.mdx
@@ -131,7 +131,7 @@ export default defineConfig({
## 例子
-* [在 GitHub 上浏览使用 Astro Partytown 的项目](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\&type=code) 来获取更多例子！
+* [在 GitHub 上浏览使用 Astro Partytown 的项目](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\&type=code) 来获取更多例子！
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/preact.mdx b/src/content/docs/zh-cn/guides/integrations-guide/preact.mdx
index 1a8ee391451b7..53cd3c54d251a 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/preact.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/preact.mdx
@@ -38,7 +38,6 @@ pnpm astro add preact
### 手动安装
-
首先，使用你的包管理器安装 `@astrojs/preact`包。如果你使用的是 npm 或者不确定，可以在终端中运行以下命令：
```sh
@@ -51,7 +50,6 @@ npm install @astrojs/preact
npm install preact
```
-
然后，将这个集成应用到你的 `astro.config.* `文件中，使用 `integrations` 属性：
```diff lang="js" "preact()"
@@ -70,9 +68,9 @@ export default defineConfig({
要在 Astro 中使用你的第一个 Preact 组件，请前往我们的 [UI 框架文档][astro-ui-frameworks]。你将会了解到：
-* 📦 如何加载框架组件
-* 💧 客户端水合选项
-* 🤝 将不同框架混合和嵌套在一起的机会
+* 📦 如何加载框架组件
+* 💧 客户端水合选项
+* 🤝 将不同框架混合和嵌套在一起的机会
还可以查阅我们的 [Astro 集成文档][astro-integration] 以获取更多关于集成的信息。
@@ -156,8 +154,8 @@ export default defineConfig({
## 示例
-* 在 [Astro Preact 示例](https://github.com/withastro/astro/tree/latest/examples/framework-preact) 中展示了如何在 Astro 项目中使用交互式的 Preact 组件。
-* 在 [Astro Nanostores 示例](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) 中展示了如何在 Astro 项目中在不同组件之间共享状态，甚至可以跨不同框架共享状态。
+* 在 [Astro Preact 示例](https://github.com/withastro/astro/tree/latest/examples/framework-preact) 中展示了如何在 Astro 项目中使用交互式的 Preact 组件。
+* 在 [Astro Nanostores 示例](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) 中展示了如何在 Astro 项目中在不同组件之间共享状态，甚至可以跨不同框架共享状态。
## 故障排查
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/react.mdx b/src/content/docs/zh-cn/guides/integrations-guide/react.mdx
index f9ba91b25ae51..b27e5e9b81642 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/react.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/react.mdx
@@ -66,9 +66,9 @@ npm install react react-dom
要在 Astro 中使用你的第一个 React 组件，请前往我们的[UI 框架文档][astro-ui-frameworks]。你将了解：
-* 📦 框架组件如何被加载，
-* 💧 客户端水合选项，以及
-* 🤝 有机会将不同的框架混合和嵌套
+* 📦 框架组件如何被加载，
+* 💧 客户端水合选项，以及
+* 🤝 有机会将不同的框架混合和嵌套
## 选项
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/sitemap.mdx b/src/content/docs/zh-cn/guides/integrations-guide/sitemap.mdx
index 22da128880915..0b2af411e037a 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/sitemap.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/sitemap.mdx
@@ -234,11 +234,11 @@ export default defineConfig({
它的参数是一个 `SitemapItem` 对象，该对象具有以下属性：
-* `url`（绝对页面 URL）。这是唯一保证存在于 `SitemapItem` 上的属性。
-* `changefreq`
-* `lastmod`（ISO 格式日期，`String` 类型）
-* `priority`
-* `links`.
+* `url`（绝对页面 URL）。这是唯一保证存在于 `SitemapItem` 上的属性。
+* `changefreq`
+* `lastmod`（ISO 格式日期，`String` 类型）
+* `priority`
+* `links`.
这个 `links` 属性包含了一个包含父页面的备选页面列表 `LinkItem`。
@@ -279,8 +279,8 @@ export default defineConfig({
这个对象有两个必需的属性：
-* `defaultLocale`：`String`。它的值必须存在于 `locales` 键中之一。
-* `locales`：`Record`，键/值对。键用于查找页面路径中的语言部分。值是一个语言属性，只允许使用英文字母和连字符。
+* `defaultLocale`：`String`。它的值必须存在于 `locales` 键中之一。
+* `locales`：`Record`，键/值对。键用于查找页面路径中的语言部分。值是一个语言属性，只允许使用英文字母和连字符。
[了解更多关于语言属性的信息](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/lang)。
@@ -341,8 +341,8 @@ export default defineConfig({
## 示例
-* 官方 Astro 网站使用 Astro Sitemap 生成了 [其网站地图](https://astro.build/sitemap-index.xml)。
-* 在 GitHub 上 [浏览使用 Astro Sitemap 的项目](https://github.com/search?q=%22%40astrojs%2Fsitemap%22+path%3Apackage.json\&type=Code)。
+* 官方 Astro 网站使用 Astro Sitemap 生成了 [其网站地图](https://astro.build/sitemap-index.xml)。
+* 在 GitHub 上 [浏览使用 Astro Sitemap 的项目](https://github.com/search?q=%22%40astrojs%2Fsitemap%22+path%3Apackage.json\&type=Code)。
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/solid-js.mdx b/src/content/docs/zh-cn/guides/integrations-guide/solid-js.mdx
index 0a90db1961078..e04869fc6a98c 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/solid-js.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/solid-js.mdx
@@ -66,9 +66,9 @@ npm install solid-js
要在 Astro 使用你的 SolidJS 组件，你可以移步我们的 [UI 框架文档][astro-ui-frameworks]. 你将会了解到：
-* 📦 如何加载框架组件
-* 💧 客户端水合选项
-* 🤝 将框架混合和嵌套在一起的时机
+* 📦 如何加载框架组件
+* 💧 客户端水合选项
+* 🤝 将框架混合和嵌套在一起的时机
## 选项
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 07e3ee34ccf6b..597d7e0530f97 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx
@@ -66,9 +66,9 @@ npm install svelte
要在 Astro 使用你的 Svelte 组件，你可以移步我们的 [UI 框架文档][astro-ui-frameworks]. 你将会了解到：
-* 📦 如何加载框架组件
-* 💧 客户端合成注水选项
-* 🤝 将框架混合和嵌套在一起的时机
+* 📦 如何加载框架组件
+* 💧 客户端合成注水选项
+* 🤝 将框架混合和嵌套在一起的时机
## 疑难解答
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/tailwind.mdx b/src/content/docs/zh-cn/guides/integrations-guide/tailwind.mdx
index 9a1d652394fba..acd0daa7f4248 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/tailwind.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/tailwind.mdx
@@ -162,10 +162,10 @@ export default defineConfig({
## 例子
-* [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) 为你提供一个基础的、使用 Tailwind 进行样式设计的可运行项目
-* Astro 的主页使用 Tailwind。查看其 [Tailwind 配置文件](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts)或[示例组件](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro)
-* [Astro Ink](https://github.com/one-aalam/astro-ink)、[Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter) 和 [Creek](https://github.com/robertguss/Astro-Theme-Creek) 主题使用 Tailwind 进行样式设计
-* [浏览 GitHub 上的 Astro Tailwind 项目](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json\type=code)以获得更多的例子！
+* [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) 为你提供一个基础的、使用 Tailwind 进行样式设计的可运行项目
+* Astro 的主页使用 Tailwind。查看其 [Tailwind 配置文件](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts)或[示例组件](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro)
+* [Astro Ink](https://github.com/one-aalam/astro-ink)、[Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter) 和 [Creek](https://github.com/robertguss/Astro-Theme-Creek) 主题使用 Tailwind 进行样式设计
+* [浏览 GitHub 上的 Astro Tailwind 项目](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json\type=code)以获得更多的例子！
## 故障排除
@@ -208,9 +208,9 @@ export default {
### 其他
-* 如果你的安装似乎不成功，尝试重新启动开发服务器。
-* 如果你编辑并保存了一个文件，但没有看到你的网站有相应的更新，试着刷新页面。
-* 如果刷新页面并没有更新你的预览，或者新的安装似乎没有效果，那么就重新启动开发服务器。
+* 如果你的安装似乎不成功，尝试重新启动开发服务器。
+* 如果你编辑并保存了一个文件，但没有看到你的网站有相应的更新，试着刷新页面。
+* 如果刷新页面并没有更新你的预览，或者新的安装似乎没有效果，那么就重新启动开发服务器。
如需帮助，请查看 [Discord](https://astro.build/chat) 上的 `#support` 频道。我们友好的支持小组成员将在这里提供帮助！
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/vercel.mdx b/src/content/docs/zh-cn/guides/integrations-guide/vercel.mdx
index b2e72b4923f24..45bea250613fe 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/vercel.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/vercel.mdx
@@ -37,31 +37,31 @@ pnpm astro add vercel
如果你更喜欢手动安装适配器，请按照以下两个步骤进行：
-1. 使用你偏爱的包管理器将 Vercel 适配器添加到项目的依赖项中。如果你使用 npm 或者不确定使用什么，可以在终端中运行以下命令：
+1. 使用你偏爱的包管理器将 Vercel 适配器添加到项目的依赖项中。如果你使用 npm 或者不确定使用什么，可以在终端中运行以下命令：
- ```bash
- npm install @astrojs/vercel
- ```
+ ```bash
+ npm install @astrojs/vercel
+ ```
-2. 在你的 `astro.config.mjs` 项目配置文件中添加两行代码。
+2. 在你的 `astro.config.mjs` 项目配置文件中添加两行代码。
- ```diff lang="js"
- // astro.config.mjs
- import { defineConfig } from 'astro/config';
- + import vercel from '@astrojs/vercel/serverless';
+ ```diff lang="js"
+ // astro.config.mjs
+ import { defineConfig } from 'astro/config';
+ + import vercel from '@astrojs/vercel/serverless';
- export default defineConfig({
- + output: 'server',
- + adapter: vercel(),
- });
- ```
+ export default defineConfig({
+ + output: 'server',
+ + adapter: vercel(),
+ });
+ ```
### 目标
你可以部署到不同的目标：
-* `serverless`：在 [Node.js 函数](https://vercel.com/docs/concepts/functions/serverless-functions)内进行服务端渲染。
-* `static`：生成一个遵循 Vercel 输出格式、重定向等的静态网站。
+* `serverless`：在 [Node.js 函数](https://vercel.com/docs/concepts/functions/serverless-functions)内进行服务端渲染。
+* `static`：生成一个遵循 Vercel 输出格式、重定向等的静态网站。
你可以通过改变导入来切换目标：
@@ -306,28 +306,26 @@ export default defineConfig({
你可以使用 Vercel Edge 中间件在发送响应之前拦截请求并重定向。Vercel 中间件可以用于 Edge、SSR 和静态部署。你可能不需要安装此软件包来使用中间件。`@vercel/edge` 仅在使用某些中间件功能（例如地理位置）时需要。更多信息请参阅 [Vercel 的中间件文档](https://vercel.com/docs/concepts/functions/edge-middleware).
-1. 在你的项目根目录添加一个 `middleware.js` 文件：
-
- ```js
- // middleware.js
- export const config = {
- // 仅在 admin 路由上运行中间件
- matcher: '/admin',
- };
-
- export default function middleware(request) {
- const url = new URL(request.url);
- // 可以在这里获取 IP 位置或 cookie。
- if (url.pathname === '/admin') {
- url.pathname = '/';
- }
- return Response.redirect(url);
- }
- ```
+1. 在你的项目根目录添加一个 `middleware.js` 文件：
-2. 在本地开发时，你可以运行 `vercel dev` 来运行中间件。在生产中，Vercel 会自动处理这个。
+ ```js
+ // middleware.js
+ export const config = {
+ // 仅在 admin 路由上运行中间件
+ matcher: '/admin',
+ };
+ export default function middleware(request) {
+ const url = new URL(request.url);
+ // 可以在这里获取 IP 位置或 cookie。
+ if (url.pathname === '/admin') {
+ url.pathname = '/';
+ }
+ return Response.redirect(url);
+ }
+ ```
+2. 在本地开发时，你可以运行 `vercel dev` 来运行中间件。在生产中，Vercel 会自动处理这个。
:::caution
**尝试重写？** 目前，使用中间件重写请求仅适用于静态文件。
@@ -389,19 +387,19 @@ export default function ({ request, context }: { request: Request; context: Requ
函数：
-* 必须导出一个 **default** 函数；
-* 必须 **return** 一个 `object` ；
-* 接受一个具有 `request` 和 `context` 属性的对象；
-* `request` 的类型为 [`Request`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request);
-* `context` 的类型为 [`RequestContext`](https://vercel.com/docs/concepts/functions/edge-functions/vercel-edge-package#requestcontext);
+* 必须导出一个 **default** 函数；
+* 必须 **return** 一个 `object` ；
+* 接受一个具有 `request` 和 `context` 属性的对象；
+* `request` 的类型为 [`Request`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request);
+* `context` 的类型为 [`RequestContext`](https://vercel.com/docs/concepts/functions/edge-functions/vercel-edge-package#requestcontext);
#### 限制和约束
当你选择此功能时，需要注意一些限制：
-* Vercel Edge 中间件将始终是**第一个**接收 `Request` 的函数，并且是接收 `Response` 的最后一个函数。这是一种遵循 [Vercel 设定的边界](https://vercel.com/docs/concepts/functions/edge-middleware)的结构性约束。
-* 仅使用 `request` 和 `context` 来生成一个 `Astro.locals` 对象。像重定向等操作应该委托给 Astro 中间件。
-* `Astro.locals` **必须是可序列化的**。不这样做将导致 **运行时错误**. 这意味着你 **不能** 存储复杂类型比如 `Map`、 `function`、 `Set` 等
+* Vercel Edge 中间件将始终是**第一个**接收 `Request` 的函数，并且是接收 `Response` 的最后一个函数。这是一种遵循 [Vercel 设定的边界](https://vercel.com/docs/concepts/functions/edge-middleware)的结构性约束。
+* 仅使用 `request` 和 `context` 来生成一个 `Astro.locals` 对象。像重定向等操作应该委托给 Astro 中间件。
+* `Astro.locals` **必须是可序列化的**。不这样做将导致 **运行时错误**. 这意味着你 **不能** 存储复杂类型比如 `Map`、 `function`、 `Set` 等
## 故障排除
diff --git a/src/content/docs/zh-cn/guides/integrations-guide/vue.mdx b/src/content/docs/zh-cn/guides/integrations-guide/vue.mdx
index ae82675749d23..b82f75850e381 100644
--- a/src/content/docs/zh-cn/guides/integrations-guide/vue.mdx
+++ b/src/content/docs/zh-cn/guides/integrations-guide/vue.mdx
@@ -66,9 +66,9 @@ npm install vue
要在 Astro 使用你的 Vue 组件，你可以移步我们的 [UI 框架文档][astro-ui-frameworks]。你将会了解到：
-* 📦 如何加载框架组件
-* 💧 客户端合成注水选项
-* 🤝 将框架混合和嵌套在一起的时机
+* 📦 如何加载框架组件
+* 💧 客户端合成注水选项
+* 🤝 将框架混合和嵌套在一起的时机
## 疑难解答