vue google translate

vue-google translate

حزمة Vue.js التي تسمح بتوطين تطبيقات الويب.

جدول المحتويات

1. مشكلة
2. العرض التوضيحي
3. تثبيت
4. الاستخدام
   • الدعائم
5. اللغات الافتراضية
6. رخصة

مشكلة

كانت هذه الحزمة مستوحاة بشدة من Vue-Gtranslate.

تتيح هذه الحزمة توطين تطبيقات الويب المصنوعة من VUE عن طريق استخدام Google Translate. مع نمو موقع الويب الخاص بك وتطبيقك ، قد تجد حاجة للتوسع في أسواق أخرى خارج بلدك.

إذا كان السوق المستهدف يعيش عبر البحر ويتحدث لغة مختلفة ، فقد لا يكون لديك أي خيار سوى التوطين. ومع ذلك ، إذا تمكن هؤلاء الأشخاص من التحدث بلغتك ، ففكر في الجوانب الأخرى (الثقافية و/أو القانونية) لاتخاذ قرار مستنير بشأن الترجمة.

لمزيد من التفاصيل حول ماهية التعريب والفوائد المحتملة ، قم بالبحث عن هذه المقالة.

العرض التوضيحي

لعرض الحزمة في العمل ، تحقق من ذلك في صندوق رمز الرمز.

تثبيت

 yarn add vue-google-translate
npm i vue-google-translate

الاستخدام

//index.html

< head >
  < script type =" text/javascript " >
    function googleTranslateElementInit ( ) {
      new google . translate . TranslateElement (
        { pageLanguage : 'en' , autoDisplay : false } ,
        'app'
      ) ;
    }
    // app can be changed to the default id of your vue app available in App.vue or an id section of where
    // you need translated
  </ script >
  < script
    type =" text/javascript "
    src =" https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit "
  > </ script >
  < script
    type =" text/javascript "
    src =" https://cdn.jsdelivr.net/gh/lewis-kori/vue-google-translate@main/src/utils/translatorRegex.js "
  > </ script >
</ head >

استخدم في أي مكون

import { Translator } from 'vue-google-translate';
< template >
< div >
< Translator />
< div >
</ template >

export default {
  components: {
    Translator
  }
}

الدعائم

تمرير مجموعة من البلدان بالتنسيق التالي

 [
  {
    code : 'en|af' ,
    title : 'Afrikaans' ,
  } ,
  {
    code : 'en|ar' ,
    title : 'Arabic' ,
  } ,
  {
    code : 'en|ko' ,
    title : 'Korean' ,
  } ,
  {
    code : 'en|lt' ,
    title : 'Lithuanian' ,
  } ,
] ;

قائمة كاملة باللغات الافتراضية في أسفل هذا المستند. إذا كنت ترغب في إضافة لغة جديدة وليس في القائمة الافتراضية ، فمرر اللغة الجديدة مع flagIconUrl الخاصية الإضافية. إليك مكان جيد لمصدر هذه الرموز. تأكد من أن رمز الترجمة صالح أيضًا. يمكنك الحصول على اللغات المدعومة ورموزها من هذا الموقع.

بالإضافة إلى ذلك ، يمكنك تمرير نص ALT كمفتاح في كائن الترجمة. هذا مفيد لإمكانية الوصول. ستبدو ترجماتك المخصصة شيئًا كهذا.

 [
  {
    code : 'en|iw' ,
    title : 'Hebrew' ,
    flagIconUrl : 'https://flagicons.lipis.dev/flags/4x3/il.svg' ,
    altText : 'Hebrew language translation' ,
  } ,
  {
    code : 'ga|pl' ,
    title : 'Polish' ,
    flagIconUrl : 'https://flagicons.lipis.dev/flags/4x3/pl.svg' ,
    altText : 'Poland flag Icon' ,
  } ,
] ;

يتوفر حدث SEIT اختياري أيضًا

< template >
  < div >
    < Translator @ on-country-click = " customEvent " : countries = " arrayOfCountries " />
  </ div >
