vagejs
GitHub Commencer

Des sites en plusieurs langues
Un seul site, toutes les langues dont vous avez besoin.

vagejs est un générateur de sites statiques qui intègre les sites multilingues. Un seul site contient toutes les langues, chacune dans son propre dossier, avec les bonnes balises de langue et hreflang sur chaque page, et une vérification qui liste les pages encore en attente de traduction. Cette fonctionnalité fait partie de vagejs depuis la version 0.10.

npm create vagejs@latest my-site

Lire la documentation multilingueSuivre le guide pas à pas

Comment ça marche

Vos visiteurs ne lisent pas tous la même langue. Vos pages en anglais restent exactement là où elles sont, les pages en français vont dans un dossier fr, et les pages en allemand dans de. Chaque page connaît sa langue, et les traductions pointent les unes vers les autres.

Vous écrivez Les visiteurs obtiennent
src/pages/about.md /about/, en anglais
src/pages/fr/about.md /fr/about/, la version française
src/pages/de/ueber-uns.md avec translationOf: /about/ /de/ueber-uns/, la version allemande, avec sa propre adresse en allemand

Une page qui porte le même nom de fichier dans un dossier de langue est sa traduction. Vous voulez une adresse dans la langue du visiteur ? Ajoutez une ligne qui indique quelle page elle traduit. Vous listez vos langues une seule fois, dans vage.config.ts :

TypeScript
export default defineConfig({
  site: "https://example.com",
  lang: "en",
  i18n: { locales: ["fr", "de"] },
});

Ce que vous obtenez

Nous nous occupons des détails pénibles d'un site multilingue, pour que vous puissiez vous concentrer sur les mots.

  • La bonne langue sur chaque page

    Les pages en français indiquent qu'elles sont en français : les lecteurs d'écran les prononcent correctement et les moteurs de recherche savent à qui elles s'adressent.

  • Des balises hreflang écrites pour vous

    Chaque version d'une page renvoie vers les autres. Google utilise ces liens pour montrer aux gens la version dans leur propre langue.

  • Un sélecteur de langue sans comptabilité

    Votre layout reçoit la liste des traductions de la page qu'il affiche, si bien qu'un sélecteur pointe toujours vers des pages qui existent.

  • Une vérification des traductions manquantes

    npm run check liste chaque page qui n'a pas de version dans l'une de vos langues, et nomme le fichier à ajouter. Une mauvaise balise de langue, ou une traduction qui ne pointe nulle part, arrête le build.

  • Des flux par langue

    Un flux de blog pour /fr/blog/ contient les articles en français et indique qu'il est en français.

  • Des menus et des listes par langue

    Donnez à chaque langue son propre menu, et listez uniquement les pages d'une langue, comme les articles de blog en français, avec collection().

    Voir dans vos layouts

À qui s'adressent les sites multilingues avec vagejs

  • Aux entreprises dont les clients parlent plusieurs langues

    Vous servez des gens en deux ou trois langues et vous voulez un seul site à entretenir, pas trois.

  • Aux produits dont la documentation existe en plusieurs langues

    Vous traduisez votre documentation une page à la fois, et la vérification tient le compte de ce qui reste.

  • À toute personne dont l'assistant IA fait la traduction

    La vérification montre à votre assistant exactement ce qui manque, et vous relisez ce qu'il écrit.

Ce que ça ne fait pas

Nous préférons que vous connaissiez les limites dès le départ.

  • vagejs ne traduit pas les pages pour vous. C'est vous, un traducteur ou votre assistant IA qui écrivez chaque version.
  • Il n'envoie pas les visiteurs vers une langue selon les réglages de leur navigateur. Un sélecteur de langue fonctionne de façon plus fiable sur un site statique.
  • llms.txt et le sitemap listent toutes les langues ensemble, pas un fichier par langue.

Pour aller plus loin sur les sites multilingues avec vagejs

D'autres générateurs de sites statiques intègrent aussi le multilingue ; chez certains, il est plus ancien et couvre des configurations plus complexes. Voir comment vagejs se compare.

Questions sur les sites multilingues

Dois-je traduire toutes les pages ?

Non. Une page sans traduction existe simplement dans une seule langue. Si vous ne traduisez que certaines pages, listez-les sous i18n.pages dans vage.config.ts (vagejs 0.15.1 et plus récent), et vage check ne demande des traductions que pour ces pages-là.

Une traduction manquante empêche-t-elle mon site de se construire ?

Non. Une traduction manquante est un avertissement, donc le site se construit pendant que vous traduisez. Lancez vage check --strict si vous voulez que les avertissements fassent échouer la vérification aussi. Les vraies erreurs, comme une mauvaise balise de langue ou un translationOf qui pointe vers une page qui n'existe pas, sont des erreurs.

Quels codes de langue puis-je utiliser ?

Les codes de langue standard, comme fr, de ou pt-BR. Votre langue principale va dans lang, et les autres dans i18n.locales. Ne listez pas votre langue principale deux fois.

Puis-je ajouter des langues à un site existant ?

Oui. Vos pages dans la langue principale gardent leurs adresses, donc rien de ce que vous avez publié ne bouge. Ajoutez les nouvelles langues dans vage.config.ts et placez chaque traduction dans le dossier de sa langue.

Commencez avec une seule commande.
Votre site tourne en une minute.

npm create vagejs@latest my-site

Lire la documentationL'utiliser avec votre assistant IA