المؤلف:

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

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

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

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

"إصدار ميزة المتغيرات"
v9.0.0١٢‏/٦‏/٢٠٢٦
"أصبح `variant` يقبل سلسلة نصية أو كائنًا — تُعلَن `meta` / السجلات الديناميكية السابقة كمتغيرات كائنية"
v9.1.0٢٦‏/٦‏/٢٠٢٦

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

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

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

المتغيرات

Name: Intlayer
Author: Intlayer

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

يمكن أن تأخذ قيمة variant شكلين:

سلسلة نصية — بديل مُسمّى واحد (اختبارات A/B، لافتات موسمية، أعلام ميزات).
كائن — مُميِّز منظّم يُعنوَن بمجموعة من الحقول (سجلات CMS، محتوى خاص بالمستخدم، أي محتوى مفتاحه مُعرِّف غامض). الكائن بأكمله هو الهوية: يجب أن يوفّر المُحدِّد كائنًا مساويًا لحلّ المدخلة.

يحلّ الشكل الكائني محل حقل meta السابق. في كل مكان كنت تكتب فيه سابقًا meta: { id, … }، اكتب variant: { id, … }، وحدّدها بـ { variant: { id, … } }.

المتغيرات المُسمّاة (النصية)

يمثّل كل ملف بديلًا مُسمّى واحدًا. حذف variant (أو ضبطه على "default") يجعله البديل الاحتياطي.

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

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

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

متغير مُسمّى بلغة locale صريحة

tsx

نسخ الكود

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

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

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

المتغيرات الكائنية (المنظّمة)

يُعنوِن المتغير الكائني المحتوى بمجموعة عشوائية من أزواج المفتاح-القيمة المُعلَنة في حقل variant — مما يتيح نمذجة سجلات CMS، أو المحتوى الخاص بالمستخدم، أو أي محتوى مفتاحه مُعرِّف غامض. الهوية هي الكائن بأكمله: يجب أن يوفّر المُحدِّد كائنًا مساويًا حتى تُحلّ المدخلة.

product.abc.content.ts

نسخ الكود

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

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

const dictionary = {
  key: "product",
  variant: { id: "prod_abc", userId: "user_123" },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;

product.abcd.content.ts

نسخ الكود

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

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

const dictionary = {
  key: "product",
  variant: { id: "prod_abcd", userId: "user_123" },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

استهلاك المتغيرات الكائنية

مرّر الكائن المطابق إلى variant. يجب توفير كل حقل مُعلَن في القاموس ومساواته؛ وإلا فالنتيجة null. لا يهم ترتيب الحقول.

Product.tsx

نسخ الكود

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

import { useIntlayer } from "react-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

  return <p>{content.description}</p>;
};

Product.tsx

نسخ الكود

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

import { useIntlayer } from "next-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

  return <p>{content.description}</p>;
};

Product.vue

نسخ الكود

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

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product", {
  variant: { id: props.productId, userId: props.userId },
});
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

Product.svelte

نسخ الكود

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

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let productId: string;
export let userId: string;

const content = useIntlayer("product", {
  variant: { id: productId, userId },
});
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

Product.tsx

نسخ الكود

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

import { useIntlayer } from "preact-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

  return <p>{content.description}</p>;
};

Product.tsx

نسخ الكود

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

import { useIntlayer } from "solid-intlayer";

export const Product = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: props.productId, userId: props.userId },
  });

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product.component.ts

نسخ الكود

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

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

@Component({
  selector: "app-product",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product", {
      variant: { id: this.productId, userId: this.userId },
    });
  }
}

product.js

نسخ الكود

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

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

مع لغة locale صريحة

tsx

نسخ الكود

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

const content = useIntlayer("product", {  variant: { id: "prod_abc", userId: "user_123" },  locale: "fr",});

const content = useIntlayer("product", {  variant: { id: "prod_abc", userId: "user_123" },  locale: "fr",});

حقل مفقود — لا تطابق

نسخ الكود

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

// يُعيد null: `userId` مفقود، لذا لا يتطابق الكائن مع المتغير المُعلَنconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

// يُعيد null: `userId` مفقود، لذا لا يتطابق الكائن مع المتغير المُعلَنconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

وضع التحميل

غالبًا ما تُحمَّل المتغيرات الكائنية بشكل كسول. اضبط importMode على القاموس للتحكم في ذلك:

نسخ الكود

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

const dictionary = {
  key: "product",
  importMode: "fetch", // or "dynamic"
  variant: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

راجع تحسين الحزمة لمعرفة تفاصيل أوضاع static وdynamic وfetch.

حالات الاستخدام النموذجية

اختبارات A/B للنصوص مُوجَّهة بمفتاح تجربة
لافتات موسمية أو ترويجية
رسائل بأعلام الميزات
حملات تسويقية خاصة بلغة locale
نص تسويقي لكل منتج يُدار في CMS
محتوى خاص بالمستخدم أو الحساب
أي محتوى يُعنوَن بمُعرِّف غامض في وقت التشغيل

المجموعات

ملف لكل لغة