របៀបក្នុងការរួមបញ្ចូលមុខងារពហុភាសាសម្រាប់អ្នកអភិវឌ្ឍន៍លើ Nuxt.js ដោយប្រើប្រាស់ @nuxt/i18n module បានរហ័ស និងងាយស្រួល

Xing 2 mins

មុខងារពហុភាសាគឺជាមុខងារសំខាន់មួយក្នុងចំណោមមុខងារសំខាន់ៗបំផុតដែលអ្នកអភិវឌ្ឍន៍គួរតែរួមបញ្ចូលទៅក្នុងកម្មវិធីឬគេហទំព័រដើម្បីធ្វើទំនើបកម្ម និងលើកកម្ពស់ទៅលើបទពិសោធន៍អ្នកប្រើប្រាស់ (User Experience - UX) នៅលើកម្មវិធីដែលពួកគេសរសេរ។ ថ្វីត្បិតតែវាជាមុខងារសំខាន់ ក៏ប៉ុន្តែភាពលំបាកនៃការរួមបញ្ចូល គឺនៅតែជាឧបសគ្គមួយសម្រាប់អ្នកអភិវឌ្ឍន៍មួយចំនួនដែលថ្មីជាមួយមុខងារមួយនេះចំពោះ Nuxt Framework ដោយសារមានវិធីសាស្ត្រជាច្រើនរបៀបក្នុងការប្រើប្រាស់។ ដូច្នេះថ្ងៃនេះ ខ្ញុំនឹងចែករំលែកអ្នកទាំងអស់គ្នាអំពីការបង្កើត និងរួមបញ្ចូលមុខងារសំខាន់មួយនេះទៅកាន់កម្មវិធីរបស់អ្នកបានយ៉ាងងាយស្រួល ត្រូវក្បួនខ្នាត និងរហ័សបំផុត។

១. តម្លើង @nuxt/i18n module

តម្លើង CLI Command ខាងក្រោមនៅលើ Terminal សម្រាប់កម្មវិធីរបស់អ្នកដើម្បីប្រើប្រាស់ @nuxt/i18n module ។

Terminal

npx nuxi@latest module add i18n

២. បន្ថែម @nuxt/i18n module

បន្ថែម '@nuxtjs/i18n' ទៅក្នុង modules នៃឯកសារ nuxt.config.ts ដើម្បីដំណើរការ module ។

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxtjs/i18n"],
});

៣. I18n configuration

បន្ថែម 'i18n' នៅក្នុងឯកសារ nuxt.config.ts ដើម្បីធ្វើការ setup និង config bahavior ផ្សេងៗ ។

nuxt.config.ts

export default defineNuxtConfig({
  i18n: {
    vueI18n: "./i18n.config.ts",
    strategy: "prefix_and_default",
    defaultLocale: "en",
    locales: [
      { code: "en", language: "en-US", isCatchallLocale: true }, // default
      { code: "km", language: "km-KH" }, // other language
      { code: "zh", language: "zh" },
      { code: "fr", language: "fr" },
      // ...
    ],
    // ដាក់ការលើកលែងលើទំព័រដែលមិនចង់អោយមានការបកប្រែ
    pages: {
      privacy: false,
      terms: false,
      // ...
    },
  },
});

៤. បង្កើតឯកសារថ្មីសម្រាប់ config លើមុខងារ i18n នៅ Root Directory

i18n.config.ts

import en from "./locales/en.json";
import km from "./locales/km.json";
import zh from "./locales/zh.json";
import fr from "./locales/fr.json";
// ...

export const localeMap: { [k: string]: string } = {
  en: "English",
  km: "ភាសាខ្មែរ",
  zh: "简体中文",
  fr: "Français",
  // ...
};

export default defineI18nConfig(() => ({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: {
    en,
    km,
    zh,
    fr,
    // ...
  },
}));

៥. បង្កើតថតឯកសារ និងឯកសារដែលផ្ទុកទិន្នន័យបកប្រែនៅ Root Directory

ចំណុចដែលត្រូវចំណាំ និងប្រយ័ត្ន គឺការភាន់ច្រឡំគ្នា ជាន់គ្នា ឬខ្វះខាត strings នៅក្នុងឯកសារផ្ទុកទិន្នន័យភាសានីមួយៗ។ ចំណុចដែលខ្ញុំចង់ recommend គឺធ្វើតែភាសាគោល (default locale) អោយចប់សព្វគ្រប់ និងរួចរាល់ជាមុនសិន សឹមទៅបង្កើត ឬបកប្រែឯកសារនៃភាសាដទៃ។

បង្កើតឯកសារ json សម្រាប់ផ្ទុកទិន្នន័យ

~ locales/
---| en.json
---| km.json
---| ...json

km.json

