สวัสดีครับผมแมกซ์นะครับ อากาศเย็นซะงั้นหรือผมรู้สึกไปเอง เหมือนจะไม่สบาย วันนี้มานำเสนอเครื่องมือช่วยในการสร้างและจัดการภาษาภายในเว็บ ซึ่งเป็นสิ่งสำคัญอย่างหนึ่ง ในตอนแรกผมสร้างเว็บแอพ โดยทั้งหมดใช้ภาษาอังกฤษ และมาลองคิดทบทวน ถามผู้ใช้อีกที สิ่งที่เค้าต้องการคือภาษาไทยสิ !เข้าใจง่าย ตรงไปตรงมา เราทำให้ผู้ใช้คือคนไทย งั้นก็เปลี่ยนทำเป็นไทยเลยไหม แต่สิ่งที่อยากได้ด้วยคือความสากล จึงเป็นที่มาของการใช้แนวคิด i18n เว็บรองรับหลายภาษา
i18n ??? หลายคนอาจจะผ่านตามาบ้าง i18n เนี่ยมันมาจาก Internationalization ยังไงหน่ะหรอก็เริ่มด้วย i จบด้วย n ตรงกลางมี 18 ตัวอักษรเลยกลายเป็น i18n ยังมี l10n มาจาก Localization หรือ k8s มาจาก Kubernetes แบบนี้ก็ได้หรอ !
เอา Console ลองนับ เออหว่ะ 555+ เพื่อ เดี๋ยวมือคนไปลองนับจะเหนื่อยเปล่า
react-i18next คือ internationalization addon ที่ใช้งานได้กับ React โดยในการเขียนโค้ดจะต่างจากเดิมนิดเดียวตัวอย่าง
<div>Just simple content</div>หลังจากใช้ react-i18next โค้ดจะเป็นลักษณะนี้
<div>{t('simpleContent')}</div>คือเปลี่ยนจากใช้ค่าตรงๆ เป็นการเรียกฟังก์ชั่นแล้วโยนพารามิเตอร์เป็น Key ของคำนั่นไปแทน เพื่อแสดงผลตามภาษาที่เราเลือกขณะนั้น ซึ่งสิ่งที่เราต้องเตรียมการดังนี้
เริ่มด้วยติดตั้ง react-i18next ไปที่โปรเจคของเพื่อนๆก่อน
# npm
$ npm install react-i18next --saveไฟล์ที่ต้องสร้างเพิ่มเติม หรือ แก้ไข
my-app
├── locales
│ ├── en
│ └── translations.json
│ ├── th
│ └── translations.json
└── src
└── i18n.js
└── index.js- ไฟล์ translations.json ใน locales
{
"title": "Welcome to react using react-i18next",
"description": {
"part1": "This is part 1.",
"part2": "This is part 2."
}
}ไฟล์ json ที่เก็บ key และ value ไว้ทั้งสองไฟล์ภาษามี key เหมือนกัน ต่างที่ value
{
"title": "ยินดีต้อนรับเข้าสู่การใช้ react-i18next บน react ",
"description": {
"part1": "นี่คือส่วนที่ 1",
"part2": "นี่คือส่วนที่ 2"
}
}- ไฟล์ i18n.js ใน src ตัว instance ไว้กำหนดตั้งค่า
import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';i18n
.use(Backend)
.use(LanguageDetector)
.use(reactI18nextModule)
.init({
fallbackLng: 'en', // have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations', debug: true, interpolation: {
escapeValue: false, // not needed for react!!
}, react: {
wait: true
}
});
export default i18n;
- ไฟล์ index.js ใน src
import './i18n';เพิ่ม import instance เมื่อสักครู่เข้าไปด้วยเพียงเท่านั้น
- ไฟล์ Component ของเราทุกไฟล์ถ้าต้องการให้รองรับการแสดงผลหลายภาษาต้องทำดังนี้
Import ตัว translate ไว้ใช้ในการ Export class นี้
import { translate } from "react-i18next";เปลี่ยนการ Export ตัวเก่าเป็นผ่านตัว translate
// short for only loading one namespace:export default translate("translations")(Login);
ใน render() ทำการแกะของจาก props และสร้างตัวแปรฟังก์ชั่นสลับภาษาไว้ใช้
render() {
const { t, i18n } = this.props;
const switchingLanguage = () => {
if (i18n.language === "en") {
i18n.changeLanguage("th");
} else {
i18n.changeLanguage("en");
}
};return(
<div>
//...
</div>
);
}
เมื่อทุกอย่างพร้อมแล้ว Component นี้ก็จะสามารถรองรับหลายภาษาได้แล้วโดยเรียก t ฟังก์ชั่นโยน key เป็น title เข้าไป
<div> {t('title')} </div>การสลับภาษาสามารถเรียกใช้ switchingLanguage() ที่เราสร้างไว้ได้เลย ตัวอย่างมี ตัวหนังสือ EN/TH ไว้เมื่อกดภาษาก็จะสลับภาษาไปมา
<a onClick={() => switchingLanguage("en")}>{t("label.enth")}</a>ก็จะได้ของหน้าตาแบบนี้ เว็บสองภาษาคลูๆไป
จบอ่าา หวังเพื่อนๆจะอย่าง งง 55 ถ้าอ่านและทำตามเอาเป็นว่าได้เป็นไอเดีย ให้คนที่แวะเข้ามาดูว่ามันทำได้แบบนี้ละกันนะครับ ไม่ได้ลงรายละเอียดเพราะมันมีเยอะกว่านี้อีกนะเออ ทำได้มากกว่านี้ บั๊บบายไปหล่ะครับ ก่อนจากมีลิ้งให้ไปต่อถ้าสนใจ
Source : https://medium.com/@themaxaboy/hello-%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5-i18n-%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AB%E0%B8%A5%E0%B8%B2%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%E0%B8%9A%E0%B8%99-react-a491cfb7fc16
