Docusaurus

Création de projet

• Création de projet basique guide d'installation officielle.

  npx create-docusaurus@latest my-website-example classic

• Création de projet avec TypeScript

  npx create-docusaurus@latest my-website-example classic --typescript

Configurer des projets de traduction

Nous devons installer le package translate-projects-docusaurus dans notre projet.

npm i translate-projects-docusaurus -D

Ajouter la configuration i18n dans docusaurus.config.js

Le fichier doit avoir la structure suivante avec les langues que vous souhaitez traduire.

Vous pouvez voir la configuration officielle. configuration i18n docusaurus

docusaurus.config.js

  i18n: {
    defaultLocale: 'es',
    locales: ['es','fr','en','hi','de'],
    localeConfigs: {
      es: { label: 'Español' },
      fr: { label: 'Français' },
      en: { label: 'English' },
      hi: { label: 'हिंदी' },
      de: { label: 'Deutsch' },
    },
  },

Ajouter une liste de langues dans le menu de la barre latérale.

Vous pouvez voir plus d'informations sur le positionnement dans sa documentation. Positionnement de la barre de navigation

docusaurus.config.js

export default {
  themeConfig: {
    navbar: {
      items: [
        {
          type: 'localeDropdown',
          position: 'right',
        },
      ],
    },
  },
};

Vous visualiserez quelque chose comme cela sur votre site web. 🤯

Créer un dossier de base pour les traductions

Crée un dossier appelé translate à la racine de ton projet, dans lequel tu vas créer ta structure de répertoires pour la documentation de ton projet.

Création de dossier

mkdir translate

Après avoir créé le dossier translate, nous allons copier nos dossiers d'intérêt à traduire à l'intérieur.

Faire une copie de notre projet.

cp -r docs translate/
cp -r blog translate/

Ce serait notre structure de répertoires.

Structure du projet

docs/
blog/
translate/
  - docs/
  - blog/

Notre syntaxe est simple.

Tout ce que tu mets entre crochets sera traduit, je te laisse l'exemple suivant...

Très important d'utiliser les accolades doubles pour que ça fonctionne et de ne pas oublier de les fermer.

Nous allons éditer notre fichier translate/docs/intro.md, nous mettrons à jour notre titre et notre description.

Créer un fichier de configuration pour les traductions.

Créez un fichier nommé translate.js dans le dossier utils et ajoutez le code suivant :

Comando crear archivo

mkdir -p utils && touch utils/translate.js

• Configuration translate.js

utils/translate.js

const { translateProject }  = require('translate-projects-docusaurus');

translateProject({
    defaultLocale: 'es', //Langue par défaut
    locales: ['en'], // Liste des langues
    apikey: '#' // Api Key
})

---

Créer un compte

🚀 Automatisez et optimisez vos traductions.

Pour tirer le meilleur parti de Translate Projects, vous avez besoin d'une clé API. Inscrivez-vous sans engagement.

• Nous ne demandons pas de carte de crédit pour essayer Translate Projects.

Bénéfices à obtenir votre clé API

• Administration Intelligente: Synchronisez et gérez automatiquement les traductions de vos projets.
• Panneau Administratif Exclusif: Personnalisez et supervisez toutes vos traductions depuis une interface centralisée.
• Support Prioritaire: Recevez une assistance technique rapide et spécialisée quand vous en avez besoin.
• Traductions Précises: Notre technologie comprend le contexte de votre code pour offrir des traductions exactes.
• 30 000 Eniacs de Bienvenue: Testez toutes les fonctionnalités sans engagement avec des jetons internes qui améliorent vos traductions.

Inscrivez-vous maintenant et obtenez votre clé API pour débloquer tout le potentiel de Translate Projects !

Créer un compte maintenant→

---

Configurer la commande pour npm

Ajouter la commande suivante dans votre fichier package.json :

package.json

"scripts": {
  "translate": "node ./utils/translate.js"
}

