Guide d’internationalisation (i18n) et de localisation Rails

Configuration de l’internationalisation Rails (i18n)

L’internationalisation Rails nécessite trois étapes de configuration : définir les paramètres régionaux disponibles, ajouter les paramètres régionaux à vos URL et faire en sorte que Rails charge les bons paramètres régionaux pour chaque requête. Vous voudrez également installer la gem rails-i18n, qui fournit des données de paramètres régionaux telles que les noms de mois traduits, les règles de pluralisation et les messages d’erreur Rails par défaut.

Définir les paramètres régionaux disponibles

Tout d’abord, dans config/application.rb, indiquez à Rails quelles langues l’application doit prendre en charge et définissez des paramètres régionaux par défaut :

config.i18n.default_locale = :en
config.i18n.available_locales = [:en, :es, :de]

config.i18n.default_locale = :en
config.i18n.available_locales = [:en, :es, :de]

Cette configuration indique à Rails :

• L’anglais (:en) est la langue par défaut
• L’application prend en charge l’anglais, l’espagnol et l’allemand
• Les utilisateurs peuvent basculer entre ces trois langues

Vous pouvez ajouter tous les codes de langue dont vous avez besoin.

Ajouter les paramètres régionaux aux URL

Ensuite, ajoutez les paramètres régionaux à l’URL afin que chaque langue ait son propre chemin, comme /en/time ou /es/time :

# config/routes.rb
scope "/:locale" do
 get '/time', to: 'home#index', as: :time_display
end

# config/routes.rb
scope "/:locale" do
  get '/time', to: 'home#index', as: :time_display
end

Cela crée des URL spécifiques aux paramètres régionaux pour votre application Rails. Les utilisateurs peuvent accéder aux différentes versions linguistiques en modifiant le paramètre de paramètres régionaux dans l’URL.

Configurer le changement de paramètres régionaux

Enfin, dans app/controllers/application_controller.rb, assurez-vous que Rails charge les bons paramètres régionaux à partir de l’URL et les inclut dans tous les liens :

class ApplicationController < ActionController::Base
 around_action :switch_locale

 def switch_locale(&action)
 locale = params[:locale] || I18n.default_locale
 I18n.with_locale(locale, &action)
 end

 def default_url_options
 { locale: I18n.locale }
 end
end

class ApplicationController < ActionController::Base
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

Ce code :

• Lit les paramètres régionaux à partir du paramètre d’URL
• Revient aux paramètres régionaux par défaut si aucun paramètre n’est présent
• Garantit que toutes les URL générées incluent les paramètres régionaux actuels

Installer la gem rails-i18n

La gem rails-i18n fournit des données de paramètres régionaux pour plusieurs langues, notamment les noms de mois traduits, les règles de pluralisation et les messages d’erreur Rails par défaut. Cela vous évite de traduire vous-même ces chaînes standard.

Ajoutez-la à votre Gemfile :

gem 'rails-i18n'

Ensuite, exécutez :

bundle install

Rails est maintenant entièrement configuré pour l’internationalisation.

Ajouter un sélecteur de langue

Maintenant que votre application Rails prend en charge plusieurs paramètres régionaux, vos utilisateurs internationaux ont besoin d’un moyen de basculer entre les langues. Rails rend cela simple car la méthode default_url_options dans ApplicationController inclut automatiquement les paramètres régionaux actuels dans toutes les URL générées.

Cela signifie que vous pouvez créer un sélecteur de langue qui met uniquement à jour le paramètre de paramètres régionaux tout en gardant l’utilisateur sur la même page.

Créer l’interface du sélecteur de langue

Ajoutez le sélecteur de langue à votre fichier de mise en page. Dans notre application de démonstration, le sélecteur est ajouté dans app/views/layouts/application.html.erb :

<nav>
  <%= link_to "English", url_for(locale: :en) %> |
  <%= link_to "Español", url_for(locale: :es) %> |
  <%= link_to "Deutsch", url_for(locale: :de) %>
</nav>

<nav>
  <%= link_to "English", url_for(locale: :en) %> |
  <%= link_to "Español", url_for(locale: :es) %> |
  <%= link_to "Deutsch", url_for(locale: :de) %>
</nav>

Chaque lien utilise url_for(locale: :locale_code) pour générer une URL avec les paramètres régionaux spécifiés. Lorsqu’un utilisateur clique sur un lien :

• La méthode switch_locale dans ApplicationController détecte le changement
• Rails affiche la page dans la nouvelle langue

Parce que vous avez défini default_url_options dans ApplicationController, Rails inclut automatiquement les paramètres régionaux dans tous les liens générés. Cela signifie que les paramètres régionaux persistent lorsque les utilisateurs naviguent dans votre application. Vous n’avez pas besoin d’ajouter manuellement des paramètres de paramètres régionaux à chaque lien.

Styliser votre sélecteur de langue

Vous pouvez styliser le sélecteur de langue dans app/assets/stylesheets/application.css pour qu’il corresponde à votre design. L’application de démonstration inclut un style de base pour rendre le sélecteur visible et convivial.

Configuration des clés de traduction dans les vues Rails

