Moderni verkkototeutus perustuu harvoin staattiseen HTML:ään. Sisältö injektoidaan JavaScriptin avulla, haetaan API:en kautta tai renderöidään asiakaspuolella käyttäen kehyksiä, kuten React tai Vue. MultiLipi on suunniteltu käsittelemään tätä "Volatile DOM." Skriptimme ei käännä sivua vain kerran latauksen yhteydessä; se luo pysyvän MutationObserver tunnistaakseen ja kääntääkseen uusia solmuja, kun ne lisätään DOM-puuhun.

Tämä opas selittää, miten infrastruktuurimme käsittelee dynaamisia tietoja, AJAX-pyyntöjä ja interaktiivisia tiloja.

1. "Volatile"-sisällön haaste

Tavalliset käännösvälityspalvelimet epäonnistuvat, kun sisältö muuttuu alkuperäisen latauksen jälkeen.

MultiLipi tukee:

Asiakaspuolen renderöinti (CSR)

React-, Vue-, Angular- tai Svelte-alustoille rakennetut sovellukset.

Asynkroniset haut

AJAX/Fetch API:en kautta ladattu sisältö (esim. loputon vieritys tai hakutulokset).

Interaktiiviset tilat

Lomakkeen validoinnin virheet, ostoskorin summat ja ilmoitusviestit.

2. Tekniikka-arkkitehtuuri

Kuinka käännämme rikkomatta sovellustasi.

JavaScript-moottorimme suorittaa jatkuva valvontaprosessi asiakaspuolella:

DOM-tarkkailu:

MutationObserver

Käytämme selaimen natiivia MutationObserver API:a muutosten tarkkailuun -elementissä.

Tunnistus:

Kun sovelluksesi lisää uuden

-elementin (esim. avatessaan modaali-ikkunan), tarkkailijamme liputtaa sen välittömästi.

Välitön injektointi:

< 50ms

Teksti lähetetään paikalliseen välimuistiimme tai API:imme. Jos muistissa on käännös, se vaihdetaan välittömästi (usein alle 50 ms:ssa), mikä näyttää käyttäjälle saumattomalta.

Tilan säilytys:

vain tekstitason solmut

Muokkaamme vain teksti solmuja. Emme tuhoa DOM-elementtejä tai poista tapahtumankuuntelijoita, varmistaen, että React/Vue-sidoksesi pysyvät ennallaan.

3. Dynaamisen tekstin parhaat käytännöt

Jotta MutationObserver toimisi tehokkaasti, noudata näitä arkkitehtuuriohjeita:

Vakaat tekstisolmut

Vältä merkkijonoja, jotka muuttuvat joka sekunti (kuten lähtölaskuri: "00:01", "00:02"). Tämä kuormittaa käännösmoottoria tuhansilla yksilöllisillä pyynnöillä.

Suositeltu lähestymistapa:

Aika: 00:01

Puhdas HTML-kääre

Varmista, että teksti on kääritty tiettyihin tunnisteisiin (

, ,

) eikä kellu vapaasti -elementissä. Tämä auttaa tarkkailijaa eristämään segmentin.

Paras käytäntö:

Tekstisi tähän

Irtonainen teksti

Vältä "kirjoitusefektejä"

Skriptit, jotka kirjoittavat tekstiä merkki merkiltä (k... ka... kas... kaski) sekoittavat käännösohjelmia. Näytä koko tekstimerkkijono kerralla.

Toteutusvinkki:

// Render complete text instead of character-by-character animation
<p>{fullText}</p>

4. Poikkeustapaus: iFramet

Huomautus koskien eri alkuperää koskevia rajoituksia.

Jos dynaaminen sisältösi sijaitsee iFrame (esim. kolmannen osapuolen chat-widget tai maksuyhdyskäytävä):

Sama alkuperä:

Jos iFrame isännöidään verkkotunnuksesi, MultiLipi voidaan kääntää.

Cross Origin:

Jos iFrame latautuu ulkoisesta verkkotunnuksesta (esim. Stripe, Intercom), me ei voida kääntää selainten turvakäytäntöjen (CORS) vuoksi.

Sinun on määritettävä käännösasetukset suoraan kyseisessä kolmannen osapuolen työkalussa.

Yhteenveto

Sinun ei tarvitse asentaa erityisiä SDK:ita Reactille tai Angularille. Kun MultiLipi-skripti on aktiivinen, se kytkeytyy automaattisesti selaimen renderöintimoottoriin kääntääksesi minkä tahansa sisällönstaattinen tai dynaaminen—joka näkyy ruudulla.

Kuinka kääntää dynaamista sisältöä MultiLipin avulla