Saluta Universally per Astro: traduci il tuo sito direttamente dal tuo codice

Il tuo sito Astro è veloce, il tuo codice è pulito e le tue pagine sono esattamente dove le vuoi. Ora immagina di offrire la stessa esperienza ai visitatori in spagnolo, francese, giapponese e oltre 100 altre lingue, senza dover costruire un sito separato per ognuna.

Questo è ciò che portiamo ad Astro.

Ti presentiamo Universally per Astro, il nostro primo SDK creato per un framework JavaScript.

Porta la traduzione basata sull'intelligenza artificiale direttamente nel tuo progetto Astro, permettendoti di servire pagine multilingue dal tuo codebase esistente, sul tuo dominio, con HTML renderizzato lato server.

Nessuna cartella di pagine duplicata. Nessun file di traduzione sparso da mantenere. Solo le pagine che stai già costruendo, pronte per un pubblico globale.

E iniziare richiede solo poche righe di codice.

Un Set di Pagine per Ogni Lingua

Con Universally per Astro, non costruisci un secondo sito. Continui a scrivere pagine nel modo in cui già fai.

Con Universally per Astro, mantieni i tuoi file .astro esistenti e servi ogni lingua al proprio URL. Così la tua pagina /about può diventare /fr/about, /es/about e altro ancora senza duplicare la pagina stessa.

Tutto ciò che serve è racchiudere il tuo testo visibile in t() e i tuoi link interni in href(), entrambi prelevati da Astro.locals:

---
const { t, href } = Astro.locals;
---
<h1>{t('Plan your next trip')}</h1>
<p>{t('Find flights, hotels, and tours in one place.')}</p>
<a href={href('/pricing')}>{t('See pricing')}</a>

Nelle tue pagine in lingua sorgente, t() restituisce il tuo testo originale intatto. Su una pagina tradotta, restituisce la traduzione e href() aggiunge il prefisso linguistico corretto in modo che i visitatori rimangano nella loro lingua mentre navigano.

Hai bisogno di modificare una frase? Apri la stringa nella tua dashboard Universally e modificala lì. Anche le tue regole del glossario si applicano, quindi nomi di brand e termini di prodotto escono nel modo desiderato in ogni lingua.

Puoi vedere tutte le opzioni nella nostra guida per tradurre pagine in Astro.

La configurazione richiede Poche Righe, Non una Riscrittura

Iniziare assomiglia molto all'aggiunta di qualsiasi altra integrazione Astro.

Innanzitutto, crea un nuovo progetto nella tua dashboard Universally, scegli Astro come tecnologia e seleziona SDK nella schermata Istruzioni di configurazione.

Successivamente, installa il pacchetto:

npm install @universally-sdk/astro

Funziona anche con pnpm, yarn e bun.

Da qui, aggiungi la chiave API del tuo progetto a .env come UNIVERSALLY_API_KEY, quindi registra l'integrazione in astro.config.mjs.

E avrà un aspetto simile a questo:

import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
import universally from '@universally-sdk/astro';

export default defineConfig({
  site: 'https://example.com',
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [universally()],
});

Infine, inserisci <UniversallyHead /> nell'<head> del tuo layout. Aggiunge link hreflang e il selettore di lingua, quindi non c'è nient'altro da collegare.

Fatto! Aggiungi una lingua di destinazione nella tua dashboard, riavvia il tuo server di sviluppo e apri /fr/about per vedere la tua pagina in francese.

Universally per Astro funziona con Astro 5 o versioni successive, sia per siti renderizzati lato server che statici. Per la guida completa, segui la nostra guida per installare l'integrazione Astro.

Le tue pagine non aspettano mai una traduzione

Aggiungere lingue a un sito non dovrebbe rallentarlo. Abbiamo progettato l'SDK pensando a questo.

Quando il tuo server o la tua build si avviano, Universally carica le tue traduzioni in memoria. Ogni chiamata t() è una rapida ricerca in memoria, quindi nessun visitatore rimane in attesa di una richiesta di traduzione.

L'aggiunta di nuovi contenuti funziona allo stesso modo. Quando pubblichi una pagina con nuovo testo, il primo visitatore vede la tua dicitura originale mentre Universally traduce le nuove stringhe in background. La versione tradotta di solito appare in un rendering successivo entro uno o due secondi.

Le modifiche apportate nella dashboard raggiungono il tuo sito live tramite un push firmato, e il tuo server controlla anche le modifiche ogni 60 secondi per impostazione predefinita. Stai eseguendo un sito statico? Le tue traduzioni sono integrate al momento della build e una rapida ricostruzione rileva eventuali novità.

La nostra guida agli aggiornamenti delle traduzioni illustra esattamente come funziona su ogni configurazione.

Continua a pubblicare. Le tue traduzioni ti seguiranno.

Pronto a rendere globale il tuo sito Astro?

La prossima volta che qualcuno chiederà una versione spagnola, non dovrai copiare cartelle o gestire un mucchio di chiavi di traduzione.

Universally per Astro è ora disponibile in Beta!

Installa il pacchetto, racchiudi il tuo testo in t() e inizia ad accogliere visitatori in oltre 110 lingue.

Inizia subito con Universally gratuitamente!

Dato che questo è il nostro primo SDK per framework, il tuo feedback plasmerà i suoi sviluppi futuri. Stai costruendo qualcosa con esso? Dicci cosa funziona, segnala un bug o suggerisci una funzionalità tramite la nostra pagina dei contatti.