localize.dev

Documenti / Ruby on Rails

Traduzione i18n per Rails con viste ERB, automatizzata

Sposta il testo hardcoded nelle viste ERB di Rails in chiamate t() con file YAML in config/locales, con plurale basato su count:, locali disponibili e commutazione di lingua, in un comando o pull request.

Come funziona

Il testo nelle viste ERB diventa <%= t('key', name: @user.name) %>, con segnaposto %{name} in config/locales/<locale>.yml, sotto la chiave della lingua. I tag logici dividono le frasi; <script> e <code> vengono lasciati invariati.

Un ternario su un conteggio diventa un plurale con forme one: e other: (e qualsiasi altra cosa ogni lingua necessiti), chiamato con count:.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

app/views/carts/show.html.erb · prima
<h1>Welcome back, <%= @user.name %>!</h1>
<% if @items.any? %>
  <p><%= @items.count %> <%= @items.count == 1 ? 'item' : 'items' %> in your cart</p>
<% end %>
<input placeholder="Search products" type="text">
app/views/carts/show.html.erb · dopo
<h1><%= t('show.welcome_back', name: @user.name) %></h1>
<% if @items.any? %>
  <p><%= t('show.items_in_your_cart', count: @items.count) %></p>
<% end %>
<input placeholder="<%= t('show.search_products') %>" type="text">
config/locales/en.yml
en:
  show:
    welcome_back: Welcome back, %{name}!
    items_in_your_cart:
      one: "%{count} item in your cart"
      other: "%{count} items in your cart"
    search_products: Search products

Cosa aggiunge la configurazione

La prima esecuzione imposta I18n di Rails se il progetto non lo ha ancora:

  • config.i18n.available_locales in config/application.rb
  • Un switch_locale attorno all'azione in ApplicationController: ?locale=, poi un cookie lang, poi Accept-Language

Eseguilo

La CLI richiede Node.js 22 o versioni successive, nient'altro: npx lo esegue senza aggiungere un package.json al progetto. Non hai Node sulla tua macchina? La GitHub Action qui sotto lo esegue per te.

npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.