[Ruby on Rails series] 4. Topics: Internationalization of Rails Applications [i18n]

1. What is internationalization (i18n )?

I18n (International): According to Wikipedia, internationalization refers to the process of software design and decoupling from specific languages and regions. When the software is transplanted to different languages and regions, the software itself does not need to be changed or corrected in internal engineering.

Of course, the official definition is always very tall. In fact, what we have to do today is not that complicated. The task is to provide multi-language support for Web sites in the last generation 3. For example, the last English website, this time we can automatically provide Chinese websites or other language websites based on the user location.

 

2. How to Implement i18n? 2.1 Step 1: log on to cloud9 and enter the previous Development Environment

cd firstDemo

2.2 Step 2: Prepare a multi-language dictionary (locale material)

Go to the site: https://github.com/svenfuchs/rails-i18n/tree/master/rails/locale

The website provides locale templates in various languages. Here we need the following two files (if you need to support other languages, you also need to prepare other files ):

[1] En. yml (English version)

[2] zh-CN.yml (Simplified Chinese)

2.3 Step 3: edit the config/locales folder (1)

For example, in this folder, we can see that there is only one file: En. yml. Open it and find that there are only two lines of code:

en:  hello: "Hello world"

This is a yml file template. Now we need to replace it with the above en. yml

Click "EN. yml" to open the file, copy and paste the webpage content, and overwrite the original en. yml file content.

[Note: The correct Copying Method and the wrong Copying Method]

The yml file defines data in key-value format. It is a data definition file in Ruby on Rails. It is characterized by space sensitivity! The incorrect COPY method ignores spaces and causes syntax errors. Therefore, the operation here is very important.

[Correct Copying Method]

For example, click the button in the red area to enter the new page, and then copy the page to retain spaces. If you copy data directly on this page, space will be ignored, leading to syntax errors!

2.4 Step 3: edit the config/locales folder (2)

After en. yml is done, create a file in the config/locales Folder: Zh. yml, and then copy the content under the zh-CN.yml to the same

Note: Change ZH-CN to ZH (remove-CN) In the first line of the Zh. yml file)

 

Next, we need to edit the above two files (EN. yml and Zh. yml) to adapt to our web application.

For EN. yml, enter the following code (note space) in the area of EN: Next line and date: previous line ):

en:  memo_title: My Memopad  show: Show  edit: Edit  destroy: Destroy  list_memo: Listing memos  new_memo: New Memo  date:

For Zh. yml, insert the following code:

Zh: memo_title: My record show: Show EDIT: Edit destroy: delete list_memo: List new_memo: New Date:

2.5 Step 4: Modify the views page file

[1] app/views/memos/index.html. ERB file 17th ~ 19 rows

Change the three lines of code to the following code:

<td><%= link_to (t ‘show‘), memo %></td><td><%= link_to (t ‘edit‘), edit_memo_path(memo) %></td><td><%= link_to (t ‘destroy‘), memo, method: :delete, data: { confirm: ‘Are you sure?‘ } %></td>

<% (Ruby expression) %> This symbol indicates that a ruby statement can be inserted in the middle of the mark.

<% = (Ruby output) %> This symbol can be used to convert the values of Ruby expressions into HTML output results.

(T 'xxxx') T represents the translation function, which is short for translate. This function outputs the value corresponding to the quotation marks (refer to the previous yml file key-value pairs)

[2] app/views/layouts/application.html. ERB file, Row 3

Change the line to the following code:

<title><%= t ‘memo_title‘ %></title>

[3] app/views/memos/index.html. ERB file, Row 3

Change the line to the following code:

[4] app/views/memos/index.html. ERB file: 27th rows
Change the line to the following code:
<%= link_to (t ‘new_memo‘), new_memo_path %>
2.6 modify the config/application. RB File

Cancel the comments of row 20th and line 21st, change 'my to 'config', change de to: ZH, and add a line of code config. encoding = 'utf-8'. The Code is as follows:
config.i18n.load_path += Dir[Rails.root.join(‘config‘, ‘locales‘, ‘*.{rb,yml}‘).to_s]config.i18n.default_locale = :zhconfig.encoding = ‘utf-8‘
In this way, the default display language of the page is changed to Chinese.
2.7 modify the APP/controllers/application_controller.rb file.
Change the file code to the following code:
class ApplicationController < ActionController::Base     protect_from_forgery         before_filter :set_locale         def set_locale       I18n.locale = params[:locale] || I18n.default_locale     end end 
Now, i18n has been configured and now supports both Chinese and English!
 
3 test Web Page 3.1 start server
$ rails server -b $IP -p $PORT 
3.2 Test default webpage
Https://rails-tutorial-c9-lichcnpul.c9.io/memos, the webpage is automatically converted to a Chinese webpage
3.3 test English webpage
Https://rails-tutorial-c9-lichcnpul.c9.io/memos? Locale = en
3.4 test Chinese webpage
Https://rails-tutorial-c9-lichcnpul.c9.io/memos? Locale = ZH

 
The test was successful, so far this international topic has come to an end. Coming soon [Ruby on Rails series] 5 (to be determined)
[Ruby on Rails series] 4. Topics: Internationalization of Rails Applications [i18n]