Tác giả:

Ngày tạo:2026-06-12Cập nhật lần cuối:2026-06-12

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạnChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Lịch sử phiên bản

"Phát hành tính năng nội dung động"
v9.0.012/6/2026

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Chỉnh sửa tài liệu này

Nếu bạn có ý tưởng để cải thiện tài liệu này, vui lòng đóng góp bằng cách gửi pull request trên GitHub.

Liên kết GitHub tới tài liệu

Sao chép

Sao chép Markdown của tài liệu vào bộ nhớ tạm

Bản Ghi Động

Name: Intlayer
Author: Intlayer

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

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

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

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ữ