Votre site Astro est rapide, votre code est propre et vos pages sont exactement là où vous les voulez. Imaginez maintenant offrir la même expérience à vos visiteurs en espagnol, français, japonais et dans plus de 100 autres langues, sans avoir à créer un site distinct pour chacune.
C'est ce que nous apportons à Astro.
Découvrez Universally pour Astro, notre premier SDK conçu pour un framework JavaScript.
Il apporte la traduction assistée par l'IA directement dans votre projet Astro, vous permettant de servir des pages multilingues à partir de votre base de code existante, sur votre propre domaine, avec du HTML rendu côté serveur.
Pas de dossiers de pages dupliqués. Pas de fichiers de traduction tentaculaires à maintenir. Juste les pages que vous créez déjà, prêtes pour un public mondial.
Et la prise en main ne nécessite que quelques lignes de code.
Un seul jeu de pages pour chaque langue
Avec Universally pour Astro, vous ne créez pas un deuxième site. Vous continuez à écrire des pages comme vous le faites déjà.
Avec Universally pour Astro, vous conservez vos fichiers .astro existants et servez chaque langue à sa propre URL. Ainsi, votre page /about peut devenir /fr/about, /es/about, et plus encore sans dupliquer la page elle-même.
Il suffit d'encapsuler votre texte visible dans t() et vos liens internes dans href(), tous deux extraits de 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>Sur vos pages dans la langue source, t() renvoie votre texte original intact. Sur une page traduite, il renvoie la traduction, et href() ajoute le bon préfixe de langue afin que les visiteurs restent dans leur langue lorsqu'ils naviguent.
Besoin de modifier une phrase ? Ouvrez la chaîne dans votre tableau de bord Universally et modifiez-la là. Vos règles de glossaire s'appliquent également, de sorte que les noms de marque et les termes de produits apparaissent comme vous le souhaitez dans chaque langue.
Vous pouvez voir toutes les options dans notre guide pour traduire des pages dans Astro.
La configuration prend quelques lignes, pas une réécriture
La prise en main ressemble beaucoup à l'ajout de toute autre intégration Astro.
Tout d'abord, créez un nouveau projet dans votre tableau de bord Universally, choisissez Astro comme technologie, et sélectionnez SDK sur l'écran des instructions de configuration.
Ensuite, installez le package :
npm install @universally-sdk/astroCela fonctionne également avec pnpm, yarn et bun.
À partir de là, ajoutez la clé API de votre projet à .env en tant que UNIVERSALLY_API_KEY, puis enregistrez l'intégration dans astro.config.mjs.
Et elle ressemblera à ceci :
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()],
});Enfin, placez <UniversallyHead /> dans le <head> de votre mise en page. Il ajoute des liens hreflang et le sélecteur de langue, il n'y a donc rien d'autre à configurer.
C'est tout ! Ajoutez une langue cible dans votre tableau de bord, redémarrez votre serveur de développement et ouvrez /fr/about pour voir votre page en français.
Universally pour Astro fonctionne avec Astro 5 ou plus récent, pour les sites rendus côté serveur et statiques. Pour une présentation complète, suivez notre guide pour installer l'intégration Astro.
Vos pages n'attendent jamais une traduction
L'ajout de langues à un site ne devrait pas le ralentir. Nous avons conçu le SDK dans cette optique.
Lorsque votre serveur ou votre build démarre, Universally charge vos traductions en mémoire. Chaque appel à t() est une recherche rapide en mémoire, ainsi aucun visiteur n'attend une requête de traduction.
L'ajout de nouveau contenu fonctionne de la même manière. Lorsque vous publiez une page avec du nouveau texte, le premier visiteur voit votre formulation originale pendant que Universally traduit les nouvelles chaînes en arrière-plan. La version traduite apparaît généralement lors d'un rendu ultérieur, en une seconde ou deux.
Les modifications que vous apportez dans le tableau de bord parviennent à votre site en direct via une notification signée, et votre serveur vérifie également les changements toutes les 60 secondes par défaut. Vous utilisez un site statique ? Vos traductions sont intégrées au moment de la compilation, et une recompilation rapide permet de récupérer les nouveautés.
Notre guide des mises à jour de traduction explique exactement comment cela fonctionne sur chaque configuration.
Vous continuez à publier. Vos traductions suivent.
Prêt à rendre votre site Astro mondial ?
La prochaine fois que quelqu'un demandera une version espagnole, vous n'aurez pas à copier des dossiers ou à gérer une pile de clés de traduction.
Universally pour Astro est disponible dès maintenant en version bêta !
Installez le package, enveloppez votre texte dans t(), et commencez à accueillir les visiteurs dans plus de 110 langues.
Commencez avec Universally gratuitement !
Comme il s'agit de notre premier SDK de framework, vos commentaires détermineront sa prochaine orientation. Vous construisez quelque chose avec ? Dites-nous ce qui fonctionne, signalez un bug ou suggérez une fonctionnalité via notre page de contact.
Ajouter un commentaire