ترجمة موقع Vite و Vue الخاص بك باستخدام Intlayer | Internationalization (i18n)

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

لماذا Intlayer على البدائل؟

بالمقارنة مع الحلول الرئيسية مثل vue-i18n أو i18next، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:

تغطية فيو كاملة

التحجيم مع عدم وجود مطور

أكثر من مجرد حل i18n، يوفر Intlayer [محررًا مرئيًا] مستضافًا ذاتيًا](/ar/doc/concept/editor) وكامل CMS لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.

</Accordion> </AccordionGroup>

دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Vue

فيديوكودتجربة

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-vue-template.vercel.app

Open embedded page in fullscreen

راجع قالب التطبيق على GitHub.

1. 1

   تثبيت التبعيات

   قم بتثبيت الحزم اللازمة باستخدام npm:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npx intlayer init --interactive
   

   علامة --interactive اختيارية. استخدم intlayer-cli init إذا كنت وكيل ذكاء اصطناعي.

   سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npm install intlayer vue-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

     الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، والترجمة، وإعلان المحتوى، والترجمة البرمجية، وأوامر CLI.

   • vue-intlayer الحزمة التي تدمج Intlayer مع تطبيق Vue. توفر مزودي السياق والوظائف القابلة لإعادة الاستخدام لتدويل Vue.

   • vite-intlayer يتضمن مكون Vite الإضافي لدمج Intlayer مع مجمّع Vite، بالإضافة إلى وسيط للكشف عن اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط، والتعامل مع إعادة توجيه عناوين URL.

2. 2

   تكوين مشروعك

   أنشئ ملف تكوين لتحديد لغات تطبيقك:

   intlayer.config.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // لغات أخرى خاصة بك
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع توثيق التكوين.

3. 3

   دمج Intlayer في تكوين Vite الخاص بك

   أضف مكون intlayer الإضافي إلى تكوينك.

   vite.config.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue(), intlayer()],
   });
   

   يتم استخدام مكون Vite الإضافي intlayer() لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.

4. 4

   أعلن عن محتواك

   قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:

   src/helloWorld.content.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { t, type Dictionary } from "intlayer";
   
   const helloWorldContent = {
     key: "helloworld",
     content: {
       count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
       edit: t({
         en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
         fr: "قم بتحرير <code>components/HelloWorld.vue</code> واحفظ لاختبار HMR",
         es: "حرر <code>components/HelloWorld.vue</code> واحفظ لاختبار HMR",
       }),
       checkOut: t({ en: "تحقق من ", fr: "تحقق من ", es: "تحقق من " }),
       officialStarter: t({
         en: ", المبدئ الرسمي لـ Vue + Vite",
         fr: ", المبدئ الرسمي لـ Vue + Vite",
         es: ", المبدئ الرسمي لـ Vue + Vite",
       }),
       learnMore: t({
         en: "تعرف على المزيد حول دعم IDE لـ Vue في ",
         fr: "تعرف على المزيد حول دعم IDE لـ Vue في ",
         es: "تعرف على المزيد حول دعم IDE لـ Vue في ",
       }),
       vueDocs: t({
         en: "دليل توسيع مستندات Vue",
         fr: "دليل توسيع مستندات Vue",
         es: "دليل توسيع مستندات Vue",
       }),
       readTheDocs: t({
         en: "انقر على شعارات Vite و Vue لمعرفة المزيد",
         fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
         es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
       }),
     },
   } satisfies Dictionary;
   
   export default helloWorldContent;
   

   يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان داخل تطبيقك بمجرد تضمينها في دليل contentDir (افتراضيًا، ./src). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

   لمزيد من التفاصيل، راجع توثيق إعلان المحتوى.

