refactor: ♻️ 重构汉化

2026-04-04 20:39:02 +08:00 · 2026-02-10 14:18:45 +08:00
parent f01955a390
commit 07e969303c
442 changed files with 1229 additions and 965 deletions
--- a/.eslintcache
+++ b/.eslintcache
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,74 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook.exe -h >/dev/null 2>&1
+  then
+    lefthook.exe "$@"
+  elif lefthook.bat -h >/dev/null 2>&1
+  then
+    lefthook.bat "$@"
+  elif D:\Repositories\Self\component-party\node_modules\.pnpm\lefthook-windows-x64@2.0.13\node_modules\lefthook-windows-x64\bin\lefthook.exe -h >/dev/null 2>&1
+  then
+    D:\Repositories\Self\component-party\node_modules\.pnpm\lefthook-windows-x64@2.0.13\node_modules\lefthook-windows-x64\bin\lefthook.exe "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package lefthook >/dev/null 2>&1
+    then
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    elif devbox run lefthook -h >/dev/null 2>&1
+    then
+      devbox run lefthook "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "pre-commit" "$@"
--- a/.husky/prepare-commit-msg
+++ b/.husky/prepare-commit-msg
@@ -0,0 +1,74 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook.exe -h >/dev/null 2>&1
+  then
+    lefthook.exe "$@"
+  elif lefthook.bat -h >/dev/null 2>&1
+  then
+    lefthook.bat "$@"
+  elif D:\Repositories\Self\component-party\node_modules\.pnpm\lefthook-windows-x64@2.0.13\node_modules\lefthook-windows-x64\bin\lefthook.exe -h >/dev/null 2>&1
+  then
+    D:\Repositories\Self\component-party\node_modules\.pnpm\lefthook-windows-x64@2.0.13\node_modules\lefthook-windows-x64\bin\lefthook.exe "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook.exe" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package lefthook >/dev/null 2>&1
+    then
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    elif devbox run lefthook -h >/dev/null 2>&1
+    then
+      devbox run lefthook "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "prepare-commit-msg" "$@"
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,95 @@
+# Component Party 中文版 - 项目维护指南
+
+## 项目概述
+
+本项目是 [component-party.dev](https://github.com/matschik/component-party.dev) 的中文汉化 fork，用于对比不同 JavaScript 框架的语法差异，面向中文母语开发者。
+
+## 分支策略
+
+- **main**: 与上游 `matschik/component-party.dev` 的 main 分支保持完全同步，不做任何修改
+- **deploy**: 基于 main 的汉化分支，包含所有中文翻译，用于部署
+- **upstream**: 远程仓库，指向 `https://github.com/matschik/component-party.dev.git`
+
+## 同步上游与汉化工作流
+
+```bash
+# 1. 同步上游到 main
+git fetch upstream
+git checkout main
+git merge upstream/main --ff-only
+git push origin main
+
+# 2. 将 main 合并到 deploy
+git checkout deploy
+git merge main
+# 解决冲突（通常是代码内容冲突，不会有 rename 冲突）
+# 汉化新增内容
+git push origin deploy
+```
+
+## 汉化架构（重要）
+
+汉化分为两层，设计目标是最小化与上游的合并冲突：
+
+### 第一层：标题翻译（零冲突）
+
+- 翻译映射文件: `i18n/zh-CN.json`
+- 构建脚本修改: `build/lib/generateContent.ts` 中的 `dirNameToTitle()` 函数
+- **不修改 content 目录名**，通过映射表将英文标题转换为中文
+- 上游新增的 section/snippet 会自动显示英文原文，只需在 JSON 中补充翻译即可
+
+### 第二层：代码内容汉化（可控冲突）
+
+- 直接修改 `content/` 目录下各框架代码文件中的**字符串字面量**
+- **不改文件名和路径**，只改文件内容
+- 翻译规则参考 `i18n/zh-CN.json` 中的约定
+
+### UI 文案汉化
+
+- `src/components/Header.svelte` - 站点标题
+- `src/Index.svelte` - 页面文案、SEO meta、空状态提示等
+
+## 常用翻译对照表
+
+| 英文                      | 中文           |
+| ------------------------- | -------------- |
+| John                      | 张三           |
+| Jane                      | 李四           |
+| Hello {name}              | 你好 {name}    |
+| Hello world               | 你好，世界     |
+| red/green/blue            | 红/绿/蓝       |
+| red/orange/green (交通灯) | 红灯/黄灯/绿灯 |
+| Counter:                  | 计数器:        |
+| Page title:               | 页面标题:      |
+| Current time:             | 当前时间:      |
+| Are you happy?            | 你快乐吗?      |
+| YES / NO                  | 是的！/ 不是！ |
+| Click me!                 | 点我!          |
+| unicorn42                 | abcdefg        |
+
+完整对照见 `i18n/zh-CN.json`。
+
+## 技术栈
+
+- 包管理器: pnpm
+- 框架: Svelte 5 + Vite
+- 构建: `content/` 目录由 Vite 插件在 `buildStart` 时扫描生成到 `src/generatedContent/`
+- `src/generatedContent/` 是自动生成的，不要手动编辑，不需要提交
+
+## 关键文件
+
+| 文件                                 | 说明                                       |
+| ------------------------------------ | ------------------------------------------ |
+| `i18n/zh-CN.json`                    | 标题翻译映射 + UI 文案翻译                 |
+| `build/lib/generateContent.ts`       | 内容生成脚本（已添加翻译查表逻辑）         |
+| `build/generateContentVitePlugin.ts` | Vite 插件，负责触发内容生成                |
+| `content/`                           | 各框架代码示例（汉化在此目录的文件内容中） |
+| `frameworks.ts`                      | 框架定义列表                               |
+| `src/Index.svelte`                   | 主页面组件                                 |
+| `src/components/Header.svelte`       | 头部组件                                   |
+
+## 注意事项
+
+- content 目录下的文件**只改内容不改路径**，这是避免合并地狱的核心原则
+- 翻译只针对用户可见的字符串字面量，不翻译变量名、API 名、组件名
+- 上游可能会新增框架目录（如 emberPolaris、svelte5），合并后需要检查新文件是否需要汉化
--- a/README.md
+++ b/README.md
@@ -240,44 +240,6 @@ How do we solve this ? Developers love having framework overview by examples. It

 </details>
    
-<details>
-  <summary>
-    <img width="18" height="18" src="public/framework/ember.svg" />
-    <b>Ember Octane</b>
-    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
-  </summary>
-
- [x] Reactivity
-  - [x] Declare state
-  - [x] Update state
-  - [x] Computed state
- [x] Templating
-  - [x] Minimal template
-  - [x] Styling
-  - [x] Loop
-  - [x] Event click
-  - [x] Dom ref
-  - [x] Conditional
- [x] Lifecycle
-  - [x] On mount
-  - [x] On unmount
- [x] Component composition
-  - [x] Props
-  - [x] Emit to parent
-  - [x] Slot
-  - [x] Slot fallback
-  - [x] Context
- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
- [ ] Webapp features
-  - [ ] Render app
-  - [x] Fetch data
-
-</details>
-
 <details>
  <summary>
    <img width="18" height="18" src="public/framework/ember.svg" />
@@ -316,6 +278,44 @@ How do we solve this ? Developers love having framework overview by examples. It

 </details>
    
+<details>
+  <summary>
+    <img width="18" height="18" src="public/framework/ember.svg" />
+    <b>Ember Octane</b>
+    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
+  </summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [ ] Webapp features
+  - [ ] Render app
+  - [x] Fetch data
+
+</details>
+    
 <details>
  <summary>
    <img width="18" height="18" src="public/framework/solid.svg" />
--- a/build/lib/generateContent.ts
+++ b/build/lib/generateContent.ts
@@ -13,6 +13,7 @@ import {
  markdownToHighlightedHtml,
 } from "./highlighter.ts";
 import kebabCase from "just-kebab-case";
+import i18n from "../../i18n/zh-CN.json" with { type: "json" };

 interface File {
  fileName: string;
@@ -349,7 +350,12 @@ export default async function generateContent(
 }

 function dirNameToTitle(dirName: string): string {
-  return capitalize(dirName.split("-").splice(1).join(" "));
+  const title = capitalize(dirName.split("-").splice(1).join(" "));
+  const sectionTranslation = (i18n.sections as Record<string, string>)[title];
+  if (sectionTranslation) return sectionTranslation;
+  const snippetTranslation = (i18n.snippets as Record<string, string>)[title];
+  if (snippetTranslation) return snippetTranslation;
+  return title;
 }

 function capitalize(string: string): string {
--- a/content/1-reactivity/1-declare-state/alpine/index.html
+++ b/content/1-reactivity/1-declare-state/alpine/index.html
@@ -1 +1 @@
-<h1 x-data="{ name: 'John' }" x-text="name"></h1>
+<h1 x-data="{ name: '张三' }" x-text="name"></h1>
--- a/content/1-reactivity/1-declare-state/angular/name.component.ts
+++ b/content/1-reactivity/1-declare-state/angular/name.component.ts
@@ -2,10 +2,10 @@ import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-name",
-  template: `<h1>Hello {{ name }}</h1>`,
+  template: `<h1>你好 {{ name }}</h1>`,
 })
 export class NameComponent {
-  name = "John";
+  name = "张三";
 }

@NgModule({
--- a/content/1-reactivity/1-declare-state/angularRenaissance/name.component.ts
+++ b/content/1-reactivity/1-declare-state/angularRenaissance/name.component.ts
@@ -2,8 +2,8 @@ import { Component, signal } from "@angular/core";

@Component({
  selector: "app-name",
-  template: `<h1>Hello {{ name() }}</h1>`,
+  template: `<h1>你好 {{ name() }}</h1>`,
 })
 export class NameComponent {
-  name = signal("John");
+  name = signal("张三");
 }
--- a/content/1-reactivity/1-declare-state/aurelia1/name.html
+++ b/content/1-reactivity/1-declare-state/aurelia1/name.html
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello ${name}</h1>
+  <h1>你好 ${name}</h1>
 </template>
--- a/content/1-reactivity/1-declare-state/aurelia1/name.ts
+++ b/content/1-reactivity/1-declare-state/aurelia1/name.ts
@@ -1,3 +1,3 @@
 export class Name {
-  name = "John";
+  name = "张三";
 }
--- a/content/1-reactivity/1-declare-state/aurelia2/name.html
+++ b/content/1-reactivity/1-declare-state/aurelia2/name.html
@@ -1 +1 @@
-<h1>Hello ${name}</h1>
+<h1>你好 ${name}</h1>
--- a/content/1-reactivity/1-declare-state/aurelia2/name.ts
+++ b/content/1-reactivity/1-declare-state/aurelia2/name.ts
@@ -1,3 +1,3 @@
 export class Name {
-  name = "John";
+  name = "张三";
 }
--- a/content/1-reactivity/1-declare-state/emberOctane/name.hbs
+++ b/content/1-reactivity/1-declare-state/emberOctane/name.hbs
@@ -1 +1 @@
-<h1>Hello {{this.name}}</h1>
+<h1>你好 {{this.name}}</h1>
--- a/content/1-reactivity/1-declare-state/emberOctane/name.js
+++ b/content/1-reactivity/1-declare-state/emberOctane/name.js
@@ -1,5 +1,5 @@
 import Component from "@glimmer/component";

 export default class NameComponent extends Component {
-  name = "John";
+  name = "张三";
 }
--- a/content/1-reactivity/1-declare-state/emberPolaris/name.gjs
+++ b/content/1-reactivity/1-declare-state/emberPolaris/name.gjs
@@ -1,9 +1,9 @@
 import Component from "@glimmer/component";

 export default class NameComponent extends Component {
-  name = "John";
+  name = "张三";

  <template>
-    <h1>Hello {{this.name}}</h1>
+    <h1>你好 {{this.name}}</h1>
  </template>
 }
--- a/content/1-reactivity/1-declare-state/lit/name.js
+++ b/content/1-reactivity/1-declare-state/lit/name.js
@@ -4,9 +4,9 @@ import { customElement, state } from "lit/decorators.js";
@customElement("x-name")
 export class XName extends LitElement {
  @state()
-  name = "John";
+  name = "张三";

  render() {
-    return html`<h1>Hello ${this.name}!</h1>`;
+    return html`<h1>你好 ${this.name}!</h1>`;
  }
 }
--- a/content/1-reactivity/1-declare-state/marko/Name.marko
+++ b/content/1-reactivity/1-declare-state/marko/Name.marko
@@ -1,2 +1,2 @@
-<let/name="John">
-<h1>Hello ${name}</h1>
+<let/name="张三">
+<h1>你好 ${name}</h1>
--- a/content/1-reactivity/1-declare-state/mithril/Name.js
+++ b/content/1-reactivity/1-declare-state/mithril/Name.js
@@ -1,9 +1,9 @@
 import m from "mithril";

 export default function Name() {
-  let name = "John";
+  let name = "张三";

  return {
-    view: () => m("h1", `Hello ${name}`),
+    view: () => m("h1", `你好 ${name}`),
  };
 }
--- a/content/1-reactivity/1-declare-state/qwik/Name.tsx
+++ b/content/1-reactivity/1-declare-state/qwik/Name.tsx
@@ -1,7 +1,7 @@
 import { component$, useSignal } from "@builder.io/qwik";

 export const Name = component$(() => {
-  const name = useSignal("John");
+  const name = useSignal("张三");

-  return <h1>Hello {name.value}</h1>;
+  return <h1>你好 {name.value}</h1>;
 });
--- a/content/1-reactivity/1-declare-state/react/Name.jsx
+++ b/content/1-reactivity/1-declare-state/react/Name.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";

 export default function Name() {
-  const [name] = useState("John");
+  const [name] = useState("张三");

-  return <h1>Hello {name}</h1>;
+  return <h1>你好 {name}</h1>;
 }
--- a/content/1-reactivity/1-declare-state/ripple/Name.ripple
+++ b/content/1-reactivity/1-declare-state/ripple/Name.ripple
@@ -1,7 +1,7 @@
 import { track } from "ripple";

 export component Name() {
-  let name = track("John");
+  let name = track("张三");

-  <h1>{`Hello ${@name}`}</h1>
+  <h1>{`你好 ${@name}`}</h1>
 }
--- a/content/1-reactivity/1-declare-state/solid/Name.jsx
+++ b/content/1-reactivity/1-declare-state/solid/Name.jsx
@@ -1,7 +1,7 @@
 import { createSignal } from "solid-js";

 export default function Name() {
-  const [name] = createSignal("John");
+  const [name] = createSignal("张三");

-  return <h1>Hello {name()}</h1>;
+  return <h1>你好 {name()}</h1>;
 }
--- a/content/1-reactivity/1-declare-state/svelte4/Name.svelte
+++ b/content/1-reactivity/1-declare-state/svelte4/Name.svelte
@@ -1,5 +1,5 @@
 <script>
-  let name = "John";
+  let name = "张三";
 </script>

-<h1>Hello {name}</h1>
+<h1>你好 {name}</h1>
--- a/content/1-reactivity/1-declare-state/svelte5/Name.svelte
+++ b/content/1-reactivity/1-declare-state/svelte5/Name.svelte
@@ -1,5 +1,5 @@
 <script>
-  let name = $state("John");
+  let name = $state("张三");
 </script>

-<h1>Hello {name}</h1>
+<h1>你好 {name}</h1>
--- a/content/1-reactivity/1-declare-state/vue2/Name.vue
+++ b/content/1-reactivity/1-declare-state/vue2/Name.vue
@@ -2,12 +2,12 @@
 export default {
  data() {
    return {
-      name: "John",
+      name: "张三",
    };
  },
 };
 </script>

 <template>
-  <h1>Hello {{ name }}</h1>
+  <h1>你好 {{ name }}</h1>
 </template>
--- a/content/1-reactivity/1-declare-state/vue3/Name.vue
+++ b/content/1-reactivity/1-declare-state/vue3/Name.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { ref } from "vue";
-const name = ref("John");
+const name = ref("张三");
 </script>

 <template>
-  <h1>Hello {{ name }}</h1>
+  <h1>你好 {{ name }}</h1>
 </template>
--- a/content/1-reactivity/2-update-state/alpine/index.html
+++ b/content/1-reactivity/2-update-state/alpine/index.html
@@ -1 +1 @@
-<h1 x-data="{ name: 'John' }" x-init="name = 'Jane'" x-text="name"></h1>
+<h1 x-data="{ name: '张三' }" x-init="name = '李四'" x-text="name"></h1>
--- a/content/1-reactivity/2-update-state/angular/name.component.ts
+++ b/content/1-reactivity/2-update-state/angular/name.component.ts
@@ -2,13 +2,13 @@ import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-name",
-  template: `<h1>Hello {{ name }}</h1>`,
+  template: `<h1>你好 {{ name }}</h1>`,
 })
 export class NameComponent {
-  name = "John";
+  name = "张三";

  constructor() {
-    this.name = "Jane";
+    this.name = "李四";
  }
 }

--- a/content/1-reactivity/2-update-state/angularRenaissance/name.component.ts
+++ b/content/1-reactivity/2-update-state/angularRenaissance/name.component.ts
@@ -2,12 +2,12 @@ import { Component, signal } from "@angular/core";

@Component({
  selector: "app-name",
-  template: `<h1>Hello {{ name() }}</h1>`,
+  template: `<h1>你好 {{ name() }}</h1>`,
 })
 export class NameComponent {
-  name = signal("John");
+  name = signal("张三");

  constructor() {
-    this.name.set("Jane");
+    this.name.set("李四");
  }
 }
--- a/content/1-reactivity/2-update-state/aurelia1/name.html
+++ b/content/1-reactivity/2-update-state/aurelia1/name.html
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello ${name}</h1>
+  <h1>你好 ${name}</h1>
 </template>
--- a/content/1-reactivity/2-update-state/aurelia1/name.ts
+++ b/content/1-reactivity/2-update-state/aurelia1/name.ts
@@ -1,7 +1,7 @@
 export class Name {
-  name = "John";
+  name = "张三";

  constructor() {
-    this.name = "Jane";
+    this.name = "李四";
  }
 }
--- a/content/1-reactivity/2-update-state/aurelia2/name.html
+++ b/content/1-reactivity/2-update-state/aurelia2/name.html
@@ -1 +1 @@
-<h1>Hello ${name}</h1>
+<h1>你好 ${name}</h1>
--- a/content/1-reactivity/2-update-state/aurelia2/name.ts
+++ b/content/1-reactivity/2-update-state/aurelia2/name.ts
@@ -1,7 +1,7 @@
 export class Name {
-  name = "John";
+  name = "张三";

  constructor() {
-    this.name = "Jane";
+    this.name = "李四";
  }
 }
--- a/content/1-reactivity/2-update-state/emberOctane/name.hbs
+++ b/content/1-reactivity/2-update-state/emberOctane/name.hbs
@@ -1 +1 @@
-<h1>Hello {{this.name}}</h1>
+<h1>你好 {{this.name}}</h1>
--- a/content/1-reactivity/2-update-state/emberOctane/name.js
+++ b/content/1-reactivity/2-update-state/emberOctane/name.js
@@ -2,11 +2,11 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";

 export default class NameComponent extends Component {
-  @tracked name = "John";
+  @tracked name = "张三";

  constructor(owner, args) {
    super(owner, args);

-    this.name = "Jane";
+    this.name = "李四";
  }
 }
--- a/content/1-reactivity/2-update-state/emberPolaris/name.gjs
+++ b/content/1-reactivity/2-update-state/emberPolaris/name.gjs
@@ -2,15 +2,15 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";

 export default class CounterComponent extends Component {
-  @tracked name = "John";
+  @tracked name = "张三";

  constructor(owner, args) {
    super(owner, args);

-    this.name = "Jane";
+    this.name = "李四";
  }

  <template>
-    <h1>Hello {{this.name}}</h1>
+    <h1>你好 {{this.name}}</h1>
  </template>
 }
--- a/content/1-reactivity/2-update-state/lit/name.js
+++ b/content/1-reactivity/2-update-state/lit/name.js
@@ -4,14 +4,14 @@ import { customElement, state } from "lit/decorators.js";
@customElement("x-name")
 export class XName extends LitElement {
  @state()
-  name = "John";
+  name = "张三";

  constructor() {
    super();
-    this.name = "Jane";
+    this.name = "李四";
  }

  render() {
-    return html`<h1>Hello ${this.name}!</h1>`;
+    return html`<h1>你好 ${this.name}!</h1>`;
  }
 }
--- a/content/1-reactivity/2-update-state/marko/Name.marko
+++ b/content/1-reactivity/2-update-state/marko/Name.marko
@@ -1,3 +1,3 @@
-<let/name="John">
-<script>name = "Jane"</script>
-<h1>Hello ${name}</h1>
+<let/name="张三">
+<script>name = "李四"</script>
+<h1>你好 ${name}</h1>
--- a/content/1-reactivity/2-update-state/mithril/Name.js
+++ b/content/1-reactivity/2-update-state/mithril/Name.js
@@ -1,9 +1,9 @@
 import m from "mithril";

 export default function Name() {
-  let name = "John";
-  name = "Jane";
+  let name = "张三";
+  name = "李四";
  return {
-    view: () => m("h1", `Hello ${name}`),
+    view: () => m("h1", `你好 ${name}`),
  };
 }
--- a/content/1-reactivity/2-update-state/qwik/Name.tsx
+++ b/content/1-reactivity/2-update-state/qwik/Name.tsx
@@ -1,11 +1,11 @@
 import { component$, useTask$, useSignal } from "@builder.io/qwik";

 export const Name = component$(() => {
-  const name = useSignal("John");
+  const name = useSignal("张三");

  useTask$(() => {
-    name.value = "Jane";
+    name.value = "李四";
  });

-  return <h1>Hello {name.value}</h1>;
+  return <h1>你好 {name.value}</h1>;
 });
--- a/content/1-reactivity/2-update-state/react/Name.jsx
+++ b/content/1-reactivity/2-update-state/react/Name.jsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";

 export default function Name() {
-  const [name, setName] = useState("John");
+  const [name, setName] = useState("张三");

  useEffect(() => {
-    setName("Jane");
+    setName("李四");
  }, []);

-  return <h1>Hello {name}</h1>;
+  return <h1>你好 {name}</h1>;
 }
--- a/content/1-reactivity/2-update-state/ripple/Name.ripple
+++ b/content/1-reactivity/2-update-state/ripple/Name.ripple
@@ -1,8 +1,8 @@
 import { track } from "ripple";

 export component Name() {
-  let name = track("John");
-  @name = "Jane";
+  let name = track("张三");
+  @name = "李四";

-  <h1>{`Hello ${@name}`}</h1>
+  <h1>{`你好 ${@name}`}</h1>
 }
--- a/content/1-reactivity/2-update-state/solid/Name.jsx
+++ b/content/1-reactivity/2-update-state/solid/Name.jsx
@@ -1,8 +1,8 @@
 import { createSignal } from "solid-js";

 export default function Name() {
-  const [name, setName] = createSignal("John");
-  setName("Jane");
+  const [name, setName] = createSignal("张三");
+  setName("李四");

-  return <h1>Hello {name()}</h1>;
+  return <h1>你好 {name()}</h1>;
 }
--- a/content/1-reactivity/2-update-state/svelte4/Name.svelte
+++ b/content/1-reactivity/2-update-state/svelte4/Name.svelte
@@ -1,6 +1,6 @@
 <script>
-  let name = "John";
-  name = "Jane";
+  let name = "张三";
+  name = "李四";
 </script>

-<h1>Hello {name}</h1>
+<h1>你好 {name}</h1>
--- a/content/1-reactivity/2-update-state/svelte5/Name.svelte
+++ b/content/1-reactivity/2-update-state/svelte5/Name.svelte
@@ -1,6 +1,6 @@
 <script>
-  let name = $state("John");
-  name = "Jane";
+  let name = $state("张三");
+  name = "李四";
 </script>

-<h1>Hello {name}</h1>
+<h1>你好 {name}</h1>
--- a/content/1-reactivity/2-update-state/vue2/Name.vue
+++ b/content/1-reactivity/2-update-state/vue2/Name.vue
@@ -2,15 +2,15 @@
 export default {
  data() {
    return {
-      name: "John",
+      name: "张三",
    };
  },
  created() {
-    this.name = "Jane";
+    this.name = "李四";
  },
 };
 </script>

 <template>
-  <h1>Hello {{ name }}</h1>
+  <h1>你好 {{ name }}</h1>
 </template>
--- a/content/1-reactivity/2-update-state/vue3/Name.vue
+++ b/content/1-reactivity/2-update-state/vue3/Name.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { ref } from "vue";
-const name = ref("John");
-name.value = "Jane";
+const name = ref("张三");
+name.value = "李四";
 </script>

 <template>
-  <h1>Hello {{ name }}</h1>
+  <h1>你好 {{ name }}</h1>
 </template>
--- a/content/2-templating/1-minimal-template/alpine/index.html
+++ b/content/2-templating/1-minimal-template/alpine/index.html
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/angular/helloworld.component.ts
+++ b/content/2-templating/1-minimal-template/angular/helloworld.component.ts
@@ -2,7 +2,7 @@ import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-helloworld",
-  template: `<h1>Hello world</h1>`,
+  template: `<h1>你好，世界</h1>`,
 })
 export class HelloworldComponent {}

