# vue: 翻译内容
URL: https://generaltranslation.com/zh/docs/vue/guides/translating-content.mdx
---

title: 翻译内容
description: 如何使用 <T> 组件原地翻译 Vue 模板内容。
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/configuring

---

[`<T>`](/docs/vue/reference/components/t) 组件会将其默认插槽翻译为当前区域设置。请用源语言写出完整语句，并使用该组件将其包裹，使文本、嵌套元素和格式能够作为一个整体翻译。

## 将模板内容包裹在 `<T>` 中 [#wrap]

将静态编写的面向用户内容放入默认插槽中：

```vue
<script setup lang="ts">
import { T } from 'gt-vue';
</script>

<template>
  <T>
    <section>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </section>
  </T>
</template>
```

CLI 会根据条目的内容和结构进行识别。请勿在翻译内容中通过常规插值传入运行时值。请使用 [`<Var>`](/docs/vue/reference/components/var)、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency) 或 [`<DateTime>`](/docs/vue/reference/components/datetime) 将它们包裹起来。

不要在一个 [`<T>`](/docs/vue/reference/components/t) 中嵌套另一个。请将相互独立的短语拆分为同级翻译。

## 添加翻译上下文 [#context]

当相同的源文本可能有不同含义时，请使用适用于 Vue 的 `context` prop：

```vue
<T context="a bank beside a river">Bank</T>
```

上下文会影响目录标识，并为翻译系统提供选择预期措辞所需的信息。它不会渲染到页面中。

可选的 `max-chars` 和 `requires-review` 属性会添加翻译元数据。请保持这些值为静态值，以便 CLI 能够提取它们。

## 通过自定义组件翻译 [#components]

在自定义组件默认插槽中静态编写的内容会参与周围内容的翻译：

```vue title="src/components/HelpPanel.vue"
<script setup lang="ts">
import { T } from 'gt-vue';
import DocsLink from './DocsLink.vue';
</script>

<template>
  <T>
    Read the <DocsLink href="/docs">installation guide</DocsLink> before continuing.
  </T>
</template>
```

自定义组件实例、其监听器和不可翻译的属性会被保留，翻译后的内容则会替换其默认插槽和受支持的静态文本属性。`DocsLink` 不会被替换为 Fragment，因此其状态和行为仍附着在同一边界上。外层的 [`<T>`](/docs/vue/reference/components/t) 在源内容和翻译后的渲染中均保持 Fragment 根节点，不会在更新过程中改变根节点类型。

只有传入默认插槽的内容会被外层翻译处理。在 `DocsLink.vue` 内部创建的文本不属于该条目。请将该内部文本包裹在其自身的 [`<T>`](/docs/vue/reference/components/t) 中。

翻译中的自定义组件标签必须能在运行时解析。请按常规方式导入或注册本地组件；未解析组件警告属于配置错误，而不是受支持的翻译源。

## 明确划分插槽边界 [#slots]

外层的 [`<T>`](/docs/vue/reference/components/t) 可以翻译自定义组件常规默认插槽中的内容。作用域插槽、任意具名插槽和运行时选定的组件依赖于提取器无法安全判定的行为。

* 如果短语由作用域插槽或具名插槽负责，请将 [`<T>`](/docs/vue/reference/components/t) 放在该插槽内。
* 如果不透明动态边界的输出应保持不变，请使用 [`<Var>`](/docs/vue/reference/components/var) 将其包裹。
* 自定义组件请使用直接标签。选择器形式仅适用于提取器可明确解析的已识别 GT 组件和受支持的 Vue 内置组件；对于任意自定义、运行时选定或未解析的选择器边界，请将 [`<T>`](/docs/vue/reference/components/t) 放在其内部。

对于 [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense)，请分别在其默认插槽和后备内容插槽中添加翻译：

```vue
<Suspense>
  <T>您的仪表板已就绪。</T>
  <template #fallback>
    <T>正在加载您的仪表板…</T>
  </template>
</Suspense>
```

当 [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) 位于外层 [`<T>`](/docs/vue/reference/components/t) 内时，其默认内容可以参与翻译，但后备内容会保留在该翻译之外。将每个 slot 中的短语分别放在各自的翻译中，可明确其归属。

## 安全地表达运行时结构 [#dynamic-structure]

翻译内容在提取时必须包含所有可能的短语。对于依赖计数的措辞，请使用 [`<Plural>`](/docs/vue/reference/components/plural)；对于其他有限的备选项，请使用 [`<Branch>`](/docs/vue/reference/components/branch)，不要直接在已翻译的组件树中加入运行时条件判断。

```vue
<T>
  <Branch :branch="status">
    <template #active>Your subscription is active.</template>
    <template #paused>Your subscription is paused.</template>
    <template #default>Your subscription status is unavailable.</template>
  </Branch>
</T>
```

Vue 的模板编译器决定缩进和换行如何转化为文本节点。在布局中直接写入应显示给读者的短语，并将编译器的空白字符设置保持为静态，以确保提取和渲染使用相同的结构。
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/configuring