5. 5

   استخدام Intlayer في كودك

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

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { createApp } from "vue";
   import { intlayer } from "vue-intlayer";
   import App from "./App.vue";
   import "./style.css";
   
   const app = createApp(App);
   
   // حقن المزود على المستوى الأعلى
   app.use(intlayer);
   
   // تركيب التطبيق
   app.mount("#app");
   

   يمكنك أيضاً استدعاء installIntlayer(app) مباشرة كدالة إذا فضلت:

   javascript

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { intlayer } from "vue-intlayer";
   app.use(intlayer);
   

   يمكنك الوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك من خلال إنشاء مكون Vue رئيسي واستخدام التركيبات useIntlayer:

   src/HelloWord.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <script setup lang="ts">
   import { ref } from "vue";
   import { useIntlayer } from "vue-intlayer";
   
   defineProps({
     msg: String,
   });
   
   const {
     count,
     edit,
     checkOut,
     officialStarter,
     learnMore,
     vueDocs,
     readTheDocs,
   } = useIntlayer("helloworld");
   const countRef = ref(0);
   </script>
   
   <template>
     <h1>{{ msg }}</h1>
   
     <div class="card">
       <button type="button" @click="countRef++">
         <count />
         {{ countRef }}
       </button>
       <p v-html="edit"></p>
     </div>
   
     <p>
       <checkOut />
       <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
         >create-vue</a
       >, <officialStarter />
     </p>
     <p>
       <learnMore />
       <a
         href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
         target="_blank"
         ><vueDocs /></a
       >.
     </p>
     <p class="read-the-docs"><readTheDocs /></p>
     <p class="read-the-docs">{{ readTheDocs }}</p>
   </template>
   

   إذا كان لديك تطبيق موجود بالفعل، يمكنك استخدام Intlayer Compiler، بالإضافة إلى أمر extract، لتحويل آلاف المكونات في ثانية واحدة.

   الوصول إلى المحتوى في Intlayer

   يقدم Intlayer واجهات برمجة تطبيقات مختلفة للوصول إلى المحتوى الخاص بك:

   • صياغة قائمة على المكونات (موصى بها): استخدم الصياغة <myContent />، أو <Component :is="myContent" /> لعرض المحتوى كعقدة Intlayer. هذا يتكامل بسلاسة مع المحرر المرئي و نظام إدارة المحتوى.

   • صياغة قائمة على النص: استخدم {{ myContent }} لعرض المحتوى كنص عادي، بدون دعم المحرر المرئي.

   • صياغة HTML الخام: استخدم <div v-html="myContent" /> لعرض المحتوى كـ HTML خام، بدون دعم محرر بصري.

   • صياغة التفكيك: الدالة القابلة للاستخدام useIntlayer تُعيد Proxy يحتوي على المحتوى. يمكن تفكيك هذا البروكسي للوصول إلى المحتوى مع الحفاظ على التفاعل.

     • استخدم const content = useIntlayer("myContent"); و {{ content.myContent }} / <content.myContent />.
     • أو استخدم const { myContent } = useIntlayer("myContent"); و {{ myContent}} / <myContent/> لتفكيك المحتوى.
6. 6

   تغيير لغة المحتوى الخاص بك

   اختياري

   لتغيير لغة المحتوى الخاص بك، يمكنك استخدام الدالة setLocale المقدمة من الدالة القابلة للاستخدام useLocale. تتيح لك هذه الدالة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.

   إنشاء مكون للتبديل بين اللغات:

   src/components/LocaleSwitcher.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref, watch } from "vue";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // الحصول على معلومات اللغة ودالة setLocale
   const { locale, availableLocales, setLocale } = useLocale();
   
   // تتبع اللغة المختارة باستخدام ref
   const selectedLocale = ref(locale.value);
   
   // تحديث اللغة عند تغيير الاختيار
   const changeLocale = () => setLocale(selectedLocale.value);
   
   // حافظ على تزامن selectedLocale مع اللغة العالمية
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   ثم، استخدم هذا المكون في ملف App.vue الخاص بك:

   src/App.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   import HelloWorld from "@components/HelloWorld.vue";
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   import { ref, watch } from "vue";
   
   const content = useIntlayer("app"); // أنشئ ملف إعلان intlayer المرتبط
   </script>
   
   <template>
     <div>
       <LocaleSwitcher />
       <a href="https://vite.dev" target="_blank">
         <img src="/vite.svg" class="logo" :alt="content.viteLogo" />
       </a>
       <a href="https://vuejs.org/" target="_blank">
         <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />
       </a>
     </div>
     <HelloWorld :msg="content.title" />
   </template>
   

