المؤلف:

إنشاء:2026-06-12آخر تحديث:2026-06-12

استخدم هذه الصفحة والموفر AI الذي تريدهChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

تاريخ الإصدارات

"إصدار ميزة متغيرات القواميس"
v9.0.0١٢‏/٦‏/٢٠٢٦

تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية

تعديل هذه الوثيقة

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

نسخ

نسخ الـ Markdown من المستند إلى الحافظة

المتغيرات

Name: Intlayer
Author: Intlayer

المتغير (Variant) هو عبارة عن مجموعة من ملفات المحتوى التي تشترك في نفس مفتاح القاموس (key) ولكن كل منها يحمل اسم متغير (variant) مختلف. يقوم Intlayer بتقديم الملف المناسب بناءً على المحدد الممرر إلى useIntlayer.

الإعلان عن المتغيرات

يمثل كل ملف بديلاً مسمى واحدًا. يؤدي حذف variant (أو تعيينه إلى "default") إلى تعيين الملف كمتغير افتراضي (fallback).

hero-banner.content.ts

نسخ الكود

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

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;

hero-banner.black-friday.content.ts

نسخ الكود

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

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

استهلاك المتغيرات

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

Hero.tsx

نسخ الكود

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

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → المتغير الافتراضي

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

نسخ الكود

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

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → المتغير الافتراضي

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.vue

نسخ الكود

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

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

نسخ الكود

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

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

نسخ الكود

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

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → المتغير الافتراضي

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

نسخ الكود

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

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // →  المتغير الافتراضي

  return (
    <section>
      <h1>{content().headline}</h1>
      <a>{content().cta}</a>
    </section>
  );
};

hero.component.ts

نسخ الكود

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

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

نسخ الكود

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

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

متغير مسمى

tsx

نسخ الكود

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

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

متغير مسمى مع لغة محددة صراحة

tsx

نسخ الكود

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

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "ar",});

حالات الاستخدام الشائعة

اختبارات النصوص A/B الموجهة بمفتاح التجربة
اللافتات الترويجية أو الموسمية
الرسائل المرتبطة بأعلام الميزات (feature flags)
الحملات التسويقية الخاصة بمنطقة معينة

المجموعات السجلات الديناميكية