@@ -10,7 +10,7 @@ i18nReady: true
10
10
---
11
11
import PackageManagerTabs from ' ~/components/tabs/PackageManagerTabs.astro' ;
12
12
13
- 此 ** [ Astro 集成] [ astro-integration ] ** 允许你在 Astro 项目中启用 [ Partytown] ( https://partytown.builder.io / ) 。
13
+ 此 ** [ Astro 集成] [ astro-integration ] ** 允许你在 Astro 项目中启用 [ Partytown] ( https://partytown.qwik.dev / ) 。
14
14
15
15
## 为什么是 Astro Partytown
16
16
@@ -106,11 +106,11 @@ export default defineConfig({
106
106
});
107
107
```
108
108
109
- 这与 [ Partytown 配置对象] ( https://partytown.builder.io /configuration ) 相对应。
109
+ 这与 [ Partytown 配置对象] ( https://partytown.qwik.dev /configuration ) 相对应。并且所有选项都可以在 ` partytown.config ` 中设置。本页描述了适用于 Astro 项目的常见配置选项 。
110
110
111
- ### config. debug
111
+ ### 启用 debug 模式
112
112
113
- Partytown 自带一个 ` debug ` 模式;通过向 ` config.debug ` 传入 ` true ` 或 ` false ` 来启用或禁用它。如果启用了[ ` debug ` 模式] ( https://partytown.builder.io /debugging ) ,它会向浏览器控制台输出详细的日志。
113
+ Partytown 自带一个 ` debug ` 模式;通过向 ` config.debug ` 传入 ` true ` 或 ` false ` 来启用或禁用它。如果启用了[ ` debug ` 模式] ( https://partytown.qwik.dev /debugging ) ,它会向浏览器控制台输出详细的日志。
114
114
115
115
如果不设置此选项,在 [ dev] ( /zh-cn/reference/cli-reference/#astro-dev ) 或 [ preview] ( /zh-cn/reference/cli-reference/#astro-preview ) 模式下,` debug ` 模式默认启用。
116
116
@@ -126,13 +126,13 @@ export default defineConfig({
126
126
});
127
127
```
128
128
129
- ### config.forward
129
+ ### 转发变量
130
130
131
131
第三方脚本通常会向 ` window ` 对象添加变量,以便你可以在整个站点与它们通信。但是当一个脚本在 web worker 中加载时,它无法访问全局的 ` window ` 对象。
132
132
133
133
为了解决这个问题,Partytown 可以“打补丁”变量到全局 window 对象并将它们转发到适当的脚本。
134
134
135
- 你可以使用 ` config.forward ` 选项指定要转发的变量。[ 在 Partytown 的文档中了解更多信息。] ( https://partytown.builder.io /forwarding-events )
135
+ 你可以使用 ` config.forward ` 选项指定要转发的变量。[ 在 Partytown 的文档中了解更多信息。] ( https://partytown.qwik.dev /forwarding-events )
136
136
137
137
``` js title="astro.config.mjs" {7}
138
138
export default defineConfig ({
@@ -148,8 +148,63 @@ export default defineConfig({
148
148
});
149
149
```
150
150
151
+ ### 代理请求
152
+
153
+ 某些第三方脚本可能需要通过运行在 service worker 内的 ` config.resolveUrl() ` 进行[ 代理] ( https://partytown.qwik.dev/proxying-requests/ ) 。你可以设置此配置选项以检查特定 URL,并可选择返回一个被代理的 URL:
154
+
155
+ ``` js title="astro.config.mjs" {7-13}
156
+ export default defineConfig ({
157
+ // ...
158
+ integrations: [
159
+ partytown ({
160
+ // 示例:代理 Facebook 的分析脚本
161
+ config: {
162
+ resolveUrl : (url ) => {
163
+ const proxyMap = {
164
+ " connect.facebook.net" : " my-proxy.com"
165
+ }
166
+ url .hostname = proxyMap[url .hostname ] || url .hostname ;
167
+ return url;
168
+ },
169
+ }
170
+ }),
171
+ ],
172
+ });
173
+ ```
174
+
175
+ 但是由于 ` config ` 对象在发送到客户端时会被序列化,因此对传入配置的函数存在一些限制:
176
+
177
+ - 函数不能引用函数作用域之外的任何内容。
178
+ - 函数只能用 JavaScript 编写。
179
+
180
+ 在一些高级用例中,你可能需要在初始化 Partytown 时向此函数传递数据。为此,你可以将 ` resolveUrl() ` 设置在 ` window.partytown ` 上,而不是集成配置中:
181
+
182
+ ``` astro title="Head.astro" {8-14}
183
+ ---
184
+ const proxyMap = {
185
+ "connect.facebook.net": "my-proxy.com"
186
+ };
187
+ ---
188
+ <script is:inline set:html={`
189
+ window.partytown = {
190
+ resolveUrl: (url) => {
191
+ const proxyMap = ${JSON.stringify(proxyMap)};
192
+ url.hostname = proxyMap[url.hostname] || url.hostname;
193
+ return url;
194
+ },
195
+ };
196
+ `} />
197
+ ```
198
+
199
+ 注意,如果你用两种方式同时设置了某个属性,集成配置将覆盖 ` window.partytown ` 。
200
+
151
201
## 例子
152
202
153
203
* [ 在 GitHub 上浏览使用 Astro Partytown 的项目] ( https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json\& type=code ) 来获取更多例子!
154
204
205
+ ## 社区资源
206
+
207
+ * [ 在 Astro 中使用 Partytown 实现 Google Tag Manager] ( https://medium.com/@tagperfect/implementing-google-tag-manager-with-partytown-js-in-astro-my-modest-experience-983388907b35 )
208
+ * [ 在 Astro 中使用 Partytown 优化 Google Analytics] ( https://ricostacruz.com/posts/google-analytics-in-astro )
209
+
155
210
[ astro-integration ] : /zh-cn/guides/integrations-guide/
0 commit comments