Activer l'aperçu en mode de développement

Tu dois simplement activer le mode debug.

utils/translate.js

const { translateProject }  = require('translate-projects-docusaurus');

translateProject({
    defaultLocale: 'es',
    locales: ['en'],
    apikey: '#',
    debug: true 
})

Avant, nous devons activer la langue par défaut avec la commande suivante, dans mon cas, j'ajouterai es, mais vous pouvez utiliser celle que vous avez par défaut. Documentation officielle write-translations

npm run write-translations -- --locale es

Exécutez la commande npm run translate et vous verrez quelque chose comme ça :

Exécuter le mode debug

• Puedes ejecutar en una ventana de tu terminal

  docusaurus start --locale es

• En otra ventana de tu terminal ejecutas

  npm run translate

Il écoutera les changements que vous effectuez dans le dossier ./translate, afin que vous puissiez voir en temps réel ce que vous modifiez dans votre projet.

Chaque fois que vous modifiez un fichier, celui-ci sera automatiquement actualisé sur votre site web.

Générer des traductions (production)

• Tu dois changer le mode debug=false

• ensuite tu exécutes la commande

  npm run translate

  Le temps d'attente dépend du nombre de traductions que vous avez.

  

• Structure des dossiers dans le répertoire i18n

  

Après avoir obtenu tes traductions, tu peux compiler ton projet.

npm run build

Lorsque vous avez terminé, exécutez la commande npm run serve pour voir votre résultat.

npm run serve

Options de configuration

El objeto ConfigOptions le permite personalizar el comportamiento de Translate Projects. A continuación se muestra un desglose detallado de todas las opciones disponibles.

Configuration générale (config)

Paramètre	Type	Description
outputDir	string	Le répertoire où les fichiers traduits seront enregistrés.

Langues

Paramètre	Type	Description
locales	TypeListLang[]	Un tableau de langues prises en charge par exemple ['es','en','ko']
defaultLocale	TypeListLang	La langue par défaut qui sera utilisée. es

API Key

Paramètre	Type	Description
apiKey	string	Votre clé API pour le service de traduction.

Debug Mode

Paramètre	Type	Description
debug	boolean	Active le mode de débogage pour prévisualiser vos modifications avant de les envoyer à traduire.

Blog Configuration (blog)

Paramètre	Type	Description
baseDir	string	Le répertoire où se trouvent les fichiers de votre blog.
outputDir	string	Le répertoire où seront enregistrés les fichiers traduits du blog.
enable	boolean	Active ou désactive la traduction du blog.

Docs Configuration (docs)

Paramètre	Type	Description
baseDir	string	Le répertoire où se trouvent vos fichiers de documentation.
outputDir	string	Le répertoire où seront enregistrés les fichiers de la documentation traduite.
enable	boolean	Active ou désactive la traduction de la documentation.

React Configuration (react)

Paramètre	Type	Description
enable	boolean	Active ou désactive les fonctions de traduction spécifiques à React.

Theme Configuration (theme)

Paramètre	Type	Description
enable	boolean	Active ou désactive la traduction du thème.
ignoreKeys	string[]	Un tableau de clés à ignorer lors de la traduction du thème.
recreateFiles	string	(Opcional) Spécifiez si les fichiers de thème doivent être recréés lors de la traduction.

Support

Nous sommes ici pour t'aider.

Si tu as des questions, besoin d'aide ou souhaites contribuer, n'hésite pas à me contacter. Je suis à ta disposition pour t'aider dans ce dont tu as besoin.

• Site web: neiderruiz.com
• GitHub: @neiderruiz
• Twitter: @neiderruiz
• YouTube: Neider Ruiz

Soutenir le projet

Si ce projet t'a été utile, je t'invite à m'offrir un café. Ton soutien m'aide à continuer à m'améliorer et à créer du contenu de valeur. Merci d'être ici ! ☕