ترجم Vite and Vue باستخدام Intlayer | التدويل (i18n)

npm install intlayer vue-intlayernpm install vite-intlayer --save-devnpx intlayer init

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");

<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>

<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";// الحصول على معلومات اللغة ودالة setLocaleconst { locale, availableLocales, setLocale } = useLocale();// تتبع اللغة المختارة باستخدام refconst selectedLocale = ref(locale.value);// تحديث اللغة عند تغيير الاختيارconst changeLocale = () => setLocale(selectedLocale.value);// حافظ على تزامن selectedLocale مع اللغة العالميةwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

<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>

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

npm install vue-routernpx intlayer init

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();});

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");

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

<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 Routerconst router = useRouter();// الحصول على معلومات اللغة ودالة setLocaleconst { locale, availableLocales, setLocale } = useLocale({  onLocaleChange: (newLocale) => {    // الحصول على المسار الحالي وإنشاء رابط محلي    const currentPath = router.currentRoute.value.fullPath;    const localizedPath = getLocalizedUrl(currentPath, newLocale);    // التنقل إلى المسار المحلي بدون إعادة تحميل الصفحة    router.push(localizedPath);  },});// تتبع اللغة المختارة باستخدام refconst selectedLocale = ref(locale.value);// تحديث اللغة عند تغيير الاختيارconst changeLocale = () => {  setLocale(selectedLocale.value);};// الحفاظ على تزامن selectedLocale مع اللغة العالميةwatch(  () => locale.value,  (newLocale) => {    selectedLocale.value = newLocale;  });</script>

<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>

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 }  );};

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

<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>

<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-linkconst 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>

<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>

import MarkdownIt from "markdown-it";import { createApp, h } from "vue";import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";const app = createApp(App);app.use(intlayer);const md = new MarkdownIt({  html: true, // السماح بعلامات HTML  linkify: true, // الربط التلقائي لعناوين URL  typographer: true, // تفعيل علامات الاقتباس الذكية، والشرطات، إلخ.});// إخبار Intlayer باستخدام md.render() كلما احتاج لتحويل Markdown إلى HTMLinstallIntlayerMarkdown(app, (markdown) => {  const html = md.render(markdown);  return h("div", { innerHTML: html });});

<template>  <div>    <myMarkdownContent />  </div></template><script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("my-component");</script>

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

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

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

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.");

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