--- a/content/2-templating/1-minimal-template/angularRenaissance/helloworld.component.ts
+++ b/content/2-templating/1-minimal-template/angularRenaissance/helloworld.component.ts
@@ -2,6 +2,6 @@ import { Component } from "@angular/core";

@Component({
  selector: "app-hello-world",
-  template: `<h1>Hello world</h1>`,
+  template: `<h1>你好，世界</h1>`,
 })
 export class HelloWorldComponent {}
--- a/content/2-templating/1-minimal-template/aurelia1/hello-world.html
+++ b/content/2-templating/1-minimal-template/aurelia1/hello-world.html
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello world</h1>
+  <h1>你好，世界</h1>
 </template>
--- a/content/2-templating/1-minimal-template/aurelia2/hello-world.html
+++ b/content/2-templating/1-minimal-template/aurelia2/hello-world.html
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/emberOctane/hello-world.hbs
+++ b/content/2-templating/1-minimal-template/emberOctane/hello-world.hbs
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/emberPolaris/hello-world.gjs
+++ b/content/2-templating/1-minimal-template/emberPolaris/hello-world.gjs
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello world</h1>
+  <h1>你好，世界</h1>
 </template>
--- a/content/2-templating/1-minimal-template/lit/hello-world.js
+++ b/content/2-templating/1-minimal-template/lit/hello-world.js
@@ -4,6 +4,6 @@ import { customElement } from "lit/decorators.js";
@customElement("hello-world")
 export class HelloWorld extends LitElement {
  render() {
-    return html`<h1>Hello world</h1>`;
+    return html`<h1>你好，世界</h1>`;
  }
 }
