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

Xing 5 mins

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

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

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

Terminal

        
npx nuxi@latest module add i18n

២. បន្ថែម Module ទៅកាន់ Nuxt Config

បន្ថែម '@nuxtjs/i18n' នៅក្នុង modules property ក្នុងឯកសារ nuxt.config.ts ដើម្បីហៅយកមកប្រើ ។

nuxt.config.ts

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

៣. បន្ថែម i18n configuration ទៅកាន់ Nuxt Config

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

nuxt.config.ts

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

nuxt.config.ts

        
export default defineNuxtConfig({
  i18n: {
    vueI18n: './i18n.config.ts',
    strategy: 'prefix_and_default',
    defaultLocale: 'en',
    locales: [
      { code: 'en', iso: 'en-US', isCatchallLocale: true }, //default
      { code: 'km', iso: 'km-KH' }, //other language
      { code: 'zh', iso: 'zh' },
      { code: 'fr', iso: '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 និងរៀនពីរបៀបបង្កើតប្រើប្រាស់ដោយខ្លួនឯងបាន ប្រសិនបើចង់រចនាដោយខ្លួនឯង។ ខាងក្រោមជាកូដដែលខ្ញុំ design ប្រើប្រាស់ផ្ទាល់នៅលើគេហទំព័រនេះ។ រីករាយក្នុងការយកទៅប្រើប្រាស់បានដោយសេរី។

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

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

index.vue

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

Published on: 2024/09/09,

Latest updated: 2024/09/09,

Comment

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