7. 7

   إضافة التوجيه المحلي إلى تطبيقك

   اختياري

   عادةً ما يتضمن إضافة التوجيه المحلي في تطبيق Vue استخدام Vue Router مع بادئات اللغة. هذا يجعل مسارات فريدة لكل لغة، وهو مفيد لتحسين محركات البحث (SEO) وعناوين URL الصديقة لمحركات البحث.

   مثال:

   plaintext

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   - https://example.com/about
   - https://example.com/es/about
   - https://example.com/fr/about
   

   أولاً، قم بتثبيت Vue Router:

   bash

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   npm install vue-router
   npx intlayer init
   

   ثم، قم بإنشاء تكوين جهاز التوجيه الذي يتعامل مع التوجيه بناءً على اللغة:

   src/router/index.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import {
     localeFlatMap,
     type Locale,
   } from 'intlayer';
   import { createIntlayerClient } from "vue-intlayer";
   import { createRouter, createWebHistory } from 'vue-router';
   import HomeView from './views/home/HomeView.vue';
   import RootView from './views/root/Root.vue';
   
   /**
    * إعلان المسارات مع مسارات وبيانات وصفية خاصة بكل لغة.
    */
   const routes = localeFlatMap(({ urlPrefix, locale }) => [
     {
       path: `${urlPrefix}/`,
       name: `Root-${locale}`,
       component: RootView,
       meta: {
         locale,
       },
     },
     {
       path: `${urlPrefix}/home`,
       name: `Home-${locale}`,
       component: HomeView,
       meta: {
         locale,
       },
     },
   ]);
   
   // إنشاء مثيل الراوتر
   export const router = createRouter({
     history: createWebHistory(),
     routes,
   });
   
   // إضافة حارس التنقل لمعالجة اللغة
   router.beforeEach((to, _from, next) => {
     const client = createIntlayerClient();
   
     const metaLocale = to.meta.locale as Locale;
   
     // إعادة استخدام اللغة المعرفة في بيانات الراوتر
     client.setLocale(metaLocale);
     next();
   });
   

   يُستخدم الاسم لتحديد المسار في جهاز التوجيه. يجب أن يكون فريدًا عبر جميع المسارات لتجنب التعارضات وضمان التنقل والربط الصحيح.

   ثم، قم بتسجيل جهاز التوجيه في ملف main.js الخاص بك:

   src/main.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { createApp } from "vue";
   import App from "./App.vue";
   import { router } from "./router";
   import "./style.css";
   
   const app = createApp(App);
   
   // أضف جهاز التوجيه إلى التطبيق
   app.use(router);
   
   // قم بتركيب التطبيق
   app.mount("#app");
   

   ثم قم بتحديث ملف App.vue الخاص بك لعرض مكون RouterView. سيعرض هذا المكون المكون المطابق للمسار الحالي.

   src/App.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <script setup lang="ts">
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   </script>
   
   <template>
     <nav>
       <LocaleSwitcher />
     </nav>
     <RouterView />
   </template>
   

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

   لاحظ أنه لاستخدام intlayerProxy في الإنتاج، تحتاج إلى نقل حزمة vite-intlayer من devDependencies إلى dependencies.

   منذ Intlayer v9، يتم دمج intlayerProxy() مباشرة في مكون intlayer() وتفعيله بشكل افتراضي من خلال خيار routing.enableProxy (true بشكل افتراضي). تسجيله بشكل منفصل كما هو موضح أدناه أصبح اختياريًا الآن — يتم الاحتفاظ به للتوافق مع الإصدارات السابقة وللإعدادات التي تحتاج إلى التحكم في ترتيب المكونات الإضافية. عيّن routing.enableProxy: false لعدم الاستخدام. اطّلع على ملاحظات إصدار v9.

   vite.config.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

