السجل الديناميكي (dynamic record) هو ملف محتوى لا يتم تحديد هويته بواسطة فهرس تسلسلي أو متغير مسمى، بل بواسطة مجموعة عشوائية من أزواج المفاتيح والقيم المعلنة في حقل meta. يستخدم Intlayer هذه الحقول كمحدد في وقت التشغيل، مما يتيح معالجة سجلات CMS، أو نسخ محددة للمستخدم، أو أي محتوى لا تُعرف مفاتيحه في وقت البناء.

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

product-copy.abc.content.ts

نسخ الكود

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

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

const dictionary = {
  key: "product-copy",
  meta: {
    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-copy.abcd.content.ts

نسخ الكود

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

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

const dictionary = {
  key: "product-copy",
  meta: {
    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;

استهلاك السجلات الديناميكية

جميع حقول meta مطلوبة في المحدد. يؤدي حذف أي حقل إلى إرجاع null ويعد خطأ في TypeScript.

ProductCopy.tsx

نسخ الكود

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

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // يضمن TypeScript توفير كل من `id` و `userId`.

  if (!content) return null;

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

ProductCopy.tsx

نسخ الكود

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

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // يضمن TypeScript توفير كل من `id` و `userId`.

  if (!content) return null;

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

ProductCopy.vue

نسخ الكود

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

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

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

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

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

ProductCopy.svelte

نسخ الكود

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

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

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

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

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

ProductCopy.tsx

نسخ الكود

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

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // يضمن TypeScript توفير كل من `id` و `userId`.

  if (!content) return null;

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

ProductCopy.tsx

نسخ الكود

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

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // يضمن TypeScript توفير كل من `id` و `userId`.

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

product-copy.component.ts

نسخ الكود

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

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

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

  content: any;

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

product-copy.js

نسخ الكود

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

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

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

مع تحديد لغة صريحة

tsx

نسخ الكود

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

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

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

حقل meta مفقود — خطأ وقت الترجمة

نسخ الكود

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

// خطأ في النوع: `userId` مفقودconst content = useIntlayer("product-copy", { id: "prod_abc" });

// خطأ في النوع: `userId` مفقودconst content = useIntlayer("product-copy", { id: "prod_abc" });

وضع التحميل

عادة ما يتم تحميل السجلات الديناميكية بشكل كسول. قم بتعيين importMode في القاموس للتحكم في ذلك:

نسخ الكود

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

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // أو "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

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

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

نسخة تسويقية لكل منتج تتم إدارتها في نظام إدارة المحتوى (CMS)
محتوى خاص بالمستخدم أو خاص بالحساب
أي محتوى يتم تعيينه بواسطة معرف تشغيل غير شفاف

المتغيرات

ملف لكل لغة