[分享] 幫網站實現多國語系支援(圖解)

「切換多國語系」這個功能嚴格來說不是 MUST HAVE 的功能,但因為好奇心驅使,就還是忍不住先查找 Rails 實戰聖經 實現這個功能。實裝方式依照目前的需求消化成以下幾步,供有需要的同學參考。如果覺得這篇教程有用、想給予鼓勵支持,歡迎至:我的作品頁面 點下「支持TA」。

Step 1. 準備好語系的 yml 檔

現階段我們可以先把 yml 檔理解成「特定語系的翻譯檔」,用來放置該語系的字串。

Rails 在 config/locales 中原先就有一個 en.yml,算是預設的語系檔("en" = "English")。en.yml 檔長得像下圖這樣,yml 檔一定要有:「開頭定義 locale 名稱」,後面接翻譯的字串。

我們先加入簡體中文、繁中中文兩種語系的翻譯檔吧。在終端機執行:

  • touch config/locales/zh-TW.yml
  • touch config/locales/zh-CN.yml

並在檔案中加點東西進去,還記得剛剛看到的 en.yml 裡有 hello: "Hello World" 嗎?我們先照著 en.yml 依樣畫葫蘆,在簡中跟繁中的檔案中分別填入:

  • config/locales/zh-TW.yml
  zh-TW:
    hello: "嗨嗨,向世界說聲嗨!"
  • config/locales/zh-CN.yml
  zh-CN:
    hello: "哈啰,你好!"

But,注意!要特別小心的是:「yml 檔只讀空格」,請使用「兩個空格」,不要使用 tab;假如你在 yml 檔中,縮排時用 tab,會出現錯誤唷。所以複製貼上時請千萬要注意。

Step 2. 修改 views,讓網頁改讀 yml 檔中的字串。

但網站要怎麼讀不同語系 yml 檔的字串?我們在 views 中作一些修改。

原本的:

<h1>Hello World</h1>

改寫成這樣:

<h1><%= t :hello %></h1>

<!-- 注意。要讓 view 改讀 yml 表,要改寫成 <%= t('key名稱') %> -->

Step 3. 安裝 Gem

在 Gemfile 中加上 gem rails-i18n

  • app/Gemfile
# gems for internationalization

gem 'i18n'
gem 'rails-i18n'

加好之後存檔,到終端機中執行 bundle install,執行完好請重開 rails server。準備就緒後,我們就可以來玩玩看效果了!

Step 3. 設定預設語系

  • config/application.rb
  config.i18n.default_locale = "zh-CN"

加上這一行,就可以幫網站決定預設的語系。接著存檔、重開 rails server,再到瀏覽器刷新 localhost:3000 頁面。

Amazing...

這樣表示我們有成功讀取到 zh-CN.yml 中的 hello: "哈啰,你好!" !但別忘了我們的終極目標是「讓使用者自行切換語系」

Step 4 讓使用者自行切換語系

1. 修改 application_controller

  • app/controllers/application_controller.erb
class ApplicationController < ActionController::Base
#要加這一行

before_action :set_locale

#設定多國語系

  def set_locale
    if params[:locale] && I18n.available_locales.include?( params[:locale].to_sym )
    session[:locale] = params[:locale]
    end

    I18n.locale = session[:locale] || I18n.default_locale
  end
  
#其餘代碼略...


end

2. 新增「切換語系按鈕」

接著我們還需要在介面上提供用戶可以切換的按鈕。這邊提供給大家簡單的下拉式選單的代碼:

<!-- 下拉式選單 --> 
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><%= t('language_switch') %><span class="caret"></span></a>
<ul class="dropdown-menu">

    <!-- 語系選項 -->       
<li><%= link_to "簡中版", :controller => controller_name, :action => action_name, :locale => "zh-CN" %></li>  
<li><%= link_to "繁中版", :controller => controller_name, :action => action_name, :locale => "zh-TW" %></li>
<li><%= link_to "English", :controller => controller_name, :action => action_name, :locale => "en" %></li>

</ul>

  • 大功告成,來玩玩看吧!

  • 實際運用在作品中可以達到以下效果:

這樣就可以很貪心的作各種語系的版本了!



本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

Comments

comments powered by Disqus