Qala ngokushesha nge-React.
Faka i-glotstack nge-yarn
.
Faka i-glotstack provider kuhlelo lwakho lwe-React
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'
const importMethod = (locale: string) => {
// thola() kumafolda azinzile ukuze unciphise usayizi wokuhlanganisa; kuzakudingeka ugcine izinguqulo zakho endleleni ezinzile
return fetch(`/public/translations/${locale}.json`)
}
// // NOMA yenza izidingo ezingaphakathi ukuze uthole izinguqulo ezakhelwe ngaphakathi -- kusebenza ngaphandle kokusekelwa kokungenisa okuzenzakalelayo.
const translations: Record<string, () => Promise<Translations>> = {
'en-US': () => require('@/translations/en-US.json'),
'pl-PL': () => require('@/translations/pl-PL.json'),
'fr-FR': () => require('@/translations/fr-FR.json'),
};
const importMethod2 = (locale: string) => {
return translations[locale]();
}
const Application = () => {
const locale = 'en-US' // replace with your locale source
return (
<GlotstackProvider initialLocale={locale} importMethod={importMethod}>
{/*<YourComponent />*/}
</GlotstackProvider>
)
}
Nini ukusebenzisa i-fetch noma i-import?
<I-fetch>fetch()</I-fetch> ithola amafayela asekwe kumafayela atholakala kalula owabeka noma kuphi njenge-CDN - lokhu futhi kusiza ukugcina
usayizi wokuhlanganisa umncane uma unesilinganiso somkhawulokudonsa esincane, njengaku-Cloudflare Workers. I-<I-fetch>fetch()</I-fetch> ivamise ukuba ngcono
ngaphandle uma indawo yakho ingasekeli isakhiwo sokungenisa esiguqukayo, khona-ke indlela ye-<I-require>require()</I-require> iyisinqumo esihle
ngezinga elincane lokubhala ikhodi eyengeziwe.
Kwezinhlelo ezincane noma i-react-native, sincoma ukusebenzisa i-<I-require>require()</I-require> ukwakha izimpahla ku
amaphakethe akho alayishwayo.
useGlotstack()
ngaphakathi kwamakomponenti akho.
import * as React from 'react'
import {useGlotstack} from 'glotstack'
function MyComponent() => {
const {t} = useGlotstack()
return (
<div>
{t('Quickstart.example', {assigns: {userName: 'JD'}})}
{/* Icon can be a function reference or a node */}
{t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
</div>
)
}
Dala ifayela lomthombo lokuhumusha
Ungasebenzisa ulimi lwakho lwendabuko, kodwa i-Glotstack izobeka ngokuzenzakalelayo ku-en-US.json
. Sincoma ukufaka endaweni efana ne-./translations/en-US.json
. Uma ukhathazekile ngosayizi wokuhlanganisa, yehlisa ngosayizi ngokuhlukanisa usebenzisa amafayela avulekile afana ne-./public/translations/en-US.json
.
Awuthandi ukuguqula i-JSON?
Zama ukubhala ifayela lakho lezinguqulo nge-YAML (thina siyakwenza!)
i18n nge-YAMLThola izinguqulo.
Inketho 1
: Dala i-
.glotstack.json
kuphrojekthi yakho.
Ungasebenzisa ukhiye we-API ohlinzekiwe kufayela le-config. Uzokwazi
ukwenza izinguqulo eziyi-10 ngaphambi kokuba kudingeke ubhalise.
Qalisa get-translations
.
yarn glotstack get-translations
Maduze! Ukuhumusha bukhoma nge-yarn glotstack live-translate
.
Inketho 2:
Sebenzisa i-CLI ukuthola izinguqulo zakho.
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg=="
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
Ukusebenzisa itheminali kuyavunyelwa! Kodwa izinketho zethu zingashintsha kaningi
futhi kuzoba lula kithi ukufaka ikhodi yokuguqula ye-codemod kwifayela lakho
kunokuba sibuyekeze umyalo wakho ogciniwe.