Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-cn): update integration docs #4821

Merged
merged 11 commits into from
Sep 28, 2023
130 changes: 130 additions & 0 deletions src/content/docs/zh-cn/guides/integrations-guide/cloudflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,92 @@ export default defineConfig({

请注意,此适配器不支持使用 [Cloudflare 页面中间件](https://developers.cloudflare.com/pages/platform/functions/middleware/)。Astro 将会把 [Astro 中间件](/zh-cn/guides/middleware/) 打包到每个页面中。

### `routes.strategy`

`routes.strategy: "auto" | "include" | "exclude"`

默认值:`"auto"`

在没有提供自定义 `_routes.json` 的情况下决定 `routes.json` 该如何被生成。

这有三个选项可供选择:

* **`"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`

`routes.include: string[]`

默认值:`[]`

如果你想使用自动生成的 `_routes.json`,但又想要包含额外的路由(例如,当你在 `functions` 文件夹中有自定义函数时),那么你可以使用 `routes.include` 选项将额外的路由添加到 `include` 数组中。

### `routes.exclude`

`routes.exclude: string[]`

默认值:`[]`

如果你想要使用自动生成的 `_routes.json`,但又想要排除其他的路由,那么你可以使用 `routes.exclude` 选项将额外的路由到添加 `exclude` 数组中。

以下示例自动生成了 `_routes.json`,同时包含和排除额外的路由。请注意,如果你在 `functions` 文件夹中有自定义函数,那么这些函数将不会被 Astro 处理。

```diff
// astro.config.mjs
export default defineConfig({
adapter: cloudflare({
mode: 'directory',
+ routes: {
+ strategy: 'include',
+ include: ['/users/*'], // 由自定义函数处理:functions/users/[id].js
+ exclude: ['/users/faq'], // 由静态页面处理:pages/users/faq.astro
+ },
}),
});
```

## 启用预览

为了使预览功能正常工作,你需要安装 `wrangler`
Expand Down Expand Up @@ -204,6 +290,50 @@ export default defineConfig({
});
```

## Wasm 模块导入

`wasmModuleImports: boolean`

默认值:`false`

是否将 `.wasm` 文件[直接作为 ES 模块](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration)导入。

将 `wasmModuleImports: true` 添加到 `astro.config.mjs` 以在 Cloudflare 构建和 Astro 开发服务器中启用该功能。

```js ins={7}
// astro.config.mjs
import {defineConfig} from "astro/config";
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
adapter: cloudflare({
wasmModuleImports: true
}),
output: 'server'
})
```

启用之后,你可以在 Astro 中通过 `.wasm?module` 语法来导入一个 WebAssembly。

以下是导入一个 Wasm 模块的示例,该模块返回了请求的数字参数的和:

```javascript
// pages/add/[a]/[b].js
import mod from '../util/add.wasm?module';

// 预先初始化以共享同一个模块
const addModule: any = new WebAssembly.Instance(mod);

export async function GET(context) {
const a = Number.parseInt(context.params.a);
const b = Number.parseInt(context.params.b);
return new Response(`${addModule.exports.add(a, b)}`);
}
```

虽然这个例子很简单,但是 Wasm 可以用来加速在不涉及大量 I/O 的情况下的计算密集型操作,比如嵌入图像处理库。


## 标头、重定向和函数调用路由

Cloudflare 支持添加自定义 [标头](https://developers.cloudflare.com/pages/platform/headers/)、配置静态 [重定向](https://developers.cloudflare.com/pages/platform/redirects/) 和定义哪些路由应该 [调用函数](https://developers.cloudflare.com/pages/platform/functions/routing/#function-invocation-routes)。Cloudflare 在构建输出目录中查找 `_headers`、`_redirects` 和 `_routes.json` 文件来配置这些功能。这意味着它们应该放在 Astro 项目的 `public/` 目录中。
Expand Down
2 changes: 0 additions & 2 deletions src/content/docs/zh-cn/guides/integrations-guide/node.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ category: adapter
i18nReady: true
---

import Video from '~/components/Video.astro';

此适配器允许 Astro 将你的 SSR 站点部署到 Node 目标。

## 为什么是 Astro Node.js
Expand Down
20 changes: 20 additions & 0 deletions src/content/docs/zh-cn/guides/integrations-guide/tailwind.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,26 @@ export default defineConfig({
});
```

然后,在你的项目根目录下创建一个 `tailwind.config.cjs` 文件。你可以使用以下命令来生成一个基本的配置文件:

```sh
npx tailwindcss init
```

最后,可将如下基本配置添加到你的 `tailwind.config.cjs` 文件中:

```js ins={4} "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
};
```

## 使用

当你安装集成后,Tailwind 的实用类应该马上就可以使用了。前往 [Tailwind 文档](https://tailwindcss.com/docs/utility-first)学习如何使用 Tailwind,如果你看到一个你想尝试的实用类,就把它添加到你项目的任何 HTML 元素中去吧!
Expand Down