--- a/content/2-templating/1-minimal-template/marko/HelloWorld.marko
+++ b/content/2-templating/1-minimal-template/marko/HelloWorld.marko
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/mithril/HelloWorld.js
+++ b/content/2-templating/1-minimal-template/mithril/HelloWorld.js
@@ -2,6 +2,6 @@ import m from "mithril";

 export default function HelloWorld() {
  return {
-    view: () => m("h1", "Hello World"),
+    view: () => m("h1", "你好，世界"),
  };
 }
--- a/content/2-templating/1-minimal-template/qwik/HelloWorld.tsx
+++ b/content/2-templating/1-minimal-template/qwik/HelloWorld.tsx
@@ -1,3 +1,3 @@
 export const HelloWorld = () => {
-  return <div>Hello World</div>;
+  return <div>你好，世界</div>;
 };
--- a/content/2-templating/1-minimal-template/react/HelloWorld.jsx
+++ b/content/2-templating/1-minimal-template/react/HelloWorld.jsx
@@ -1,3 +1,3 @@
 export default function HelloWorld() {
-  return <h1>Hello world</h1>;
+  return <h1>你好，世界</h1>;
 }
--- a/content/2-templating/1-minimal-template/ripple/HelloWorld.ripple
+++ b/content/2-templating/1-minimal-template/ripple/HelloWorld.ripple
@@ -1,3 +1,3 @@
 export component HelloWorld() {
-  <h1>{"Hello world"}</h1>
+  <h1>{"你好，世界"}</h1>
 }