8. 8

   تغيير عنوان URL عند تغيير اللغة

   اختياري

   لتحديث عنوان URL تلقائيًا عند تغيير المستخدم للغة، يمكنك تعديل مكون LocaleSwitcher لاستخدام Vue Router:

   src/components/LocaleSwitcher.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref, watch } from "vue";
   import { useRouter } from "vue-router";
   import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // الحصول على Vue Router
   const router = useRouter();
   
   // الحصول على معلومات اللغة ودالة setLocale
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
       // الحصول على المسار الحالي وإنشاء رابط محلي
       const currentPath = router.currentRoute.value.fullPath;
       const localizedPath = getLocalizedUrl(currentPath, newLocale);
   
       // التنقل إلى المسار المحلي بدون إعادة تحميل الصفحة
       router.push(localizedPath);
     },
   });
   
   // تتبع اللغة المختارة باستخدام ref
   const selectedLocale = ref(locale.value);
   
   // تحديث اللغة عند تغيير الاختيار
   const changeLocale = () => {
     setLocale(selectedLocale.value);
   };
   
   // الحفاظ على تزامن selectedLocale مع اللغة العالمية
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   نصيحة: لتحسين تحسين محركات البحث (SEO) وسهولة الوصول، استخدم الوسوم مثل <a href="/fr/home" hreflang="fr"> للربط بالصفحات المترجمة، كما هو موضح في الخطوة 10. هذا يسمح لمحركات البحث باكتشاف وفهرسة عناوين URL الخاصة بكل لغة بشكل صحيح. للحفاظ على سلوك تطبيق الصفحة الواحدة (SPA)، يمكنك منع التنقل الافتراضي باستخدام @click.prevent، وتغيير اللغة باستخدام useLocale، والتنقل برمجياً باستخدام Vue Router.

   html

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <ol>
     <li>
       <a
         hreflang="x-default"
         aria-label="التبديل إلى الإنجليزية"
         target="_self"
         aria-current="page"
         href="/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="en">English</span>
           <span>الإنجليزية</span>
           <span>EN</span>
         </div>
       </a>
     </li>
     <li>
       <a
         hreflang="es"
         aria-label="التبديل إلى الإسبانية"
         target="_self"
         href="/es/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="es">Español</span>
           <span>الإسبانية</span>
           <span>ES</span>
         </div>
       </a>
     </li>
   </ol>
   

9. 9

   تبديل خصائص اللغة والاتجاه في وسم HTML

   اختياري

   عندما يدعم تطبيقك لغات متعددة، من الضروري تحديث خصائص lang و dir في وسم <html> لتتوافق مع اللغة الحالية. يضمن ذلك:

   • سهولة الوصول: تعتمد برامج قراءة الشاشة وتقنيات المساعدة على خاصية lang الصحيحة لنطق المحتوى وتفسيره بدقة.
   • عرض النص: تضمن خاصية dir (الاتجاه) عرض النص بالترتيب الصحيح (مثلًا من اليسار إلى اليمين للإنجليزية، ومن اليمين إلى اليسار للعربية أو العبرية)، وهو أمر ضروري لسهولة القراءة.
   • تحسين محركات البحث (SEO): تستخدم محركات البحث خاصية lang لتحديد لغة الصفحة، مما يساعد في تقديم المحتوى المحلي المناسب في نتائج البحث.

   من خلال تحديث هذه الخصائص ديناميكيًا عند تغيير اللغة، تضمن تجربة متسقة وسهلة الوصول للمستخدمين عبر جميع اللغات المدعومة.

   src/composables/useI18nHTMLAttributes.ts

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   import { watch } from "vue";
   import { useLocale } from "vue-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   /**
    * تركيبة تقوم بتحديث خصائص `lang` و `dir` لعنصر HTML <html>
    * بناءً على اللغة الحالية.
    *
    * @example
    * // في ملف App.vue الخاص بك أو في مكون عام
    * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes'
    *
    * useI18nHTMLAttributes()
    */
   export const useI18nHTMLAttributes = () => {
     const { locale } = useLocale();
   
     // تحديث خصائص HTML كلما تغيرت اللغة
     watch(
       () => locale.value,
       (newLocale) => {
         if (!newLocale) return;
   
         // تحديث خاصية اللغة
         document.documentElement.lang = newLocale;
   
         // تعيين اتجاه النص (ltr لمعظم اللغات، rtl للعربية، العبرية، إلخ)
         document.documentElement.dir = getHTMLTextDir(newLocale);
       },
       { immediate: true }
     );
   };
   

   استخدم هذا الـ composable في ملف App.vue الخاص بك أو في مكون عام:

   src/App.vue

   نسخ المحتوى

   نسخ الكود

   نسخ الكود إلى الحافظة

   <script setup lang="ts">
   import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";
   
   // تطبيق سمات HTML بناءً على اللغة الحالية
   useI18nHTMLAttributes();
   </script>
   
   <template>
     <!-- قالب التطبيق الخاص بك -->
   </template>
   

