استفاده از I18n برای چند زبانه کردن سایت

I18n چیست؟

عبارت I18n مخفف Internationalization است، به این معنی که یک برنامه یا وب‌سایت را طوری طراحی کنیم که بتواند به‌راحتی به زبان‌های مختلف ترجمه شود. این روش به ما امکان می‌دهد بدون تغییر در ساختار اصلی برنامه، محتوای آن را برای کاربران مختلف بومی‌سازی کنیم.

چرا از I18n استفاده کنیم؟

افزایش تجربه‌ی کاربری: کاربران وقتی محتوای سایت را به زبان خودشان می‌بینند، ارتباط بهتری برقرار می‌کنند.

افزایش ترافیک بین‌المللی: سایت‌های چند زبانه می‌توانند کاربران از کشورهای مختلف را جذب کنند.

مدیریت آسان محتوا: I18n کمک می‌کند تا ترجمه‌ها را به‌صورت ساختاریافته مدیریت کنیم.

انعطاف‌پذیری در توسعه: این روش امکان تغییر زبان بدون تغییر در کدهای اصلی را فراهم می‌کند.

نحوه‌ی پیاده‌سازی I18n در Vue.js

برای پیاده‌سازی قابلیت چند زبانه در Vue.js، می‌توان از بسته‌ی vue-i18n استفاده کرد. در ادامه مراحل راه‌اندازی این پکیج را بررسی می‌کنیم.

۱. نصب vue-i18n

ابتدا باید پکیج vue-i18n را نصب کنیم:

npm install vue-i18n

۲. تعریف فایل‌های ترجمه

بعد از نصب، باید یک فایل برای ذخیره‌ی ترجمه‌های زبان‌های مختلف ایجاد کنیم. مثلاً یک فایل locales.js بسازیم:

const messages = {
  en: {
    welcome: "Welcome to our website",
    about: "About Us"
  },
  fa: {
    welcome: "به وب‌سایت ما خوش آمدید",
    about: "درباره ما"
  }
};
export default messages;

۳. راه‌اندازی I18n در پروژه

سپس، باید تنظیمات I18n را در پروژه Vue.js اعمال کنیم:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';
import messages from './locales';

const i18n = createI18n({
  locale: 'fa', // زبان پیش‌فرض
  fallbackLocale: 'en', // زبان جایگزین
  messages
});

const app = createApp(App);
app.use(i18n);
app.mount('#app');

۴. استفاده از ترجمه‌ها در کامپوننت‌ها

برای نمایش ترجمه‌ها در صفحات مختلف، از دستور $t استفاده می‌کنیم:

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('about') }}</p>
    <button @click="changeLanguage('fa')">فارسی</button>
    <button @click="changeLanguage('en')">English</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
};
</script>

نکات مهم هنگام پیاده‌سازی I18n

ساختار مناسب ترجمه‌ها: بهتر است تمامی متون در یک فایل جداگانه مدیریت شوند.

استفاده از fallbackLocale: برای جلوگیری از مشکلات در ترجمه، زبان جایگزین مشخص شود.

بهینه‌سازی برای سئو: استفاده از hreflang در متاتگ‌ها برای بهبود سئوی سایت.

انتخاب روش ذخیره‌سازی زبان: می‌توان از localStorage یا cookies برای ذخیره‌ی زبان انتخاب‌شده استفاده کرد.

نتیجه‌گیری

I18n یک روش کارآمد برای چند زبانه کردن سایت‌ها است که به بهبود تجربه کاربری، افزایش ترافیک بین‌المللی و مدیریت راحت‌تر ترجمه‌ها کمک می‌کند. با استفاده از vue-i18n در Vue.js، می‌توان به‌راحتی این قابلیت را پیاده‌سازی و سایت را برای کاربران جهانی آماده کرد.