在實作多國語言網頁的時候,除了網頁後端程式需要擁有多國語言支援之外,前端程式也要跟著支援才行。怎麼說呢?假設有個支援中文、英文的網頁,我們在程式後端必須要想辦法判斷訪客所使用的語言來決定前端網頁到底要顯示中文還是英文。而在網頁上出現的文字可能會有兩種情形:第一種,文字是直接顯示在網頁上的,後端程式所得到的中文或是英文文字可以透過HTML模板引擎,直接將文字填入HTML中,顯示在網頁上。第二種,文字一開始不會顯示在網頁,而是要透過網頁跟使用者互動之後才顯示出來的訊息,這種文字訊息通常會需要經過JavaScript程式來判斷要輸出哪個文字,或是要組合出什麼文字,後端程式就必須要有一個方式將中文或是英文文字預先餵給前端的JavaScript程式來使用。



第一種情況的實作方式很簡單,只要參考這篇文章,讓Rust程式擁有多國語言的語庫之後,再根據訪客所使用的語言來搜尋要填空到HTML模板引擎的文字即可。這篇文章會著重介紹第二種情況的實作方式。

Map to JavaScript in HTML

「Map to JavaScript in HTML」是筆者開發的套件,可以將任意key-value形式的字串所組成的HashMap結構實體,轉成JavaScript的物件,並填寫至HTML語法中。

Crates.io

https://crates.io/crates/map-to-javascript-html

Cargo.toml

map-to-javascript-html = "*"

使用方法

為了要將JavaScript程式插入至HTML語法中,建議使用HTML模板引擎來進行。假設HTML模板引擎是Handlebars,我們可以在要處理文字的Javascript程式之前,插入以下這段語法:

<script>
var _text = {};
{{{text}}}
</script>

語法中的「_text」這個變數名稱,可以設定成其它的名稱,但不要跟已存在的名稱重複。

「Map to JavaScript in HTML」套件提供的「hash_map_to_javascript_html」函數,可以將一個HashMap結構實體,轉成類似以下的JavaScript程式語法:

_text['key1'] = 'value1';
_text['key2'] = 'value2';
_text['key3'] = 'value3';

舉例來說:

extern crate map_to_javascript_html;

use map_to_javascript_html::hash_map_to_javascript_html;
use std::collections::HashMap;

let mut map = HashMap::new();

map.insert("hello", "Hello world!");
map.insert("welcome", "Welcome to my website.");
map.insert("other keys", "Hello world!");

let text = hash_map_to_javascript_html(&map, "_text", &["welcome", "hello"]).unwrap();

程式執行完第12行後,「text」變數所儲存的值是一個字串,這個字串就是將「map」這個HashMap結構實體,轉成HTML語法中的JavaScript程式語法的結果。

「HTML語法中的JavaScript程式語法」是什麼意思?跟一般的「JavaScript程式碼」有什麼不同嗎?

這樣說好了,如果我們直接把一般的「JavaScript程式碼」貼到HTML語法中的「<script>」標籤內,如果這段「JavaScript程式碼」內出現「</script>」這段子字串,那麼這整個HTML語法會出現嚴重的問題。而「Map to JavaScript in HTML」套件,會幫忙進行字元跳脫處理,可以確保任意字串都可以轉成能直接嵌入在HTML語法中的JavaScript程式語法。

透過Handlebars,用「text」變數所儲存的字串取代模板中的「{{{text}}}」,可以得到以下的HTML語法:

<script>
var _text = {};
_text['welcome']='Welcome to my website.';_text['hello']='Hello world!';
</script>

如此一來,在JavaScript程式中,我們就可以藉由讀取「_text」變數的方式,來動態取得需要用到的文字了!

如果想要讓「Map to JavaScript in HTML」套件生成的JavaScript程式語法漂亮一點,能對齊其它的HTML語法,可以使用「hash_map_to_javascript_html_beautify」這個函數,讓產生出來的JavaScript程式語法能夠分行,且有縮排效果。不過一般來說,我們還是會偏好使用有壓縮的HTML,因為其傳輸速度較快。

另外,如果只是要將某串文字以JavaScript字串的形式插入至HTML中,可以使用「text_to_javascript_html」這個函數。