# Rails I18n 實作技巧
王信凱(Sky)
AmazingTutor CTO
###### tags: `WTT-0728` `rails` `i18n`
---
## Setting
----
`config/application.rb`
```ruby
config.i18n.load_path += Dir[Rails.root.join('locales', '**', '*.{rb,yml}').to_s]
config.i18n.default_locale = :en
```
----
use default locale when translation missing
```ruby
config.i18n.fallbacks = true
# or
config.i18n.fallbacks = "zh-TW"
```
----
but "zh-CN" fallback not include zh-TW ...
```ruby
irb(main):007:0> I18n.fallbacks["zh-CN"]
=> [:"zh-CN", :zh, :en]
```
set it in environments/production.rb
```ruby
config.i18n.fallbacks = {'zh-CN' => 'zh-TW'}
# magic ~!!
irb(main):007:0> I18n.fallbacks["zh-CN"]
=> [:"zh-CN", :zh, :"zh-TW", :en]
```
---
## Add locale files
`app/config/locales/*.yml`
----
### Basic locale file
[en.yml, zh-TW.yml, ..](https://github.com/svenfuchs/rails-i18n/tree/master/rails/locale)
```ruby
# debug in rails console
irb(main):006:0> I18n.t("date.day_names")
=> ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
```
```ruby
irb(main):007:0> I18n.t("date.day_names", locale: "zh-TW")
=> ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
```
----
### example
```ruby
# before
<%= e.created_at.strftime('%B') %> <%= e.created_at.strftime('%d') %>, <%= e.created_at.strftime('%Y') %>
=> "June 20, 2016"
# after
<%= l(e.created_at, format: :ymd) %>
=> "June 20, 2016"
```
```yaml
# en.yml
en:
time:
am: am
formats:
default: "%a, %d %b %Y %H:%M:%S %z"
ymd: "%B %d, %Y"
```
----
### Custom locale file
app/config/locales/view.zh-TW.yml
```yaml
zh-TW:
button:
save: "儲存"
update: "更新"
share:
with: "與"
book_now: "立即預約"
all: "全部"
common:
navigation:
site_language: "網站語言"
teacher_set: "教師資訊"
schedule: "授課日曆"
users:
profile:
connent: "Facebook Google 連結"
edit_profile: "修改個人資料"
sidebar:
scheduled: "已排課"
unschedule: "尚未排課"
past: "已上過"
class: "課程"
my_tutor: "我的教師"
feed_back: "教師回饋"
edit_profile: "修改個人資料"
change_password: "更改密碼"
```
----
### Common elements/text
```ruby
I18n.t("button.save", locale: "zh-TW")
=> "儲存"
I18n.t("save", locale: "zh-TW", scope: "button")
=> "儲存"
# in Rails just use t()
I18n.locale = :en
t("button.save")
=> "Save"
```
```yaml
zh-TW:
button:
save: "儲存"
update: "更新"
```
----
### Page text
app/views/common/_navigation.html.erb
```ruby
<%= t("common.navigation.site_language") %>
<%= t("site_language", scope: "common.navigation") %>
=> "網站語言"
```
```yaml
zh-TW:
common:
navigation:
site_language: "網站語言"
```
----
<!-- .slide: data-transition="fade-in convex-out" -->
### Page text
app/views/common/_navigation.html.erb
__use lazy lookup !!__
```ruby
<%= t(".site_language") %>
=> "網站語言"
```
```yaml
zh-TW:
common:
navigation:
site_language: "網站語言"
```
---
ActiveRecord attributes
----
```ruby
irb(main)> User.model_name.human
=> "使用者"
irb(main)> User.human_attribute_name(:birthday)
=> "生日"
```
```yaml=
# config/locales/zh-TW.yml
zh-TW:
activerecord:
models:
user: "使用者"
attributes:
user:
birthday: "生日"
```
---
## Use variable
----
app/views/products/show.html.erb
```ruby
<%= t('product_price', price: @product.price) %>
```
```yaml
# config/locales/en.yml
en:
product_price: "$%{price}"
# config/locales/es.yml
es:
product_price: "%{price} €"
```
---
## HTML Translations
----
### add html suffix
```htmlembedded
<div><%= t('welcome') %></div>
<div><%= raw t('welcome') %></div>
<div><%= t('hello_html') %></div>
<div><%= t('title.html') %></div>
```
```yaml
# config/locales/en.yml
en:
welcome: <b>welcome!</b>
hello_html: <b>hello!</b>
title:
html: <b>title!</b>
```
----
### convenient email template
views/personal_mailer/welcome_message.html.erb
```ruby
<%= t("personal_mailer.welcome_message.content_html", user_name: "Sky") %>
```
```yaml
zh-TW:
personal_mailer:
welcome_message:
content_html: |
<p>hello %{user_name}<p>
<p>welcome to Web Tech Topic<p>
```
---
## detect user locale
----
### javascript
open chrome console and type
```javascript
navigator.language
=> "zh-TW"
navigator.languages
=> ["zh-TW", "zh", "en-US", "en"]
```
----
#### [save to client cookie and read from rails](jcsky/3ef3b8875faacf9503fb0a8a543e25c8)
{%gist jcsky/3ef3b8875faacf9503fb0a8a543e25c8%}
----
### HTTP_ACCEPT_LANGUAGE
```ruby
>> env["HTTP_ACCEPT_LANGUAGE"]
#chrome
=> "zh-TW,zh;q=0.8,en-US;q=0.6,en;q=0.4"
# safari
=> "zh-tw"
```
----
#### [set i18n locale in application.rb](https://gist.github.com/jcsky/60cbac8ddb36b9d65a0b2fc7fa0c3bde)
{%gist jcsky/60cbac8ddb36b9d65a0b2fc7fa0c3bde%}
----
#### [set i18n locale in rack]
```ruby
# Gemfile
gem 'rack-contrib', :github => "jcsky/rack-contrib"
# config.ru
require 'rack'
require 'rack/contrib'
use Rack::Locale
```
{"metaMigratedAt":"2023-06-14T11:46:38.408Z","metaMigratedFrom":"Content","title":"Rails I18n 實作技巧","breaks":true,"contributors":"[]"}