· glotstack.ai

語言

開發者友好的設計

使用

yarn

安裝 glotstack

yarn install glotstack

在你的 React 應用中添加 glotstack 提供者

只需在應用程序的頂層添加一次上下文提供者。添加後，翻譯將根據你提供的語言自動填充到應用中。

<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
  <YourApp/>
</GlotstackProvider>

詳情見 React i18n 快速入門關於

importMethod

隨時按需拉取你的翻譯 —

yarn glotstack get-translations

不再需要等待語言專家有空。使用我們的 CLI 隨時拉取你的翻譯，更新翻譯時使用

context

確保翻譯符合你的意圖。如果想使用 YAML 檔案，請查看關於 YAML

Glotstack 提供簡單的基於 hook 的 API

const { t } = useGlotstack()

<>
  {t('YourKey', {
    assigns: {
      Component: <Component prop="f"></Component>,
      insertNode: <Icon name="icon-set"/>,
      mdash: <>&mdash;</>
      another: <>{t('OtherKey', {locale: 'en-US'})}
    },
  })}
</>

你可以使用

assigns

選項將任何

React.Node

直接替換進翻譯中。只要你傳入正確的組件名稱，就可以在行內使用

<Component>something</Component>

替換 —，這樣可以避免新建翻譯鍵的麻煩。你也可以使用

{{substitution}}

直接替換任何節點。

YourKey:
  value: |
    This is an example source text. We want to <Component>do this</Component.
    We also want to demonstrate {{insertNode}} and {{mdash}}.
    We can even nest other translated things {{another}}.

收費方案

我們為早期開發團隊提供重大的優惠。詳情請參閱收費方案。

即將推出

新功能即將來臨。我們致力於讓本地化對開發者來說變得更輕鬆，並且專注於提升開發效率。

全新

自動從程式碼中提取所有翻譯

yarn glotstack extract-translations

使用

CLI

自動提取你用母語編寫的字串，讓你完全不必擔心翻譯檔案的問題。繼續編寫代碼，就像以前一樣，無需擔心本地化，glotstack 會幫你處理好一切。

Glotstack 是為 React 打造的開發者優先多語言化工作流程：管理 YAML/JSON 中的翻譯，保持語言同步，並用 AI 輔助工具更快推出新語言