</ template >

التصميم

إذا كنت ترغب في التخلص من لافتات Google ، أدخل CSS التالية في ملف CSS العالمي واستيراد هذا الملف في ملفات Main/Index.js داخل src

 /* gets rid of the banner at the top of the page */
body {
  top : 0 !important ;
}
/* get rids of the banner at the bottom of the web page */
. skiptranslate {
  display : none !important ;
}

اللغات الافتراضية

 [
  {
    code : 'en|af' ,
    title : 'Afrikaans' ,
  } ,
  {
    code : 'en|sq' ,
    title : 'Albanian' ,
  } ,
  {
    code : 'en|ar' ,
    title : 'Arabic' ,
  } ,
  {
    code : 'en|hy' ,
    title : 'Armenian' ,
  } ,
  {
    code : 'en|az' ,
    title : 'Azerbaijani' ,
  } ,
  {
    code : 'en|eu' ,
    title : 'Basque' ,
  } ,
  {
    code : 'en|be' ,
    title : 'Belarusian' ,
  } ,
  {
    code : 'en|bg' ,
    title : 'Bulgarian' ,
  } ,
  {
    code : 'en|ca' ,
    title : 'Catalan' ,
  } ,
  {
    code : 'en|zh-CN' ,
    title : 'Chinese (Simplified)' ,
  } ,
  {
    code : 'en|zh-TW' ,
    title : 'Chinese (Traditional)' ,
  } ,
  {
    code : 'en|hr' ,
    title : 'Croatian' ,
  } ,
  {
    code : 'en|cs' ,
    title : 'Czech' ,
  } ,

  {
    code : 'en|da' ,
    title : 'Danish' ,
  } ,
  {
    code : 'en|nl' ,
    title : 'Dutch' ,
  } ,
  {
    code : 'en|en' ,
    title : 'English' ,
  } ,
  {
    code : 'en|et' ,
    title : 'Estonian' ,
  } ,
  {
    code : 'en|tl' ,
    title : 'Filipino' ,
  } ,
  {
    code : 'en|fi' ,
    title : 'Finnish' ,
  } ,
  {
    code : 'en|fr' ,
    title : 'French' ,
  } ,

  {
    code : 'en|de' ,
    title : 'German' ,
  } ,
  {
    code : 'en|el' ,
    title : 'Greek' ,
  } ,
  {
    code : 'en|hu' ,
    title : 'Hungarian' ,
  } ,
  {
    code : 'en|id' ,
    title : 'Indonesian' ,
  } ,
  {
    code : 'en|ga' ,
    title : 'Irish' ,
  } ,
  {
    code : 'en|it' ,
    title : 'Italian' ,
  } ,
  {
    code : 'en|ja' ,
    title : 'Japanese' ,
  } ,
  {
    code : 'en|ko' ,
    title : 'Korean' ,
  } ,
  {
    code : 'en|lt' ,
    title : 'Lithuanian' ,
  } ,
  {
    code : 'en|ms' ,
    title : 'Malay' ,
  } ,
  {
    code : 'en|no' ,
    title : 'Norwegian' ,
  } ,
  {
    code : 'en|pl' ,
    title : 'Polish' ,
  } ,
  {
    code : 'en|pt' ,
    title : 'Portuguese' ,
  } ,
  {
    code : 'en|ro' ,
    title : 'Romanian' ,
  } ,
  {
    code : 'en|ru' ,
    title : 'Russian' ,
  } ,
  {
    code : 'en|es' ,
    title : 'Spanish' ,
  } ,
  {
    code : 'en|sv' ,
    title : 'Swedish' ,
  } ,
  {
    code : 'en|th' ,
    title : 'Thai' ,
  } ,
  {
    code : 'en|tr' ,
    title : 'Turkish' ,
  } ,
  {
    code : 'en|uk' ,
    title : 'Ukrainian' ,
  } ,
] ; 

رخصة

Vue-Google-Translate هو برنامج مفتوح المصدر مرخص له بموجب معهد ماساتشوستس للتكنولوجيا.