Avant de pouvoir traduire votre application, tout le texte visible par l’utilisateur doit se trouver dans les fichiers i18n Rails au lieu d’être codé en dur. Rails fournit la méthode d’aide t (abréviation de translate) pour rechercher et afficher les chaînes traduites.

Remplacer le texte codé en dur par des clés de traduction

Rails utilise l’aide intégrée I18n.t (ou simplement t) pour rechercher des chaînes dans vos fichiers de traduction.

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

Le texte codé en dur n’apparaîtra pas dans votre fichier YAML, ce qui signifie qu’il ne pourra pas être traduit ultérieurement. Utilisez toujours des clés de traduction pour tout texte visible par l’utilisateur.

Utiliser l’interpolation dans les traductions

Avez-vous remarqué le paramètre time: @time dans l’exemple ci-dessus ? C’est ce qu’on appelle l’interpolation. Elle vous permet d’insérer des valeurs dynamiques dans vos traductions. La chaîne de traduction dans votre fichier YAML utilise %{time} comme placeholder :

current_time: "Current time: %{time}"

current_time: "Current time: %{time}"

Lorsque vous appelez l’aide t avec time: @time, Rails remplace %{time} par la valeur réelle. Vous pouvez utiliser les noms de variables que vous souhaitez – assurez-vous simplement qu’ils correspondent entre le fichier YAML et votre vue.

Recherche paresseuse pour un code plus propre

Lorsque vos clés de traduction sont organisées pour correspondre à la structure de votre dossier de vues, Rails vous permet d’utiliser un raccourci appelé recherche paresseuse. Au lieu d’écrire le chemin complet de la clé, utilisez un point initial :

<!-- Au lieu de ceci : -->
<%= t('home.index.hello') %>

<!-- Vous pouvez écrire ceci : -->
<%= t('.hello') %>

<!-- Instead of this: -->
<%= t('home.index.hello') %>

<!-- You can write this: -->
<%= t('.hello') %>

Rails examine dans quel fichier de vue vous vous trouvez (home/index.html.erb) et ajoute automatiquement home.index. devant votre clé. Cela rend votre code plus propre et facilite le déplacement des vues. Si vous renommez ou déplacez une vue, les chemins de recherche paresseuse se mettent à jour automatiquement.

Créer et organiser les fichiers de traduction

Maintenant que vous avez ajouté des clés de traduction à vos vues, vous devez définir ces clés dans un fichier YAML. Rails stocke ces définitions dans le répertoire config/locales/.

Ajouter des clés à votre fichier anglais

Les fichiers de traduction Rails utilisent une structure clé-valeur simple. Ouvrez config/locales/en.yml et ajoutez les clés que vous avez référencées dans vos vues :

# config/locales/en.yml
en:
 hello: "Hello"
 current_time: "Current time: %{time}"
 refresh: "Refresh"

# config/locales/en.yml
en:
  hello: "Hello"
  current_time: "Current time: %{time}"
  refresh: "Refresh"

Dans cette structure i18n Rails :

• en est le code de langue (anglais)
• hellocurrent_time et refresh sont des clés de traduction
• Les chaînes à droite sont le texte réel
• %{time} est un placeholder pour le contenu dynamique (interpolation)

Il s’agit de votre fichier source. Il contient tout le texte dans votre langue par défaut. Plus loin dans ce tutoriel, vous utiliserez PTC pour générer automatiquement des versions en espagnol, en allemand et dans d’autres langues.

Organiser les clés avec l’imbrication

Pour utiliser la recherche paresseuse (le raccourci .hello de la section précédente), organisez vos clés pour qu’elles correspondent à la structure de votre dossier de vues :

en:
 home:
 index:
 hello: "Hello"
 current_time: "Current time: %{time}"
 refresh: "Refresh"

en:
  home:
    index:
      hello: "Hello"
      current_time: "Current time: %{time}"
      refresh: "Refresh"

Cela regroupe toutes les traductions pour app/views/home/index.html.erb sous home.index. Vous pouvez maintenant utiliser t('.hello') dans cette vue au lieu de t('home.index.hello').

Au fur et à mesure que votre application Rails se développe, vous pouvez également créer des espaces de noms pour les traductions partagées (comme shared.navigation pour les menus) afin de garder les choses organisées, mais cela est facultatif.

Ajouter des chaînes JavaScript au YAML

Vos vues Rails sont maintenant internationalisées, mais qu’en est-il de JavaScript ? Rails n’extrait pas automatiquement le texte des fichiers JavaScript. Si votre application contient du texte côté client comme des alertes, des infobulles ou des messages de confirmation, vous devez les ajouter à votre fichier de traduction anglais.

Par exemple, pour traduire une fenêtre de confirmation, ajoutez la chaîne à config/locales/en.yml :

# config/locales/en.yml
en:
 confirm: "Are you sure?"

# config/locales/en.yml
en:
  confirm: "Are you sure?"

À ce stade, votre fichier en.yml contient tout le texte qui apparaît dans votre application – à la fois dans les vues Rails et dans JavaScript.

Lorsque vous utilisez PTC pour traduire votre application (abordé dans la section suivante), ces chaînes JavaScript seront traduites en même temps que tout le reste.