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

chore(zh-cn): replace google developers sites with CN mirror #24840

Merged
merged 7 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions files/zh-cn/.markdownlint.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,20 @@
"replace": "](https://developer.chrome.google.cn/",
"searchScope": "text",
},
{
"name": "google-dev-mirror-links",
"message": "Use the CN mirror site for developers.google.com",
"searchPattern": "/\\]\\(https:\\/\\/developers.google.com\\//g",
"replace": "](https://developers.google.cn/",
"searchScope": "text",
},
{
"name": "web-dev-mirror-links",
"message": "Use the CN mirror site for web.dev",
"searchPattern": "/\\]\\(https:\\/\\/web.dev\\//g",
"replace": "](https://web.developers.google.cn/",
"searchScope": "text",
},
{
"name": "localhost-links",
"message": "Don't use localhost for links",
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ l10n:
例如:

- [getUserMedia API](/zh-CN/docs/Web/API/MediaDevices/getUserMedia) 能被用于从用户的摄像头采集音视频。接下来开发者可以任意使用这些音视频,例如记录视频和音频、在视频会议中向其他用户广播,或者从视频中截图。
- [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 能被用于从用户的可用的任意定位设备(如 GPS)获取位置信息,然后可以再用 [Google 地图 API](https://developers.google.com/maps/) 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
- [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 能被用于从用户的可用的任意定位设备(如 GPS)获取位置信息,然后可以再用 [Google 地图 API](https://developers.google.cn/maps/) 将这些位置信息用于在一个自定义的地图上标记出用户的位置和展示用户所在地区的旅游景点。
- [Web Animations API](/zh-CN/docs/Web/API/Web_Animations_API) 能被用于制作一个网页中的动画,例如让网页中的图片移动或旋转。

## 参见
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/bfcache/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ bfcache 对于性能非常有利,因此有必要确保你的页面不会阻止

## 参见

- web.dev 上的[后退/前进缓存](https://web.dev/articles/bfcache)(2023)
- web.developers.google.cn 上的[后退/前进缓存](https://web.developers.google.cn/articles/bfcache)(2023)
4 changes: 2 additions & 2 deletions files/zh-cn/glossary/cls/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ l10n:

{{GlossarySidebar}}

**累计布局偏移**(CLS)是一种由 Google 设计为[核心 Web 要素](https://web.dev/explore/learn-core-web-vitals)之一的网站的可用性指标。
**累计布局偏移**(CLS)是一种由 Google 设计为[核心 Web 要素](https://web.developers.google.cn/explore/learn-core-web-vitals)之一的网站的可用性指标。

它可以衡量用户遇到意外布局偏移的程度。这里元素的意外偏移指不是由用户操作(如点按按钮或动画的一部分)引起的偏移。

Expand All @@ -17,4 +17,4 @@ l10n:

## 参见

- web.dev 上的 [CLS](https://web.dev/articles/cls)
- web.developers.google.cn 上的 [CLS](https://web.developers.google.cn/articles/cls)
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ fetch 元数据请求标头:

## 参见

- [使用 Fetch 元数据保护你的资源免受网络攻击](https://web.dev/articles/fetch-metadata)(web.dev
- [使用 Fetch 元数据保护你的资源免受网络攻击](https://web.developers.google.cn/articles/fetch-metadata)(web.developers.google.cn
- [Fetch 元数据请求标头的 playground](https://secmetadata.appspot.com/)(secmetadata.appspot.com)
- [所有 HTTP 标头列表](/zh-CN/docs/Web/HTTP/Headers)
- [所有 HTTP 标头列表 > Fetch 元数据请求标头](/zh-CN/docs/Web/HTTP/Headers#fetch_元数据请求标头)
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/first_contentful_paint/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ l10n:
- [`PerformancePaintTiming`](/zh-CN/docs/Web/API/PerformancePaintTiming)
- [最大内容绘制](/zh-CN/docs/Glossary/Largest_contentful_paint)
- [首次有效绘制](/zh-CN/docs/Glossary/First_meaningful_paint)
- web.dev 上的[首次内容绘制](https://web.dev/articles/fcp)
- web.developers.google.cn 上的[首次内容绘制](https://web.developers.google.cn/articles/fcp)
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/lossless_compression/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ l10n:

**无损压缩**是一类允许从压缩数据完美地重构原始数据的数据压缩算法。无损压缩方法是可逆的。无损压缩的例子包括 {{glossary("gzip_compression", "gzip")}}、{{glossary("Brotli_compression", "brotli")}}、{{glossary("Zstandard compression", "Zstandard")}}、{{glossary("WebP")}} 和 {{glossary("PNG")}}。

另一方面,{{glossary("Lossy compression", "有损压缩")}}使用不精确的近似值(从原始文件中丢弃一些数据),使其成为一种不可逆转的压缩方法。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
另一方面,{{glossary("Lossy compression", "有损压缩")}}使用不精确的近似值(从原始文件中丢弃一些数据),使其成为一种不可逆转的压缩方法。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.cn/speed/webp/docs/compression)。

## 参见

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/lossy_compression/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ l10n:

**有损压缩**,又称为不可逆压缩,是一种数据压缩方法,它使用不精确的近似值和部分数据丢弃来表示内容。简单来说:有损压缩导致原始文件中的数据丢失,可能导致质量下降。这种压缩过程是不可逆的;一旦对内容进行了有损压缩,就无法将内容恢复到原始状态。因此,经过有损压缩的内容通常不应再进一步编辑。

有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式(如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types))中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式(如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types))中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.cn/speed/webp/docs/compression)。

![有损压缩的图像](2019-11-18.png)

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/progressive_web_apps/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ l10n:
## 参见

- MDN 上的[渐进式 Web 应用程序](/zh-CN/docs/Web/Progressive_web_apps)
- web.dev 上的[渐进式 Web 应用程序](https://web.dev/explore/progressive-web-apps)
- web.developers.google.cn 上的[渐进式 Web 应用程序](https://web.developers.google.cn/explore/progressive-web-apps)
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/seo/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@ SEO 方法分为三大类:
## 参见

- 维基百科上的 [SEO](https://zh.wikipedia.org/wiki/搜尋引擎最佳化)
- [Google 搜索中心](https://developers.google.com/search/docs)
- [Google 搜索中心](https://developers.google.cn/search/docs)
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/time_to_interactive/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ TTI 是通过利用[长任务 API](/zh-CN/docs/Web/API/PerformanceLongTaskTiming

- Web 孵化器社区组关于 [TTI 的定义](https://github.com/WICG/time-to-interactive)
- Radimir Bitsov 写的[可交互时间——以人为本的单位](https://calibreapp.com/blog/time-to-interactive)
- [计算 TTI](https://web.dev/articles/user-centric-performance-metrics#tracking_tti)
- [计算 TTI](https://web.developers.google.cn/articles/user-centric-performance-metrics)
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,7 @@ Firefox 的 JavaScript 调试器有三个面板。
了解不同浏览器中的 JavaScript 调试器:

- [Firefox JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)
- [Microsoft Edge 调试器](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/devtools-guide/debugger)
- [Chrome 调试器](https://developers.google.com/web/tools/chrome-devtools/javascript/)
- [Chrome 调试器](https://developer.chrome.google.cn/docs/devtools/javascript/)
- [Safari 调试器](https://developer.apple.com/safari/tools/)

## JavaScript 控制台
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ say=Hi&to=Mom

#### 查看 HTTP 请求

HTTP 请求永远不会显示给用户 (如果你想要看到它们,你需要使用诸如[Firefox Network Monitor](/zh-CN/docs/Tools/Network_Monitor)或[Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)之类的工具)。例如,你的表单数据将显示在 Chrome 网络选项卡中:
HTTP 请求永远不会显示给用户 (如果你想要看到它们,你需要使用诸如 [Firefox 网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)或 [Chrome 开发者工具](https://developer.chrome.google.cn/docs/devtools/)之类的工具)。例如,你的表单数据将显示在 Chrome 网络选项卡中:

1. 按下 F12
2. 选择 "Network"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ l10n:

文件名也会映射为 URL。例如,假设在你的服务器提供服务的根目录下有一个名为 `my_file.html` 的文件,根据大多数 Web 服务器的默认行为,一般是可以通过 `https://example.com/my_file.html` 访问这个文件。一些服务器会将文件名中的空格替换为“%20”(URL 中空格的字符代码),在假定文件名和 URL 完全匹配的情况下,会出现一些难以捉摸的服务器端逻辑错误。

也建议文件名使用连字符分割单词,而不是下划线:对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符,但不会把下划线当作单词的分隔符](https://developers.google.com/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况,但那是额外的工作并且文件名和 URL 不一致更容易出错。
也建议文件名使用连字符分割单词,而不是下划线:对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符,但不会把下划线当作单词的分隔符](https://developers.google.cn/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况,但那是额外的工作并且文件名和 URL 不一致更容易出错。

基于这些原因,最好养成文件夹名和文件名使用小写、不带空格、用连字符分隔单词的习惯,至少直到你清楚自己在做什么的那个时候。那样的话,在接下来的旅程中,你遇到的问题会更少。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ _你的网站会是什么样子_?讨论的是你编写代码之前不得不为

### 字体

和图片一样,很多字体都受版权保护,也就是说,你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.com/fonts) 是 Google 旗下的提供许多字体许可的 Web 服务。
和图片一样,很多字体都受版权保护,也就是说,你不可以在你的网站上随意使用它们。[Google Fonts](https://developers.google.cn/fonts) 是 Google 旗下的提供许多字体许可的 Web 服务。

选好字体后,你有两种主要的使用方式:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -735,7 +735,7 @@ self.addEventListener("fetch", (e) => {
});
```

这就是我们的 service worker。你可以使用它们处理更多的负载——有关详细信息,请参阅 [service worker 手册](https://github.com/mdn/serviceworker-cookbook/)。感谢 Paul Kinlan 的[为你的 Web 应用程序添加 service worker 和离线浏览](https://developers.google.com/web/fundamentals/codelabs/offline/)一文给予这一简单示例的启发。
这就是我们的 service worker。你可以使用它们处理更多的负载——有关详细信息,请参阅 [service worker 手册](https://github.com/mdn/serviceworker-cookbook/)。感谢 Paul Kinlan 的[为你的 Web 应用程序添加 service worker 和离线浏览](https://developers.google.cn/codelabs/pwa-training/pwa03--going-offline#0)一文给予这一简单示例的启发。

#### 测试离线示例

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ _图片来自:[过载的插头接口](https://www.flickr.com/photos/easy-pics/
客户端 JavaScript 中有很多可用的 API。它们本身并不属于 JavaScript 语言,却建立在核心 JavaScript 语言之上,为使用 JavaScript 代码提供额外的超强能力。它们通常分为两类:

- **浏览器 API** 内置于 Web 浏览器中,能从浏览器和电脑周边环境中提取数据,并用来做有用的复杂的事情。例如,[Web 音频 API](/zh-CN/docs/Web/API/Web_Audio_API) 为在浏览器中处理音频提供了 JavaScript 结构——获取音轨、改变音量、应用特效等。在后台,浏览器实际上使用了一些复杂的低级代码(如 C++ 或 Rust)来进行实际的音频处理。但同样,这种复杂性已被应用程序接口抽象化。
- **第三方 API** 缺省情况下不会内置于浏览器中,通常必须在 Web 中的某个地方获取代码和信息。例如,[Google Maps API](https://developers.google.com/maps/documentation/javascript) 使你能够执行诸如在网站上显示办公室的交互式地图之类的操作。它提供一系列特殊的结构,可以用来查询 Google 地图服务并返回特定信息。
- **第三方 API** 缺省情况下不会内置于浏览器中,通常必须在 Web 中的某个地方获取代码和信息。例如,[Google Maps API](https://developers.google.cn/maps/documentation/javascript) 使你能够执行诸如在网站上显示办公室的交互式地图之类的操作。它提供一系列特殊的结构,可以用来查询 Google 地图服务并返回特定信息。

![打开 Firefox 浏览器主页时的浏览器截图。默认情况下,浏览器内置了应用程序接口。第三方应用程序接口并非默认内置在浏览器中。要使用它们,必须从网络上的某个地方获取它们的代码和信息。](browser.png)

Expand Down Expand Up @@ -83,10 +83,10 @@ _图片来自:[过载的插头接口](https://www.flickr.com/photos/easy-pics/

第三方 API 种类繁多; 下列是一些比较流行的你可能迟早会用到的第三方 API:

- 地图 API(例如 [Mapquest](https://developer.mapquest.com/) 和 [Google Maps API](https://developers.google.com/maps/)),允许你在网页上对地图执行多种操作。
- 地图 API(例如 [Mapquest](https://developer.mapquest.com/) 和 [Google Maps API](https://developers.google.cn/maps/)),允许你在网页上对地图执行多种操作。
- [Facebook API 套件](https://developers.facebook.com/docs/),允许你将 Facebook 生态系统中的各个部分应用到你的应用并使之受益,比如说它提供了通过 Facebook 账户登录、接受应用内支付、推送有针对性的广告活动等功能。
- [Telegram API](https://core.telegram.org/api),允许你在网站中潜入来自 Telegram 频道的内容,此外还提供了对机器人的支持。
- [YouTube API](https://developers.google.com/youtube/),允许你将 Youtube 上的视频嵌入到网站中去,同时提供搜索 Youtube、创建播放列表等众多功能。
- [YouTube API](https://developers.google.cn/youtube/),允许你将 Youtube 上的视频嵌入到网站中去,同时提供搜索 Youtube、创建播放列表等众多功能。
- [Pinterest API](https://developers.pinterest.com/),提供了管理 Pinterest 图板和图钉的工具,以便将它们纳入你的网站。
- [Twilio API](https://www.twilio.com/docs),为你的应用提供了针对语音通话和视频聊天的框架,以及从你的 app 发送短信息或多媒体信息等诸多功能。
- [Disqus API](https://disqus.com/api/docs/),提供了一个可集成到网站中的评论平台。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ l10n:

## 什么是第三方 API?

第三方 API 是由第三方(通常是 Facebook、Twitter 或 Google 等公司)提供的 API,允许你通过 JavaScript 访问其功能,并在你自己的站点上使用它。最显著的一个示例就是运用 [Google 地图 API](https://developers.google.com/maps/) 在你的网页上展示自定义地图。
第三方 API 是由第三方(通常是 Facebook、Twitter 或 Google 等公司)提供的 API,允许你通过 JavaScript 访问其功能,并在你自己的站点上使用它。最显著的一个示例就是运用 [Google 地图 API](https://developers.google.cn/maps/) 在你的网页上展示自定义地图。

让我们再来看看这个[简单的 Mapquest API 示例](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest),并用它来说明第三方 API 接口与浏览器 API 接口的区别。

Expand Down Expand Up @@ -379,16 +379,16 @@ function displayResults(json) {

我们还为你构建了另一个示例供你学习——请参阅我们的 [YouTube 视频搜索示例](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/)。这个示例使用了两个相关的 API:

- [YouTube Data API](https://developers.google.com/youtube/v3/docs/) 搜索 YouTube 视频并返回结果。
- [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) 在 IFrame 视频播放器中显示返回的视频示例,以便你可以观看它们。
- [YouTube Data API](https://developers.google.cn/youtube/v3/docs/) 搜索 YouTube 视频并返回结果。
- [YouTube IFrame Player API](https://developers.google.cn/youtube/iframe_api_reference) 在 IFrame 视频播放器中显示返回的视频示例,以便你可以观看它们。

这个示例很有趣,因为它展示了两个相关的第三方 API 被一起使用来构建一个应用程序。第一个是一个 RESTful API,而第二个是一个更像 Mapquest 的 API(带有 API 相关的方法等)。值得一提的是,这两个 API 都需要将 JavaScript 库应用到页面中。RESTful API 有可用的函数来处理 HTTP 请求并返回结果。

我们不会在本文中详细说明这个示例——源代码中包含了详细的注释,解释了它的工作原理。

要运行它,你需要:

- 阅读 [YouTube Data API 概述](https://developers.google.com/youtube/v3/getting-started)文档。
- 阅读 [YouTube Data API 概述](https://developers.google.cn/youtube/v3/getting-started)文档。
- 访问[启用的 API](https://console.cloud.google.com/apis/enabled)页面,并在 API 列表中确保 YouTube Data API v3 的状态为 ON。
- 从 [Google Cloud](https://cloud.google.com/) 获取 API 密钥。
- 在源代码中找到字符串 `ENTER-API-KEY-HERE`,并用你的 API 密钥替换它。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ API 通常分为两类。
**第三方 API** 并没有默认嵌入浏览器中,一般要从网上取得它们的代码和信息。比如:

- [Twitter API](https://developer.twitter.com/en/docs)、[新浪微博 API](https://open.weibo.com/) 可以在网站上展示最新推文之类。
- [谷歌地图 API](https://developers.google.com/maps/)、[OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)、[高德地图 API](https://lbs.amap.com/) 可以在网站嵌入定制的地图等等。
- [谷歌地图 API](https://developers.google.cn/maps/)、[OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)、[高德地图 API](https://lbs.amap.com/) 可以在网站嵌入定制的地图等等。

> [!NOTE]
> 这些 API 为进阶内容,本模块中不会涉及,更多信息请参考:[客户端 web API 模块](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs)。
Expand Down
Loading
Loading