Một bản ghi động (dynamic record) là một tệp nội dung có danh tính không phải là một chỉ mục tuần tự hoặc một biến thể có tên, mà là một tập hợp tùy ý gồm các cặp khóa-giá trị được khai báo trong trường meta. Intlayer sử dụng các trường đó làm bộ chọn tại runtime, giúp có thể định địa chỉ các bản ghi CMS, nội dung dành riêng cho người dùng hoặc bất kỳ nội dung nào có khóa không được biết tại thời điểm build.

Khai báo các bản ghi động

product-copy.abc.content.ts

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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;

Sử dụng bản ghi động

Tất cả các trường meta đều bắt buộc trong bộ chọn. Việc bỏ qua bất kỳ trường nào sẽ trả về null và gây ra lỗi TypeScript.

ProductCopy.tsx

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript đảm bảo rằng cả `id` và `userId` đều được cung cấp.

  if (!content) return null;

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

ProductCopy.tsx

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript đảm bảo rằng cả `id` và `userId` đều được cung cấp.

  if (!content) return null;

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

ProductCopy.vue

Sao chép mã

Sao chép mã vào clipboard

<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

Sao chép mã

Sao chép mã vào clipboard

<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

Sao chép mã

Sao chép mã vào clipboard

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript đảm bảo rằng cả `id` và `userId` đều được cung cấp.

  if (!content) return null;

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

ProductCopy.tsx

Sao chép mã

Sao chép mã vào clipboard

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 đảm bảo rằng cả `id` và `userId` đều được cung cấp.

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

product-copy.component.ts

Sao chép mã

Sao chép mã vào clipboard

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

Sao chép mã

Sao chép mã vào clipboard

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

Với ngôn ngữ rõ ràng

tsx

Sao chép mã

Sao chép mã vào clipboard

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

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

Thiếu trường meta — lỗi compile-time

Sao chép mã

Sao chép mã vào clipboard

// Lỗi kiểu dữ liệu: thiếu `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

// Lỗi kiểu dữ liệu: thiếu `userId`const content = useIntlayer("product-copy", { id: "prod_abc" });

Chế độ tải (loading mode)

Các bản ghi động thường được tải lười (lazy loaded). Hãy thiết lập importMode trên từ điển để kiểm soát điều này:

Sao chép mã

Sao chép mã vào clipboard

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

export default dictionary;

Xem tối ưu hóa gói bundle để biết thêm chi tiết về chế độ static, dynamic và fetch.

Các trường hợp sử dụng điển hình

Nội dung tiếp thị trên mỗi sản phẩm được quản lý trong CMS
Nội dung dành riêng cho người dùng hoặc tài khoản cụ thể
Bất kỳ nội dung nào được xác định bằng một ID runtime ẩn

Biến thể

File cho mỗi ngôn ngữ