10. 10

    إنشاء مكون رابط محلي

    اختياري

    لضمان أن تنقل تطبيقك يحترم اللغة الحالية، يمكنك إنشاء مكون Link مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية إلى عناوين URL الداخلية، بحيث عند نقر مستخدم يتحدث الفرنسية على رابط لصفحة "حول"، يتم توجيهه إلى /fr/about بدلاً من /about.

    هذا السلوك مفيد لعدة أسباب:

    • تحسين محركات البحث وتجربة المستخدم: تساعد عناوين URL المترجمة محركات البحث على فهرسة الصفحات الخاصة بكل لغة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
    • الاتساق: باستخدام رابط مترجم في جميع أنحاء تطبيقك، تضمن أن التنقل يبقى ضمن اللغة الحالية، مما يمنع التبديل غير المتوقع بين اللغات.
    • قابلية الصيانة: تركيز منطق الترجمة في مكون واحد يبسط إدارة عناوين URL، مما يجعل قاعدة الشيفرة الخاصة بك أسهل في الصيانة والتوسيع مع نمو تطبيقك.

    src/components/Link.vue

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    <template>
      <a :href="localizedHref" v-bind="$attrs">
        <slot />
      </a>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      href: {
        type: String,
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // التحقق مما إذا كان الرابط خارجيًا
    const isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));
    
    // إنشاء href مترجم للروابط الداخلية
    const localizedHref = computed(() =>
      isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value)
    );
    </script>
    

    لاستخدام Vue Router، قم بإنشاء نسخة مخصصة للراوتر:

    src/components/RouterLink.vue

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    <template>
      <router-link :to="localizedTo" v-bind="$attrs">
        <slot />
      </router-link>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      to: {
        type: [String, Object],
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // إنشاء خاصية to محلية للـ router-link
    const localizedTo = computed(() => {
      if (typeof props.to === "string") {
        return getLocalizedUrl(props.to, locale.value);
      } else {
        // إذا كان 'to' كائنًا، قم بتعريب خاصية المسار
        return {
          ...props.to,
          path: getLocalizedUrl(props.to.path ?? "/", locale.value),
        };
      }
    });
    </script>
    

    استخدم هذه المكونات في تطبيقك:

    src/App.vue

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    <template>
      <div>
        <!-- Vue router  -->
        <RouterLink to="/">الرئيسية</RouterLink>
        <RouterLink to="/home">الصفحة الرئيسية</RouterLink>
        <!-- أخرى -->
        <Link href="/">الرئيسية</Link>
        <Link href="/home">الصفحة الرئيسية</Link>
      </div>
    </template>
    
    <script setup lang="ts">
    import Link from "@components/Link.vue";
    import RouterLink from "@components/RouterLink.vue";
    </script>
    

11. 1

    استخراج محتوى مكوناتك

    اختياري

    إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.

    لتسهيل هذه العملية، يقترح Intlayer مترجمًا / مستخرجًا لتحويل مكوناتك واستخراج المحتوى.

    لإعداده، يمكنك إضافة قسم compiler في ملف intlayer.config.ts الخاص بك:

    intlayer.config.ts

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... بقية التكوين الخاص بك
      compiler: {
        /**
         * يشير إلى ما إذا كان يجب تمكين المترجم.
         */
        enabled: true,
    
        /**
         * يحدد مسار ملفات المخرجات
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * يشير إلى ما إذا كان يجب حفظ المكونات بعد تحويلها. بهذه الطريقة، يمكن تشغيل المترجم مرة واحدة فقط لتحويل التطبيق، ثم يمكن إزالته.
         */
        saveComponents: false,
    
        /**
         * بادئة مفتاح القاموس
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;
    

    أمر الاستخراجمترجم Babel

    قم بتشغيل المستخرج لتحويل مكوناتك واستخراج المحتوى

    bash

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    npx intlayer extract
    

    Since v9, the intlayerCompiler is included in the intlayer plugin. So you don't need to add it manually.

    babel.config.js

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    const {
      intlayerExtractBabelPlugin,
      getExtractPluginOptions,
    } = require("@intlayer/babel");
    
    module.exports = {
      presets: ["next/babel"],
      plugins: [
        // استخراج المحتوى من المكونات إلى القواميس
        [intlayerExtractBabelPlugin, getExtractPluginOptions()],
      ],
    };
    

    bash

    نسخ المحتوى

    نسخ الكود

    نسخ الكود إلى الحافظة

    npm run build # أو npm run dev
    

(اختياري) خريطة الموقع و robots.txt (توليد وقت البناء)

يوفّر Intlayer الدالتين generateSitemap وgetMultilingualUrls لتنسيق مخرجات جاهزة للزحّافات (sitemap.xml متعدد اللغات وrobots.txt) وكتابتها تلقائياً إلى public/. عادةً تشغّل سكربت Node صغير قبل Vite (مثلاً خطافات npm predev / prebuild).

خريطة الموقع

يولّد مولّد خرائط المواقع إعدادات اللغات ويضيف البيانات الوصفية المناسبة.

تدعم الخريطة مساحة الاسم xhtml:link (hreflang). بدلاً من قائمة عناوين مسطحة، يربط Intlayer بين جميع النسخ اللغوية لكل صفحة في الاتجاهين (مثل /about و/fr/about أو /about?lang=fr وفقًا لوضع التوجيه).

Robots.txt

استخدم getMultilingualUrls لتشمل قواعد Disallow كل المتغيرات المحلية للمسارات الحساسة.

1. أضف generate-seo.mjs في جذر المشروع

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

يجب تثبيت حزمة intlayer. عيّن SITE_URL في بيئة الإنتاج (مثلاً في CI).

يُفضّل generate-seo.mjs لـ ESM في Node. إن استخدمت generate-seo.js ففعّل "type": "module" في package.json أو ESM بطريقة أخرى.

2. شغّل السكربت قبل Vite

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

عدّل الأوامر إن كنت تستخدم pnpm أو yarn. يمكن استدعاء السكربت من CI أيضاً.

تكوين TypeScript

يستخدم Intlayer ميزة module augmentation للاستفادة من TypeScript وجعل codebase الخاص بك أقوى.

تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المُنشأة تلقائيًا (autogenerated types).

{
  // ... تكوينات TypeScript الحالية الخاصة بك
  "include": [
    // ... تكوينات TypeScript الحالية الخاصة بك
    ".intlayer/**/*.ts", // تضمين الأنواع المُنشأة تلقائيًا
  ],
}

إعداد Git

يوصى بتجاهل الملفات التي تم إنشاؤها بواسطة Intlayer. يتيح لك ذلك تجنب إرسالها (committing) إلى مستودع Git الخاص بك.

للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:

# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
.intlayer

إضافة VS Code

لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت إضافة Intlayer الرسمية لـ VS Code.

التثبيت من سوق VS Code

تقدم هذه الإضافة:

• الإكمال التلقائي لمفاتيح الترجمة.
• الكشف عن الأخطاء في الوقت الحقيقي للترجمات المفقودة.
• معاينات داخلية للمحتوى المترجم.
• إجراءات سريعة لإنشاء الترجمات وتحديثها بسهولة.

لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع توثيق إضافة Intlayer لـ VS Code.

التقدم أكثر

للتقدم أكثر، يمكنك تنفيذ المحرر المرئي أو إخراج محتواك باستخدام نظام إدارة المحتوى (CMS).

Once you share these, I'll perform the complete audit and return the fully updated Arabic content with proper formatting.---