最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文本的位置：

tsx

’使用客户端’；
 
导入 { 方式 } 从 ‘@18ways/react’；
 
导出 函数 AppPage() {
  return (
    <>
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </>
  );
}

避免使用匿名桶，例如page1, 复制, 或者杂项.

翻译完整的思想

好:

tsx

'使用客户端';
 
导入 Link 来自 'next/link';
导入 { T } 来自 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <T>
      下载您的最新发票为{' '}
      <Link href="/invoices/latest.pdf">PDF</Link>
    </T>
  );
}

避免：

18ways 可以将常见的链接情况处理为一条消息。<T><a href="#">点击这里</a>查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

导入 { T } 从 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <>
      <T>下载</T>{' '}
      <T>您的最新发票</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 来进行区域设置解析和元数据处理。
如果您仅使用 React，请在您的应用中保持区域设置状态，并使用 @18ways/react。
如果您在 React 之外，请使用@18ways/core并自行负责 UI 集成。

让路由与您的产品匹配

公共营销页面通常希望基于路径的区域路由以优化搜索引擎排名。而内部仪表板通常不需要。因此，当前网站排除了/dashboard的路径路由。

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文本的位置：

tsx

’使用客户端’；
 
导入 { 方式 } 从 ‘@18ways/react’；
 
导出 函数 AppPage() {
  return (
    <>
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </>
  );
}

避免使用匿名桶，例如page1, 复制, 或者杂项.

翻译完整的思想

好:

tsx

'使用客户端';
 
导入 Link 来自 'next/link';
导入 { T } 来自 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <T>
      下载您的最新发票为{' '}
      <Link href="/invoices/latest.pdf">PDF</Link>
    </T>
  );
}

避免：

18ways 可以将常见的链接情况处理为一条消息。<T><a href="#">点击这里</a>查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

导入 { T } 从 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <>
      <T>下载</T>{' '}
      <T>您的最新发票</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 来进行区域设置解析和元数据处理。
如果您仅使用 React，请在您的应用中保持区域设置状态，并使用 @18ways/react。
如果您在 React 之外，请使用@18ways/core并自行负责 UI 集成。

让路由与您的产品匹配

公共营销页面通常希望基于路径的区域路由以优化搜索引擎排名。而内部仪表板通常不需要。因此，当前网站排除了/dashboard的路径路由。

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

最佳实践

获得糟糕翻译的最快方法是让运行时绕过可避免的应用结构问题。

使用真实的上下文名称

好的上下文键解释了文本的位置：

tsx

’使用客户端’；
 
导入 { 方式 } 从 ‘@18ways/react’；
 
导出 函数 AppPage() {
  return (
    <>
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </>
  );
}

避免使用匿名桶，例如page1, 复制, 或者杂项.

翻译完整的思想

好:

tsx

'使用客户端';
 
导入 Link 来自 'next/link';
导入 { T } 来自 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <T>
      下载您的最新发票为{' '}
      <Link href="/invoices/latest.pdf">PDF</Link>
    </T>
  );
}

避免：

18ways 可以将常见的链接情况处理为一条消息。<T><a href="#">点击这里</a>查看更多</T> 应该保持为一个句子，而不是被拆分并重新拼接在一起。

tsx

导入 { T } 从 '@18ways/react';
 
导出 函数 InvoiceLink() {
  返回 (
    <>
      <T>下载</T>{' '}
      <T>您的最新发票</T>{' '}
      <T>as PDF</T>
    </>
  );
}

保持包裹边界清晰

如果您在 Next.js 中，请使用 @18ways/next 来进行区域设置解析和元数据处理。
如果您仅使用 React，请在您的应用中保持区域设置状态，并使用 @18ways/react。
如果您在 React 之外，请使用@18ways/core并自行负责 UI 集成。

让路由与您的产品匹配

公共营销页面通常希望基于路径的区域路由以优化搜索引擎排名。而内部仪表板通常不需要。因此，当前网站排除了/dashboard的路径路由。

保持源副本为人类所用

18ways 在源文本像真实产品文案而不是压缩翻译键时效果最佳。

良好的源代码提供了更好的上下文，并为您的团队提供了可读的代码。

Best Practices