docs: add Chinese translation (#1112)

* docs: add Chinese translation * docs: translate checkout-answers.md * docs: guide、leaderboard translate * docs: translate 1-projection
2026-02-10 04:43:03 -05:00 · 2024-09-24 03:16:56 +08:00
parent 23226c2dc6
commit b188b6f34f
16 changed files with 638 additions and 5 deletions
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -23,6 +23,10 @@ export const locales = {
  ru: {
    label: 'Русский',
    lang: 'ru'
+  },
+  'zh-cn': {
+    label: '简体中文',
+    lang: 'zh-CN'
  }
 };

@@ -51,7 +55,8 @@ export default defineConfig({
        es: 'Guías',
        fr: 'Guides',
        pt: 'Guias',
-        ru: 'Руководство'
+        ru: 'Руководство',
+        'zh-CN': '指南'
      }
    },
      {
@@ -64,7 +69,8 @@ export default defineConfig({
        es: 'Leaderboard',
        fr: 'Leaderboard',
        pt: 'Tabela de Classificação',
-        ru: 'Leaderboard'
+        ru: 'Leaderboard',
+        'zh-CN': '排行榜'
      }
    },
    {
@@ -76,7 +82,8 @@ export default defineConfig({
        es: 'Desafíos',
        fr: 'Challenges',
        pt: 'Desafios',
-        ru: 'Задачи'
+        ru: 'Задачи',
+        'zh-CN': '挑战'
      }
    }],
    head: [{
--- a/docs/src/components/CommentSection.astro
+++ b/docs/src/components/CommentSection.astro
@@ -3,7 +3,8 @@ import type { Props } from '@astrojs/starlight/props';

 const {lang, locale} = Astro.props;

-const shortLang = lang.split('-')[0];
+// Chinese needs to `zh-CN`
+// const shortLang =lang.split('-')[0];
 ---

 <div class="separator"></div>
@@ -19,7 +20,7 @@ const shortLang = lang.split('-')[0];
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
-        data-lang={shortLang}
+        data-lang={lang}
        data-loading="lazy"
        crossorigin="anonymous"
        async>
--- a/docs/src/content/docs/zh-cn/challenges/angular/1-projection.md
+++ b/docs/src/content/docs/zh-cn/challenges/angular/1-projection.md
@@ -0,0 +1,52 @@
+---
+title: 🟢 投影
+description: 挑战1是学习如何通过组件投影DOM元素
+author: thomas-laforge
+contributors:
+  - tomalaforge
+  - jdegand
+  - dmmishchenko
+  - kabrunko-dev
+  - svenson95
+challengeNumber: 1
+command: angular-projection
+blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
+videoLinks:
+  - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+    alt: Projection video by Arthur Lannelucq
+    flag: FR
+  - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+    alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+    flag: ES
+sidebar:
+  order: 1
+---
+
+## 信息
+
+在Angular中，内容投影是一种创建高度可定制组件的强大技术。利用和理解<b>ng-content</b>和<b>ngTemplateOutlet</b>的概念可以显著增强你创建可共享组件的能力
+
+你可以在[这里](https://angular.dev/guide/components/content-projection)了解<b>ng-content</b> 的所有内容，从简单的投影到更复杂的投影。
+
+要了解<b>ngTemplateOutlet</b>，你可以在[这里](https://angular.io/api/common/NgTemplateOutlet)找到API文档和一些基本示例。
+
+有了这两个工具，您现在就可以接受挑战了。
+
+## 说明
+
+您将从一个功能齐全的应用程序开始，该应用程序包括一个包含教师卡和学生卡的仪表盘。目标是实现城市卡。
+
+虽然应用程序可以工作，但开发人员的体验还远没有达到最佳。每次需要实现新卡时，都必须修改`card.component.ts` 。在实际项目中，该组件可以在许多应用程序之间共享。该挑战的目标是创建一个 `CardComponent` ，它可以在不做任何修改的情况下进行自定义。一旦你创建了这个组件，你就可以开始实现 `CityCardComponent` ，并确保你没有触碰 `CardComponent` 。
+
+## 约束
+
+- <b>必须</b>重构 `CardComponent` 和 `ListItemComponent`。
+- `NgFor` 指令必须声明并保持在 `CardComponent` 内。你可能想把它移到 `ParentCardComponent` ，比如 `TeacherCardComponent` 。
+- `CardComponent` 不应包含任何 `NgIf` 或 `NgSwitch` 。
+- CSS:尽量避免使用 `::ng-deep` 。寻找更好的方法来处理CSS样式。
+
+## 挑战奖励
+
+- 尝试使用新的内置控制流语法for循环和条件语句(文档在[这里](https://angular.dev/guide/templates/control-flow))
+- 使用signal API来管理组件状态(文档在[这里](https://angular.dev/guide/signals))
+- 要引用模板，请使用指令而不是魔术字符串([魔术字符串有什么问题?](https://softwareengineering.stackexchange.com/a/365344))
--- a/docs/src/content/docs/zh-cn/guides/checkout-answer.md
+++ b/docs/src/content/docs/zh-cn/guides/checkout-answer.md
@@ -0,0 +1,57 @@
+---
+title: 查看某人的回答
+description: 查看某人的回答指南
+contributors:
+  - tomalaforge
+  - gsgonzalez88
+  - 1fbr
+  - jdegand
+sidebar:
+  order: 3
+---
+
+所有Angular Challenges的答案都将以pull request (PR)的形式呈现。要查看和跟踪它们，请浏览GitHub上的**文件更改**页面。但是，如果您不熟悉界面，理解和遵循此过程可能并不简单。在许多情况下，您可能更喜欢签出分支并在您首选的IDE中检查解决方案。
+
+## 安装 GitHub CLI
+
+在[这里](https://github.com/cli/cli#installation)按照操作系统的说明操作。
+
+## 查看本地其他人的PR
+
+### 同步存储库
+
+首先，您需要同步您的分支，以确保它与分支存储库是最新的。
+
+这可以通过点击你的分支主页上的**Sync fork**按钮来实现。
+
+![Sync project header](../../../../assets/fork-sync.png)
+
+上图显示我的分支落后于主分支 8 个提交，我需要将其同步才能保持最新。
+
+![Sync project update modal](../../../../assets/sync-fork-update.png)
+
+### 本地检出查看
+
+导航到你想在本地查看的PR并获取其ID。你可以在PR的标题中找到它(如下所示)。
+
+![PR header](../../../../assets/PR-header.png)
+
+接下来，切换到项目目录中的任意终端，并运行以下命令:
+
+```bash
+gh pr checkout <ID>
+```
+
+如果你不记得这个命令，点击标题右侧的Code按钮，你可以轻松地复制/粘贴这个命令。
+
+![PR code modal](../../../../assets/PR-code-btn-modal.png)
+
+:::note[注意]
+如果命令不起作用或失败，GitHub CLI会引导你完成整个过程。
+:::
+
+🔥您现在可以在本地浏览解决方案并提供服务以测试它。🔥
+
+### 使用GitHub Codespaces检出查看
+
+你可以使用GitHub Codespaces查看任何**打开**的PR。点击code按钮后，你可以导航到codespaces标签，然后点击绿色按钮，在PR的分支上创建一个codesace。codespace初始化后，就可以启动应用了。
--- a/docs/src/content/docs/zh-cn/guides/contribute.md
+++ b/docs/src/content/docs/zh-cn/guides/contribute.md
@@ -0,0 +1,25 @@
+---
+title: 贡献
+description: 贡献指南
+contributors:
+  - tomalaforge
+  - jdegand
+sidebar:
+  order: 4
+---
+
+你可以通过以下多种方式为这个存储库做出贡献：
+
+🔥 依照以下[指示](/guides/create-challenge)创建一个新的挑战。
+
+🔥 接受挑战并提交结果(指南 [在此](/guides/resolve-challenge))。
+
+🔥 对他人提出的解决方案给予有建设性的、热情的反馈。
+
+🔥 校正文档中的拼写错误。
+
+🔥 协助翻译文档。
+
+🔥 提交问题建议新的挑战想法或报告错误。
+
+🔥 [在此](https://github.com/sponsors/tomalaforge)赞助该项目。
--- a/docs/src/content/docs/zh-cn/guides/create-challenge.md
+++ b/docs/src/content/docs/zh-cn/guides/create-challenge.md
@@ -0,0 +1,68 @@
+---
+title: 创建你自己的挑战
+description: 创建你自己的挑战指南
+contributors:
+  - tomalaforge
+  - gsgonzalez88
+  - jdegand
+sidebar:
+  order: 5
+---
+
+你有一个想法想要分享，你正在努力解决某个私人项目或业余项目中的一个有趣的bug，或者你发现的一个Angular技巧。所有这些可能性都是创建挑战并与他人分享解决方案的良好起点。
+
+如何开始创造这些挑战?
+
+## 样板设置
+
+为了简化这个过程，我创建了一个Nx生成器，它将为您设置所有样板文件。运行它最简单的方法是使用Nx控制台:转到<b>Nx Console > generate > @angular-challenges/cli - challenge</b>。
+
+或者，你也可以利用IDE的 [Nx Console extension](https://nx.dev/getting-started/editor-setup)来生成文件
+
+### 参数
+
+#### 强制参数
+
+- <b>title</b>: 你想给你的挑战的标题。
+  :::note[注意]
+  标题长度不能超过25个字符。
+  :::
+
+- <b>author</b>: 你的名字
+
+  :::note[注意]
+  你的名字应该使用烤肉串格式(如： john-doe)
+  :::
+
+  :::note[注意]
+  别忘了在以你名字命名的文件中更新你的个人信息
+  :::
+
+- <b>challengeDifficulty</b>:你认为你的挑战有多大的难度。有三个难度级别:🟢简单/🟠中等/🔴困难
+
+- <b>docRepository</b>: 你挑战的类别是Nx、Angular、Angular性能、Rxjs、NgRx、Typescript、表单或信号。
+
+#### 可选参数
+
+- <b>challengeNumber</b>: 当有挑战提交时，可以指定挑战号。(如果为空，该数字将是下一个数字)。
+- <b>directory</b>: 如果您希望您的应用程序位于 `apps` 中的特定文件夹中。
+- <b>addTest</b>: 如果您想添加测试配置。
+
+### 创建了什么?
+
+- 生成器将创建新应用程序运行所需的所有文件。所有这些文件都将创建在 `apps/${directory}/${name}` 中
+- 将在 `docs/src/content/docs/challenges/${docRepository}` 中创建一个带有最小设置的Markdown文件。
+
+## 创造挑战
+
+剩下唯一要做的就是创造挑战。 🚀
+
+:::danger[危险]
+不要忘记更新文档以介绍您的挑战并提供说明。
+:::
+
+轮到你行动了!!💪
+
+## 解决方案提交
+
+大约一周后，提供一个针对您的挑战的解决方案的pull request。
--- a/docs/src/content/docs/zh-cn/guides/faq.md
+++ b/docs/src/content/docs/zh-cn/guides/faq.md
@@ -0,0 +1,22 @@
+---
+title: 常见问题解答
+description: 回答问题
+contributors:
+  - tomalaforge
+  - jdegand
+sidebar:
+  order: 7
+---
+
+<details>
+  <summary>
+    为什么我的应用程序没有启动，或者为什么我在运行`nx serve`时在终端中遇到错误?
+  </summary>
+  
+  大多数情况下，出现这个问题是因为你的node_modules已经过时了，你需要通过运行 `npm ci` 来更新它们。
+
+如果安装失败，可以通过 `rm -rf node_modules` 或 `npx npkill` 删除node_modules文件夹，然后重新运行 `npm ci` 来解决。
+
+如果问题仍然存在，请在[这里](https://github.com/tomalaforge/angular-challenges/issues/new)报告问题。
+
+</details>
--- a/docs/src/content/docs/zh-cn/guides/getting-started.md
+++ b/docs/src/content/docs/zh-cn/guides/getting-started.md
@@ -0,0 +1,83 @@
+---
+title: 开始
+description: 关于如何开始Angular挑战的指南。
+contributors:
+  - tomalaforge
+  - 1fbr
+  - ho-ssain
+  - jdegand
+sidebar:
+  order: 1
+---
+
+要开始使用 <b>Angular Challenges</b>，请按照以下步骤操作：
+
+## 创建一个GitHub账户
+
+如果你想提交答案，你需要拥有自己的GitHub账户。此外，拥有GitHub账户总是有益的，而且是免费的。
+
+## Fork GitHub 项目
+
+导航至 [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) 在页面顶部点击 <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="mr-2 octicon octicon-repo-forked">
+<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> 按钮。这将在您的 GitHub 个人资料中创建该存储库的副本。
+
+## 将存储库克隆到您的本地机器上
+
+在您的本地计算机上选择一个目录，然后克隆此存储库。
+
+打开终端，导航到选择的目录，并输入以下命令：
+
+```bash
+git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
+```
+
+:::note[注意]
+
+你可以通过点击Angular Challenges存储库中<b>你自己的实例</b>中的<span class="github-success-btn"><> Code</span> 按钮来找到克隆URL
+
+![Header of GitHub workspace](../../../../assets/header-github.png)
+
+:::
+
+## 在您最喜欢的IDE中打开该项目
+
+使用您选择的任意集成开发环境（IDE）打开该项目。
+
+## 安装所有依赖项
+
+```bash
+npm ci
+```
+
+## 选择一个挑战
+
+您的项目现已启动并正在运行。剩下的唯一步骤是选择一个挑战 🚀
+
+每项挑战包括：
+
+- <b>Name</b>: 表示挑战的内容。
+- <b>Number</b>: 创建顺序。 这个数字没有任何特别的含义，但有助于在 GitHub Pull Request 部分进行参考。
+- <b>Badge</b>: 有助于可视化难度程度。这完全是主观的 😅
+  - 🟢 容易
+  - 🟠 中等
+  - 🔴 困难
+
+## (交替) 使用 GitHub Codespaces
+
+在你自己的 Angular Challenges 存储库<b>实例</b>中，单击代码按钮并导航到 codespaces 选项卡。
+
+![Codespaces tab](../../../../assets/codespaces.png)
+
+单击 `Create codespace on main` 按钮, 您将导航到 GitHub codespace
+
+如果您以前从未使用过 GitHub codespace，我建议您尝试这个简短的交互式 [GitHub Skills Tutorial](https://github.com/skills/code-with-codespaces).
+
+当您导航到codespace时，将出现一个提示，要求安装推荐的 `VS Code` 插件。如果您打算创建一个挑战，您可以使用 `Nx plugin` 来生成开始代码。无论哪种方式，codespace都将安装依赖项，你可以创建一个新分支，解决任何挑战，并创建一个pull request。
+
+当您推送到分支时，您不必提供 GitHub 令牌。
+
+一旦你完成，记得暂停或删除你的codesace。如果不这样做，GitHub将在30分钟后自动暂停空闲的codesace。你每个月确实有大量的免费codespace时间，但重要的是不要浪费你的分配时间
+
+在GitHub codesace中，复制和粘贴将被阻止，直到你获得许可
+
+GitHub codespace使用端口转发为项目提供服务。单击运行 `npx nx serve [project-name]` 后的提示符，导航到 `localhost:4200` 。
--- a/docs/src/content/docs/zh-cn/guides/rebase.md
+++ b/docs/src/content/docs/zh-cn/guides/rebase.md
@@ -0,0 +1,57 @@
+---
+title: 变基分支
+description: 将分支变基到最新更改的指南
+contributors:
+  - tomalaforge
+sidebar:
+  order: 6
+---
+
+有时，可能会向项目添加更改。我会尝试做出不会破坏任何东西的更改，但有时这是不可避免的。
+
+大多数情况下，您不需要变基您的解决方案，但这里有一个指南可以帮助您知道如何操作。
+
+:::note[注意]
+本指南适用于任何开源项目。
+:::
+
+## 变基分支的步骤
+
+### 同步存储库
+
+首先，你需要同步你的分支，以确保它与分支的存储库是最新的。
+
+你可以通过点击你的fork主页面上的Sync fork按钮来实现这一点。
+
+![Sync project header](../../../../assets/fork-sync.png)
+
+上图显示我的分支比主分支落后 8 个提交，我需要将其同步才能保持最新。
+
+![Sync project update modal](../../../../assets/sync-fork-update.png)
+
+### 打开终端
+
+打开您选择的任何终端，可以是您最喜欢的 IDE 中的终端，也可以是独立实例。
+
+### Git
+
+请按照以下命令重新设置本地分支的基础：
+
+- git checkout main
+- git pull
+- git checkout [你的分支]
+- git rebase main
+- 解决冲突
+
+在此步骤中，变基可能会停止，因为您的本地分支与主分支有冲突的文件。纠正它们。完成此操作后:
+
+- git add .
+- git rebase --continue
+
+如果您的分支没有任何冲突，则会显示成功消息。
+
+### 将你的工作推送到远程分支
+
+最后，将你的工作推送到GitHub:
+
+- git push -f
--- a/docs/src/content/docs/zh-cn/guides/resolve-challenge.md
+++ b/docs/src/content/docs/zh-cn/guides/resolve-challenge.md
@@ -0,0 +1,107 @@
+---
+title: 解决挑战
+description: 解决挑战指南
+contributors:
+  - tomalaforge
+  - 1fbr
+  - gsgonzalez88
+sidebar:
+  order: 2
+---
+
+在本指南中，您将学习如何解决挑战并向主GitHub存储库提交答案。
+
+## 介绍
+
+此存储库由 [Nx](https://nx.dev/getting-started/intro) 提供支持。<b>Nx</b>是一个 monorepository，允许您将多个应用程序存储在同一个工作区中。每个挑战都是一个单独的应用程序。如果您打开`apps`目录，您将找到多个目录，每个目录都与一个特定的挑战相关。每个目录都代表一个完整的独立的`Nx`应用程序。想要运行并从某个开始，请打开您的终端并运行：
+
+```bash
+npx nx serve <APPLICATION_NAME>
+```
+
+:::note[注意]
+如果您不确定 `APPLICATION_NAME` ，请打开README.md文件。 `serve` 命令写在那里，并有一个到挑战文档的链接。
+:::
+
+:::note[注意]
+
+如果您的设备已全局安装 `nx` ，则可以跳过使用 `npx`
+
+要全局安装 `nx` ，使用
+
+```bash
+npm i -g nx
+```
+
+:::
+
+## 创建 Git 分支
+
+在你开始实现解决挑战的解决方案之前，创建一个git分支来提交你的工作。
+
+```bash
+git checkout -b <BRANCH_NAME>
+```
+
+## 完成挑战
+
+按照说明来完成挑战。
+
+## 提交和推送您的工作
+
+最后一步是按照常规的[指导方针](https://www.conventionalcommits.org/en/v1.0.0/)提交工作
+
+最后，使用以下命令将工作推送到远程仓库
+
+```bash
+    git push --set-upstream origin <BRANCH_NAME>
+```
+
+:::tip[不用去记]
+你不必精确地记住这个命令。你只需要记住 `git push` ，如果这是你第一次推送这个分支， `git` 将为你提供完整的命令。
+:::
+
+## 将您的工作提交到主仓库
+
+现在，你所有的工作都位于Angular Challenges仓库的本地实例中。
+
+下一步是转到Angular的主要[挑战页面](https://github.com/tomalaforge/angular-challenges)，并创建一个新的Pull Request。
+
+GitHub应该显示一个通知头来帮助你创建拉取请求。
+
+如果不是这样，要么是你错误地执行了前面的某个步骤，要么你可以转到<b>Pull Request</b>选项卡并点击<span class="github-success-btn">New pull request</span>按钮
+
+一旦你选择了要比较的两个分支，就会看到下面的页面:
+
+![New pull request screen](../../../../assets/new-pull-request.png)
+
+在标题部分，以<b>Answer:</b>开始，然后是你的<b>挑战号</b>。之后，您可以随意添加任何您想要的内容
+
+:::danger[危险]
+这非常重要。它让别人知道你试图解决的是什么挑战。
+:::
+
+在描述部分，您可以添加您遇到的问题、麻烦或任何其他您想要分享的内容。如果你没什么可说的，可以把它空着
+
+现在你可以点击 <span class="github-success-btn">Create pull request</span>.
+
+## 获取审查
+
+为了继续提供有价值的反馈和评论，<a href="https://github.com/sponsors/tomalaforge">请在Github上支持这个项目</a>:
+
+<ul>
+<li>每次评论5美元</li>
+<li>终身评论25美元</li>
+<li>创建一个挑战/贡献终身评论</li>
+</ul>
+
+:::note[注意]
+
+您仍然可以提交您的PR加入已回答的挑战列表。你仍然可以被社区成员审查🔥
+
+欢迎大家评论和阅读其他PRs。💪
+:::
+
+:::tip[开源拥护者]
+🔥完成本教程后，您就可以为任何其他公共GitHub存储库做出贡献并提交PR。就这么简单。🔥
+:::
--- a/docs/src/content/docs/zh-cn/index.mdx
+++ b/docs/src/content/docs/zh-cn/index.mdx
@@ -0,0 +1,79 @@
+---
+title: 欢迎来到 Angular 挑战
+description: 从解决这些挑战开始，成为一名更好的Angular前端工程师.
+template: splash
+noCommentSection: true
+hero:
+  tagline: 现在就开始成为Angular专家吧!
+  image:
+    file: ../../../assets/angular-challenge.webp
+  actions:
+    - text: 开始
+      link: /zh-cn/guides/getting-started/
+      icon: right-arrow
+      variant: primary
+    - text: 进入最新的挑战
+      link: /zh-cn/challenges/signal/56-forms-and-signal/
+      icon: rocket
+    - text: 给个星星
+      link: https://github.com/tomalaforge/angular-challenges
+      icon: github
+      variant: secondary
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+import MyIcon from '../../../components/MyIcon.astro';
+
+import SubscriptionForm from '../../../components/SubscriptionForm.astro';
+
+<CardGrid>
+<Card title="56 挑战">
+    该存储库包含与<b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b>和<b>Typescript</b>相关的56个挑战。这些挑战围绕现实生活中的问题或特定功能，旨在提升您的技能。
+</Card>
+
+<Card title="订阅以获取最新挑战的通知">
+  <SubscriptionForm isNote={false} />
+</Card>
+
+<Card title="成为开源软件维护者">
+  这个存储库的一个目标是<b>降低进入开放源码软件（OSS）的门槛</b>。通过参与这些挑战，您将学习如何开始为其他任何开源项目做出贡献
+</Card>
+
+<Card title="与他人共同学习">
+  学习和实践一个新的框架总是具有挑战性的。这些挑战提供了实际使用案例，可以让你将所学的知识应用到实际中。
+  任何人都可以发表评论或提供帮助。
+  <b>
+    独自学习固然很棒，但与他人一起学习会让你走得更远。
+  </b>
+</Card>
+
+<Card title="贡献">
+  你有任何问题、有趣的bug或者想法吗？不要犹豫，{' '}不要浪费任何时间<b>创造属于你自己的挑战</b>。
+</Card>
+
+<Card title="为面试做好准备">
+  通过完成这些挑战，您将为前端面试中可能出现的任何技术问题做好准备
+</Card>
+
+<Card title="赞助">
+    这个项目是免费的，并且希望能够长期保持免费。然而，所有工作都是在我的业余时间完成的，包括创建挑战和审核合并请求（PR）。<b>赞助可以支持我，并有助于项目的成长。</b>
+</Card>
+</CardGrid>
+
+---
+
+<div class="article-footer">
+  <a
+    class="action"
+    href="https://github.com/sponsors/tomalaforge"
+    alt="Sponsor link">
+    <MyIcon name="heart" size="1.2rem" color="white" />
+    赞助这个项目
+  </a>
+</div>
+
+<div class="main-page-footer">
+  由{' '}
+  <a href="https://github.com/tomalaforge?tab=repositories">Thomas Laforge</a>
+  创建 - 由🌟 <a href="https://starlight.astro.build/">Starlight</a>驱动
+</div>
--- a/docs/src/content/docs/zh-cn/leaderboard/answers.mdx
+++ b/docs/src/content/docs/zh-cn/leaderboard/answers.mdx
@@ -0,0 +1,12 @@
+---
+title: 挑战的回答
+description: 排行榜显示已回答的挑战数量
+noCommentSection: true
+prev: false
+next: false
+---
+
+import LeaderboardAnswer from '../../../../components/leaderboard/LeaderboardAnswer.svelte';
+
+加入这个列表，通过阅读入门指南[开始](/zh-cn/guides/getting-started)你的Angular挑战之旅。
+<LeaderboardAnswer client:load />
--- a/docs/src/content/docs/zh-cn/leaderboard/challenges.mdx
+++ b/docs/src/content/docs/zh-cn/leaderboard/challenges.mdx
@@ -0,0 +1,13 @@
+---
+title: 创建的挑战数量
+description: 排行榜显示创建的挑战数量
+noCommentSection: true
+prev: false
+next: false
+---
+
+import LeaderboardChallenge from '../../../../components/leaderboard/LeaderboardChallenge.svelte';
+
+缺少挑战，创建自己的挑战并登上排行榜!阅读创建挑战指南来学习如何[创建挑战](/zh-cn/guides/create-challenge)。
+
+<LeaderboardChallenge client:load />
--- a/docs/src/content/docs/zh-cn/leaderboard/commit.mdx
+++ b/docs/src/content/docs/zh-cn/leaderboard/commit.mdx
@@ -0,0 +1,13 @@
+---
+title: 贡献数量
+description: 显示贡献数量的排行榜
+noCommentSection: true
+prev: false
+next: false
+---
+
+import LeaderboardCommit from '../../../../components/leaderboard/LeaderboardCommit.svelte';
+
+您想要改进项目，修复一个错别字，为一个挑战添加一些文档，或者翻译一个页面?这个排行榜显示了每个用户的贡献数量。这个存储库是开源的，您可以为它做出贡献。阅读贡献[贡献](/zh-cn/guides/contribute)指南开始。
+
+<LeaderboardCommit client:load />
--- a/docs/src/content/docs/zh-cn/subscription/index.mdx
+++ b/docs/src/content/docs/zh-cn/subscription/index.mdx
@@ -0,0 +1,10 @@
+---
+title: 订阅
+description: Email订阅
+noCommentSection: true
+---
+import SubscriptionForm from '../../../../components/SubscriptionForm.astro'
+
+<div>如果您想了解新的挑战，可以订阅电子邮件</div>
+<SubscriptionForm isNote={true} />
+
--- a/docs/src/content/i18n/zh-CN.json
+++ b/docs/src/content/i18n/zh-CN.json
@@ -0,0 +1,27 @@
+{
+  "page.title.challenge": "挑战",
+  "author.createdBy": "创建者",
+  "buttons.email": "Email 订阅",
+  "buttons.star": "给个星星",
+  "buttons.sponsor": "赞助",
+  "buttons.clipboardCopy": "已复制!",
+  "challenge.footer.note": "注意",
+  "challenge.footer.running": "通过执行启动项目:",
+  "challenge.footer.start": "您的 PR 标题开头必须是",
+  "challenge.footer.reminder": "提醒",
+  "challenge.footer.communityAnswers": "社区解决方案",
+  "challenge.footer.authorAnswer": "作者的解决方案",
+  "challenge.footer.blogPost": "文章",
+  "challenge.footer.video": "视频",
+  "challenge.footer.gettingStarted.title": "要完成这个挑战，开始阅读: ",
+  "challenge.footer.gettingStarted.link": "开始",
+  "challenge.footer.upvoteAnswer": "如果你喜欢，可以使用👍给答案投票",
+  "subscription.button": "订阅",
+  "subscription.email": "username@gmail.com",
+  "subscription.note.title": "注意",
+  "subscription.note.description": "此电子邮件将仅用于发送新的挑战更新",
+  "contributor.title": "贡献者",
+  "contributor.subtitle": "感谢所有帮助本文档变得更好的贡献者!",
+  "sponsors.description": "非常感谢支持这个项目的人： ",
+  "sponsors.joinButton": "加入列表"
+}