الوثائق / Qwik

تعديل Qwik للغة، تلقائي

تعديل تطبيق Qwik: يتم قراءة اللغة من خلال استخدام useTranslation() من URL مع Qwik City، وتكون لكل مسار نسخة خاصة باللغة.

كيف يعمل

الكوّد JSX داخل component$ يحصل على const { t } = useTranslation(). اللغة هي الجزء الأول من URL (Qwik City’s useLocation), وكل مسار، بما في ذلك المسارات الديناميكية، يحصل على نسخة لكل لغة.

جملة حول رابط تظل رسالة واحدة، تُعرض بواسطة rich() مع العناصر الأصلية.

قبل وبعد

المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.

src/routes/index.tsx · قبل

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <h1>Welcome to the shop</h1>
      <p>Read the <a href="/faq">FAQ</a> before ordering.</p>
    </>
  );
});

src/routes/index.tsx · بعد

import { component$ } from '@builder.io/qwik';
import { useTranslation, rich } from '../i18n';

export default component$(() => {
  const { t } = useTranslation();
  return (
    <>
      <h1>{t('home.welcome_to_the_shop')}</h1>
      <p>{rich(t('home.read_the_faq_before_ordering'), { a: (c) => <a href="/faq">{c}</a> })}</p>
    </>
  );
});

locales/en.json

{
  "home": {
    "welcome_to_the_shop": "Welcome to the shop",
    "read_the_faq_before_ordering": "Read the <a>FAQ</a> before ordering."
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد مودول i18n مُولد في src/i18n إذا لم يكن المشروع يحتوي عليه بعد:

src/i18n.ts مع useTranslation(), localizePath() و اللغات المحضنة
نسخة لكل مسار تحت src/routes/<lang>/

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.