雖然昨天做完了語言轉換功能,不論首頁的標題、任務輸入框的提示文字,還是使用說明頁的 FAQ,現在都能隨著使用者切換成中文或英文,但是在測試多幾次之後,又仔細想了想,發現還有一個地方沒有被照顧到!那就是寄出的 Email!!如果使用者把介面切成英文,但收到的提醒信件卻還是中文,這樣體驗就有點「穿幫」了,於是今天(Day 14),我決定要讓 EmailJS 寄出的信件也能支援中英文切換,讓網站不只會「講雙語」,還能「寫雙語信」。
想有雙語信的第一步,就是在翻譯字典裡加上 Email 用的字串。我在 zh.json 和 en.json 各自新增程式碼處理,有了這些 key,接下來就能在寄信時呼叫 $t('email.subject') 與 $t('email.message'),讓系統根據當前語言去取值。
第二步,是修改寄信的服務函式。原本我在呼叫 sendReminderEmail() 的時候,要自己傳入 subject 和 message,現在就改成直接從 i18n 抓取。這樣一來,當網站在中文模式下,t('email.subject') 就會是「任務提醒」;切換到英文模式,它就會變成「Task Reminder」。
最後一步,就是在 Home.vue 的測試寄信功能裡串起來。我新增了一個 Email 輸入框,輸入收件地址後點按鈕,就會寄出一封信。由於 sendReminderEmail 已經會自動依語言切換,我不用再去操心要傳什麼文字。這樣整個串接就完成了。
測試結果非常順利。當網站介面是中文時,我輸入自己的信箱,收到的信件標題是「任務提醒」,內容則是「您好,這是您的任務提醒:請記得完成今天的小任務!」,而且我還有特別關掉瀏覽器再打開一次,結果語言偏好果然有保存下來,代表 localStorage 正常發揮作用。真的很開心,期待明天的文章吧 !!
附上今天成果截圖: