Introduction
Le paquet créé par webO3 vous aide à gérer vos traductions via des commandes artisan. La découverte automatique des paquets est activée avec Laravel >= 5.5.
Prérequis
- PHP >= 5.6
- Laravel >= 5.4
- Composer
Télécharger via composer :
# Installer un nouveau projet laravel
laravel new translator-project
# Ajouter le paquet au projet
cd translator-project
composer require webo3/laravel-translator
Pour Laravel <5.5
Vous devez enregistrer le "service provider" dans app.php:
webO3\Translator\TranslatorServiceProvider::class,
Configuration
Vous devez spécifier les langues que vous souhaitez gérer avec les extensions.
Pour créer le fichier config/webo3-translator.php, utilisez la commande suivante:
php artisan vendor:publish --provider=webO3\\Translator\\TranslatorServiceProvider --tag=config
Extraction des traductions
Le paquet fonctionne en balayant le code source pour les traductions utilisant la fonction __().
La commande translations:scan recherche __() dans les fichiers du dossier "/app" et "/resources" ayant les extensions suivantes: *.php, *.js, *.vue. Il créera ensuite un fichier pour chaque langue activée dans resources/lang/{language}.json avec toutes les paires de clés / valeur pour les traductions..
Le fichier JSON sera chargé par Laravel pour traduire les chaînes que vous utilisez dans le code source par défaut.
Pour analyser et extraire les chaînes de traduction, utilisez la commande suivante:
php artisan translations:scan
Exportation des traductions
Pour vous aider avec les traductions, nous utilisons un script qui exportera tout le contenu JSON dans un fichier .csv. Vous pourrez ensuite le partager au format Excel ou dans son format CSV d'origine. Dans le fichier, nous aurons plusieurs colonnes, une pour la clé et une pour chacune des langues. La clé est la chaîne utilisée dans la fonction __(). Si les traductions n'existent pas, il les utilisera à la place. Voici un exemple si les langues française et anglaise sont activées dans notre fichier de configuration.
key | en | fr |
---|---|---|
This is an example key. | This is an example key. | Ceci est un exemple de clés. |
This key as an error. | This key has an error. | Cette clé à une erreur. |
Lorsque nous envoyons ce fichier à notre traducteur, nous devons leur spécifier de ne pas toucher la colonne de "key", qui est notre référence pour la traduction. S'il y a une erreur dans la clé, cela n'a pas d'importance, corrigez-la simplement dans la colonne de langue correspondante.
Pour créer le fichier translations.csv, utilisez la commande suivante:
php artisan translations:export
Importation de traductions
Maintenant que nous avons traduit le fichier CSV, remettez-le en place et importez-le à l'aide de la commande suivante:
php artisan translations:import
Utilisation du fichier de traduction dans Vue.js
Pour pouvoir utiliser le fichier JSON dans Vue.js, nous devons ajouter un package NPM. (vue-i18n).
npm install vue-i18n --save-dev
Ajoutez ce qui suit dans le fichier app.js.
// Charger les traductions
let text_fr = require("../lang / fr.json");
let text_en = require("../lang / en.json");
// Définir les paramètres régionaux actuels
let locale = "en";
// Init VueI18n
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
window.i18n = new VueI18n({
locale: locale,
silentTranslationWarn: true,
messages: {
en: text_en,
fr: text_fr
}
});
Il sera alors possible d’utiliser les fonctions de VueI18n pour traduire à l'aide des fonctions \$t() ou i18n.t();
i18n.t("This is an example key.");
Ou dans le modèle de vue:
<a :title="$t('This is an example key.')">
{{ $t('This is an example key.') }}
</a>