Автор:

Дата створення:2026-06-12Останнє оновлення:2026-06-12

Надішліть цей документ вашому улюбленому AI-асистентуChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту

Історія версій

"Випуск функції динамічного контенту"
v9.0.012.06.2026

Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

Переглянути останню версію оригінального вмісту англійською

Редагувати цей документ

Якщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.

Посилання на документацію на GitHub

Копіювати

Скопіювати документацію у форматі Markdown в буфер обміну

Динамічні Записи

Name: Intlayer
Author: Intlayer

Динамічний запис (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>`;}

З явною локаллю

tsx

Копіювати код

Скопіюйте код у буфер обміну

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

Відсутність поля meta — помилка під час компіляції

Копіювати код

Скопіюйте код у буфер обміну

// Помилка типу: відсутній `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

Режим завантаження (loading mode)

Динамічні записи зазвичай завантажуються відкладено. Установіць 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
Вміст конкретного користувача або облікового запису
Будь-який вміст, що отримується на основі непрозорого runtime ID

Варіанти Файл для кожної локалі