{
  "seo": {
    "name": "Chandara H. Wei",
    "description": "A Cambodian passionate developer.",
    "image": "https://.../img/seo/xingfolio.png",
    "about": "អំពីខ្ញុំ",
    "contact": "ទំនាក់ទំនង",
    "edu": "ការសិក្សា",
    "project": "គម្រោង"
  },
  "ui": {
    "cancel": "ចាកចេញ",
    "download": "ទាញយក",
    "footertext": "រចនា និងរក្សាសិទ្ធ 2024 - បច្ចុប្បន្ន",
    "error": "សូមអភ័យទោស មិនមានទំព័រនេះទេ!",
    "error_description": "ទំព័រនេះមិនអាចចូលប្រើប្រាស់បាន ឬគ្មាន!"
  }
  ...
}

៦. បង្កើត toggle component សម្រាប់ trigger function

ចំពោះ i18n toggle component អ្នកទាំងអស់គ្នាអាច design ដោយខ្លួនឯងបាន ប្រសិនបើចង់កែប្រែ ឬបន្ថែមការច្នៃប្រឌិត។ ខាងក្រោមជាកូដដែលខ្ញុំផ្តល់ជាឧទាហរណ៍ សាមញ្ញ និងមិនមានការលម្អលើរូបរាងឡើយ។

component/Lang.vue

<template>
  <div v-if="i18nEnabled" class="flex items-center">
    <select
      v-bind:value="localeIdentity"
      class="rounded-lg bg-white text-black dark:bg-gray-900 dark:text-white"
      :style="{ width: `${switchWidth}px` }"
      @change="changeLocale"
    >
      <option
        v-for="(locale, index) in locales"
        :key="index"
        :value="locale.code"
      >
        {{ localeMap[locale.code] }}
      </option>
    </select>
  </div>

  <div class="absolute top-0 pointer-events-none">
    <select ref="switchWidthRef" style="visibility: hidden">
      <option>{{ localeMap[locale] }}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { localeMap } from "~/i18n.config";

const { locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath();

const localeIdentity = ref("");
const switchWidth = ref(0);
const switchWidthRef = ref<HTMLElement | null>(null);

const changeLocale = (e: Event) => {
  const target = e.target as HTMLSelectElement;
  const path = switchLocalePath(target.value);
  navigateTo(path);

  setTimeout(() => {
    switchWidth.value = switchWidthRef.value!.offsetWidth;
  }, 100);
};

const i18nEnabled = computed(() => {
  return switchLocalePath("en");
});

watch(locale, () => {
  localeIdentity.value = locale.value;
});

onMounted(() => {
  localeIdentity.value = locale.value;

  switchWidth.value = switchWidthRef.value!.offsetWidth;
});
</script>

៧. ការហៅយកទៅប្រើក្នុងឯកសារផ្សេងៗក្នុងកម្មវិធី

បន្ទាប់ពីបានធ្វើរឿងខាងលើចប់សព្វគ្រប់អស់ហើយ ដូច្នេះនេះគឺជាដំណាក់កាលចុងក្រោយសម្រាប់យកទិន្នន័យភាសា និងមុខងារបកប្រែមកបង្ហាញ និងប្រើប្រាស់នៅលើផ្ទាំងប្រើប្រាស់។ ចំពោះ useI18n() គឺដាច់ខាតត្រូវតែបានប្រកាស ដើម្បីប្រើប្រាស់ { t } ក្នុងការហៅទិន្នន័យភាសាមកប្រើ។ ដោយឡែកចំពោះ useLocalePath() គឺពុំចាំបាច់ប្រកាសហៅយកមកប្រើគ្រប់ពេលទេ ដរាបណាអ្នកទាំងអស់គ្នាត្រូវការប្រើប្រាស់ NuxtLink ឬ Router ដើម្បីផ្លាស់ទីពីទំព័រមួយទៅទំព័រមួយផ្សេងទៀត ដែលគួរតែត្រូវបានប្រកាស ដើម្បីចំណាំ និងរក្សាទុកនូវជម្រើសភាសាដែលអ្នកប្រើបានជ្រើសរើស ដើម្បីរក្សាអ្នកប្រើអោយស្ថិតនៅលើ locale path តែមួយ និងជៀសវាងការលោតចូល default locale path ។ បន្ទាប់ពីបាន implement រួចហើយ ចូលរួមអបអរសាទរ អ្នកបានរួមបញ្ចូលឬបង្កើតមុខងារសំខាន់មួយនេះដោយជោគជ័យហើយ។ ✨🥳

index.vue

<script setup lang="ts">
  const localePath = useLocalePath();
  const { t } = useI18n();
</script>
<template>
  <div>
    <p>{{ t("example.text") }}</p>
    <input :placeholder="t('example.placeholder')" />
    <NuxtLink :to="localePath({ path: '/' })">Home</NuxtLink>
  </div>
</template>

Published on: 2024/09/09,

Latest updated: 2024/12/31,

Comment

Leave your thoughts and feedback below. We can discuss, reply, and engage here.