--- a/content/2-templating/1-minimal-template/solid/HelloWorld.jsx
+++ b/content/2-templating/1-minimal-template/solid/HelloWorld.jsx
@@ -1,3 +1,3 @@
 export default function HelloWorld() {
-  return <h1>Hello World!</h1>;
+  return <h1>你好，世界</h1>;
 }
--- a/content/2-templating/1-minimal-template/svelte4/HelloWorld.svelte
+++ b/content/2-templating/1-minimal-template/svelte4/HelloWorld.svelte
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/svelte5/HelloWorld.svelte
+++ b/content/2-templating/1-minimal-template/svelte5/HelloWorld.svelte
@@ -1 +1 @@
-<h1>Hello world</h1>
+<h1>你好，世界</h1>
--- a/content/2-templating/1-minimal-template/vue2/HelloWorld.vue
+++ b/content/2-templating/1-minimal-template/vue2/HelloWorld.vue
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello world</h1>
+  <h1>你好，世界</h1>
 </template>
--- a/content/2-templating/1-minimal-template/vue3/HelloWorld.vue
+++ b/content/2-templating/1-minimal-template/vue3/HelloWorld.vue
@@ -1,3 +1,3 @@
 <template>
-  <h1>Hello world</h1>
+  <h1>你好，世界</h1>
 </template>
