iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0
Vue.js

完成_個人健康習慣追蹤相關功能網站系列 第 14

中英文切換(Vue i18n)— 與 EmailJS 整合

  • 分享至 

  • xImage
  •  

雖然昨天做完了語言轉換功能,不論首頁的標題、任務輸入框的提示文字,還是使用說明頁的 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 正常發揮作用。真的很開心,期待明天的文章吧 !!
附上今天成果截圖:
https://ithelp.ithome.com.tw/upload/images/20250928/2017806844v9boo0KZ.pnghttps://ithelp.ithome.com.tw/upload/images/20250928/20178068uJWD3QFGJs.pnghttps://ithelp.ithome.com.tw/upload/images/20250928/20178068nuFEXOTDZ5.pnghttps://ithelp.ithome.com.tw/upload/images/20250928/201780689DftYCUmR6.pnghttps://ithelp.ithome.com.tw/upload/images/20250928/20178068tdzxP9vcuT.pnghttps://ithelp.ithome.com.tw/upload/images/20250928/20178068uCZGWQPEMM.png


上一篇
中英文切換(Vue i18n)— 安裝與字串抽離
下一篇
主題切換(深/淺色)— 設計 Token 化
系列文
完成_個人健康習慣追蹤相關功能網站18
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言