--- a/content/2-templating/2-styling/alpine/index.html
+++ b/content/2-templating/2-styling/alpine/index.html
@@ -1,5 +1,5 @@
-<h1 class="title">I am red</h1>
-<button style="font-size: 10rem">I am a button</button>
+<h1 class="title">我是红色的</h1>
+<button style="font-size: 10rem">我是一个按钮</button>

 <style>
  .title {
--- a/content/2-templating/2-styling/angular/cssstyle.component.ts
+++ b/content/2-templating/2-styling/angular/cssstyle.component.ts
@@ -3,8 +3,8 @@ import { Component, NgModule } from "@angular/core";
@Component({
  selector: "app-cssstyle",
  template: `
-    <h1 class="title">I am red</h1>
-    <button style="font-size: 10rem">I am a button</button>
+    <h1 class="title">我是红色的</h1>
+    <button style="font-size: 10rem">我是一个按钮</button>
  `,
  styles: [
    `
--- a/content/2-templating/2-styling/angularRenaissance/cssstyle.component.ts
+++ b/content/2-templating/2-styling/angularRenaissance/cssstyle.component.ts
@@ -3,8 +3,8 @@ import { Component } from "@angular/core";
@Component({
  selector: "app-css-style",
  template: `
-    <h1 class="title">I am red</h1>
-    <button style="font-size: 10rem">I am a button</button>
+    <h1 class="title">我是红色的</h1>
+    <button style="font-size: 10rem">我是一个按钮</button>
  `,
  styles: `
    .title {
--- a/content/2-templating/2-styling/aurelia1/css-style.html
+++ b/content/2-templating/2-styling/aurelia1/css-style.html
@@ -1,6 +1,6 @@
 <template>
  <require from="./styling.css"></require>

-  <h1 class="title">I am red</h1>
-  <button style="font-size: 10rem">I am a button</button>
+  <h1 class="title">我是红色的</h1>
+  <button style="font-size: 10rem">我是一个按钮</button>
 </template>
--- a/content/2-templating/2-styling/aurelia2/css-style.html
+++ b/content/2-templating/2-styling/aurelia2/css-style.html
@@ -1,2 +1,2 @@
-<h1 class="title">I am red</h1>
-<button style="font-size: 10rem">I am a button</button>
+<h1 class="title">我是红色的</h1>
+<button style="font-size: 10rem">我是一个按钮</button>
--- a/content/2-templating/2-styling/emberOctane/css-style.hbs
+++ b/content/2-templating/2-styling/emberOctane/css-style.hbs
@@ -1,2 +1,2 @@
-<h1 class="title">I am red</h1>
-<button style="font-size: 10rem;">I am a button</button>
+<h1 class="title">我是红色的</h1>
+<button style="font-size: 10rem;">我是一个按钮</button>
--- a/content/2-templating/2-styling/emberPolaris/css-style.gjs
+++ b/content/2-templating/2-styling/emberPolaris/css-style.gjs
@@ -1,6 +1,6 @@
 <template>
-  <h1 class="title">I am red</h1>
-  <button style="font-size: 10rem;">I am a button</button>
+  <h1 class="title">我是红色的</h1>
+  <button style="font-size: 10rem;">我是一个按钮</button>

  <style>
    .title {
--- a/content/2-templating/2-styling/lit/css-style.js
+++ b/content/2-templating/2-styling/lit/css-style.js
@@ -12,8 +12,8 @@ export class CssStyle extends LitElement {

  render() {
    return html`
-      <h1 class="title">I am red</h1>
-      <button style=${styleMap({ fontSize: "10rem" })}>I am a button</button>
+      <h1 class="title">我是红色的</h1>
+      <button style=${styleMap({ fontSize: "10rem" })}>我是一个按钮</button>
    `;
  }
 }
--- a/content/2-templating/2-styling/marko/CssStyle.marko
+++ b/content/2-templating/2-styling/marko/CssStyle.marko
@@ -1,6 +1,6 @@
-<h1.title>I am red</h1>
-<button style={ "font-size": "10rem" }>I am a button</button>
-<button class=scopedButton>I am a style-scoped button</button>
+<h1.title>我是红色的</h1>
+<button style={ "font-size": "10rem" }>我是一个按钮</button>
+<button class=scopedButton>我是一个样式作用域按钮</button>

 <style>
  .title {
--- a/content/2-templating/2-styling/mithril/CssStyle.js
+++ b/content/2-templating/2-styling/mithril/CssStyle.js
@@ -6,8 +6,8 @@ export default function CssStyle() {
    view: () =>
      m(
        "div",
-        m("h1.title", "I am red"),
-        m("button", { style: { fontSize: "10rem" } }, "I am a button"),
+        m("h1.title", "我是红色的"),
+        m("button", { style: { fontSize: "10rem" } }, "我是一个按钮"),
      ),
  };
 }
--- a/content/2-templating/2-styling/qwik/CssStyle.tsx
+++ b/content/2-templating/2-styling/qwik/CssStyle.tsx
@@ -9,8 +9,8 @@ export const App = component$(() => {

  return (
    <>
-      <h1 class="title">I am red</h1>
-      <button style={{ "font-size": "10rem" }}>I am a button</button>
+      <h1 class="title">我是红色的</h1>
+      <button style={{ "font-size": "10rem" }}>我是一个按钮</button>
    </>
  );
 });
--- a/content/2-templating/2-styling/react/CssStyle.jsx
+++ b/content/2-templating/2-styling/react/CssStyle.jsx
@@ -3,8 +3,8 @@ import "./style.css";
 export default function CssStyle() {
  return (
    <>
-      <h1 className="title">I am red</h1>
-      <button style={{ fontSize: "10rem" }}>I am a button</button>
+      <h1 className="title">我是红色的</h1>
+      <button style={{ fontSize: "10rem" }}>我是一个按钮</button>
    </>
  );
 }
--- a/content/2-templating/2-styling/ripple/CssStyle.ripple
+++ b/content/2-templating/2-styling/ripple/CssStyle.ripple
@@ -1,6 +1,6 @@
 export component CssStyle() {
-  <h1 class="title">{"I am red"}</h1>
-  <button style="font-size: 10rem;">{"I am a button"}</button>
+  <h1 class="title">{"我是红色的"}</h1>
+  <button style="font-size: 10rem;">{"我是一个按钮"}</button>

  <style>
    .title {
--- a/content/2-templating/2-styling/solid/CssStyle.jsx
+++ b/content/2-templating/2-styling/solid/CssStyle.jsx
@@ -3,8 +3,8 @@ import "./style.css";
 export default function CssStyle() {
  return (
    <>
-      <h1 class="title">I am red</h1>
-      <button style={{ "font-size": "10rem" }}>I am a button</button>
+      <h1 class="title">我是红色的</h1>
+      <button style={{ "font-size": "10rem" }}>我是一个按钮</button>
    </>
  );
 }
--- a/content/2-templating/2-styling/svelte4/CssStyle.svelte
+++ b/content/2-templating/2-styling/svelte4/CssStyle.svelte
@@ -1,5 +1,5 @@
-<h1 class="title">I am red</h1>
-<button style="font-size: 10rem;">I am a button</button>
+<h1 class="title">我是红色的</h1>
+<button style="font-size: 10rem;">我是一个按钮</button>

 <style>
  .title {
--- a/content/2-templating/2-styling/svelte5/CssStyle.svelte
+++ b/content/2-templating/2-styling/svelte5/CssStyle.svelte
@@ -1,5 +1,5 @@
-<h1 class="title">I am red</h1>
-<button style="font-size: 10rem;">I am a button</button>
+<h1 class="title">我是红色的</h1>
+<button style="font-size: 10rem;">我是一个按钮</button>

 <style>
  .title {
--- a/content/2-templating/2-styling/vue2/CssStyle.vue
+++ b/content/2-templating/2-styling/vue2/CssStyle.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <h1 class="title">I am red</h1>
-    <button style="font-size: 10rem">I am a button</button>
+    <h1 class="title">我是红色的</h1>
+    <button style="font-size: 10rem">我是一个按钮</button>
  </div>
 </template>

--- a/content/2-templating/2-styling/vue3/CssStyle.vue
+++ b/content/2-templating/2-styling/vue3/CssStyle.vue
@@ -1,6 +1,6 @@
 <template>
-  <h1 class="title">I am red</h1>
-  <button style="font-size: 10rem">I am a button</button>
+  <h1 class="title">我是红色的</h1>
+  <button style="font-size: 10rem">我是一个按钮</button>
 </template>

 <style scoped>
--- a/content/2-templating/3-loop/alpine/index.html
+++ b/content/2-templating/3-loop/alpine/index.html
@@ -1,4 +1,4 @@
-<ul x-data="{ colors: ['red', 'green', 'blue'] }">
+<ul x-data="{ colors: ['红', '绿', '蓝'] }">
  <template x-for="color in colors">
    <li x-text="color"></li>
  </template>
--- a/content/2-templating/3-loop/angular/colors.component.ts
+++ b/content/2-templating/3-loop/angular/colors.component.ts
@@ -10,7 +10,7 @@ import { CommonModule } from "@angular/common";
  `,
 })
 export class ColorsComponent {
-  colors = ["red", "green", "blue"];
+  colors = ["红", "绿", "蓝"];
 }

@NgModule({
--- a/content/2-templating/3-loop/angularRenaissance/colors.component.ts
+++ b/content/2-templating/3-loop/angularRenaissance/colors.component.ts
@@ -11,5 +11,5 @@ import { Component } from "@angular/core";
  `,
 })
 export class ColorsComponent {
-  colors = ["red", "green", "blue"];
+  colors = ["红", "绿", "蓝"];
 }
--- a/content/2-templating/3-loop/aurelia1/colors.ts
+++ b/content/2-templating/3-loop/aurelia1/colors.ts
@@ -1,3 +1,3 @@
 export class Colors {
-  colors = ["red", "green", "blue"];
+  colors = ["红", "绿", "蓝"];
 }
--- a/content/2-templating/3-loop/aurelia2/colors.ts
+++ b/content/2-templating/3-loop/aurelia2/colors.ts
@@ -1,3 +1,3 @@
 export class Colors {
-  colors = ["red", "green", "blue"];
+  colors = ["红", "绿", "蓝"];
 }
--- a/content/2-templating/3-loop/emberOctane/colors.hbs
+++ b/content/2-templating/3-loop/emberOctane/colors.hbs
@@ -1,5 +1,5 @@
 <ul>
-  {{#each (array "red" "green" "blue") as |color|}}
+  {{#each (array "红" "绿" "蓝") as |color|}}
    <li>{{color}}</li>
  {{/each}}
 </ul>
--- a/content/2-templating/3-loop/emberPolaris/colors.gjs
+++ b/content/2-templating/3-loop/emberPolaris/colors.gjs
@@ -1,4 +1,4 @@
-const colors = ["red", "green", "blue"];
+const colors = ["红", "绿", "蓝"];

 <template>
  <ul>
--- a/content/2-templating/3-loop/lit/colors-list.js
+++ b/content/2-templating/3-loop/lit/colors-list.js
@@ -4,7 +4,7 @@ import { repeat } from "lit/directives/repeat.js";

@customElement("colors-list")
 export class ColorsList extends LitElement {
-  colors = ["red", "green", "blue"];
+  colors = ["红", "绿", "蓝"];

  render() {
    return html`
--- a/content/2-templating/3-loop/marko/Colors.marko
+++ b/content/2-templating/3-loop/marko/Colors.marko
@@ -1,5 +1,5 @@
 <ul>
-  <for|color| of=["red", "green", "blue"]>
+  <for|color| of=["红", "绿", "蓝"]>
    <li>${color}</li>
  </for>
 </ul>
--- a/content/2-templating/3-loop/mithril/Colors.js
+++ b/content/2-templating/3-loop/mithril/Colors.js
@@ -1,7 +1,7 @@
 import m from "mithril";

 export default function Colors() {
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];
  return {
    view: () =>
      m(
--- a/content/2-templating/3-loop/qwik/Colors.tsx
+++ b/content/2-templating/3-loop/qwik/Colors.tsx
@@ -1,7 +1,7 @@
 import { component$ } from "@builder.io/qwik";

 export const Colors = component$(() => {
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];
  return (
    <ul>
      {colors.map((color) => (
--- a/content/2-templating/3-loop/react/Colors.jsx
+++ b/content/2-templating/3-loop/react/Colors.jsx
@@ -1,5 +1,5 @@
 export default function Colors() {
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];
  return (
    <ul>
      {colors.map((color) => (
--- a/content/2-templating/3-loop/ripple/Colors.ripple
+++ b/content/2-templating/3-loop/ripple/Colors.ripple
@@ -1,5 +1,5 @@
 export component Colors() {
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];

  <ul>
    for (const color of colors) {
--- a/content/2-templating/3-loop/solid/Colors.jsx
+++ b/content/2-templating/3-loop/solid/Colors.jsx
@@ -1,7 +1,7 @@
 import { For } from "solid-js";

 export default function Colors() {
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];

  return (
    <ul>
--- a/content/2-templating/3-loop/svelte4/Colors.svelte
+++ b/content/2-templating/3-loop/svelte4/Colors.svelte
@@ -1,5 +1,5 @@
 <script>
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];
 </script>

 <ul>
--- a/content/2-templating/3-loop/svelte5/Colors.svelte
+++ b/content/2-templating/3-loop/svelte5/Colors.svelte
@@ -1,5 +1,5 @@
 <script>
-  const colors = ["red", "green", "blue"];
+  const colors = ["红", "绿", "蓝"];
 </script>

 <ul>
--- a/Show More
+++ b/Show More