Trang chủSandboxTrưng bàyỨng dụngTài liệuBlog
    • EnglishTiếng Anh
      EN
    • русскийTiếng Nga
      RU
    • 日本語Tiếng Nhật
      JA
    • françaisTiếng Pháp
      FR
    • 한국어Tiếng Hàn
      KO
    • 中文Tiếng Trung
      ZH
    • españolTiếng Tây Ban Nha
      ES
    • DeutschTiếng Đức
      DE
    • العربيةTiếng Ả Rập
      AR
    • italianoTiếng Italy
      IT
    • British EnglishTiếng Anh (Anh)
      EN-GB
    • portuguêsTiếng Bồ Đào Nha
      PT
    • हिन्दीTiếng Hindi
      HI
    • TürkçeTiếng Thổ Nhĩ Kỳ
      TR
    • polskiTiếng Ba Lan
      PL
    • IndonesiaTiếng Indonesia
      ID
    • Tiếng ViệtTiếng Việt
      VI
    • українськаTiếng Ukraina
      UK
    /
    Lọc tài liệu theo framework
    Alt+←
    Tại sao Intlayer?
    Bắt đầu
    Khái niệm
    • Intlayer làm việc như thế nào
    • Cấu hình
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Editor visual
    • CMS
    • Tích hợp CI/CD
    • DịchSố nhiềuLiệt kêĐiều kiệnGiới tínhChènTệpNestingMarkdownHTMLLấy hàm
    • File cho mỗi ngôn ngữ
    • Biên dịch
    • Tự động điền
    • Kiểm tra
    • Tối ưu hóa gói
    Môi trường
    • Next.js 14 và App Router
      Next.js 15
      Next.js không locale URL
      Next.js và Page Router
      Trình biên dịch
    • Tanstack Start Solid
    • Astro và React
      Astro và Svelte
      Astro và Vue
      Astro và Solid
      Astro và Preact
      Astro và Lit
      Astro và Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt và Vue
    • Vite và Solid
    • SvelteKit
    • Vite và Preact
    • Vite và Vanilla JS
    • Vite và Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native và Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx và React
    Plugins
    • JSON
    • gettext (.po)
    Mở rộng VS Code
    Tác nhân
    • MCP Server
    • Kỹ năng tác nhân
    Phiên bản
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Đặt câu hỏi
    1. Documentation
    2. Khái niệm
    3. Khai báo nội dung
    4. Chèn
    Ngày tạo:2025-03-13Cập nhật lần cuối:2025-06-29
    Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạn
    ChatGPT
    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

    1. "Tự động trang trí nội dung chèn"
      v8.0.018/1/2026
    2. "Khởi tạo lịch sử"
      v5.5.1029/6/2025

    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

    Nội Dung Chèn / Chèn trong Intlayer

    Cách Thức Hoạt Động của Chèn

    Trong Intlayer, nội dung chèn được thực hiện thông qua hàm insertion, hàm này xác định các trường chỗ giữ trong một chuỗi (chẳng hạn như {{name}} hoặc {{age}}) có thể được thay thế một cách động khi chạy. Cách tiếp cận này cho phép bạn tạo các chuỗi linh hoạt, giống như mẫu, trong đó các phần cụ thể của nội dung được xác định bởi dữ liệu được truyền từ ứng dụng của bạn.

    Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cung cấp đối tượng dữ liệu chứa các giá trị cho từng chỗ giữ, và Intlayer sẽ tự động hiển thị nội dung với các chỗ giữ được thay thế.

    Thiết Lập Nội Dung Chèn

    Để thiết lập nội dung chèn trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa chèn của bạn.

    Sử dụng hàm insert để khai báo nội dung chèn một cách rõ ràng.

    Nếu chuỗi chứa các chỉ báo chèn phổ biến (như {{name}}), Intlayer sẽ tự động chuyển đổi nó.

    Sử dụng Nội dung Chèn với React Intlayer

    Sử dụng Nội dung Chèn với React Intlayer

    Để sử dụng nội dung chèn trong một component React, hãy import và sử dụng hook useIntlayer từ package react-intlayer. Hook này lấy nội dung theo key được chỉ định và cho phép bạn truyền vào một đối tượng ánh xạ mỗi placeholder trong nội dung với giá trị bạn muốn hiển thị.

    **/*.tsx
    Sao chép mã

    Sao chép đoạn mã vào khay nhớ tạm (clipboard)

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const InsertionComponent: FC = () => {
      const { myInsertion } = useIntlayer("my_key");
    
      return (
        <div>
          <p>
            {
              /* Kết quả: "Xin chào, tôi tên là John và tôi 30 tuổi!" */
              myInsertion({ name: "John", age: "30" })
            }
          </p>
          <p>
            {
              /* Bạn có thể tái sử dụng cùng một nội dung chèn với các giá trị khác nhau */
              myInsertion({ name: "Alice", age: "25" })
            }
          </p>
        </div>
      );
    };
    
    export default InsertionComponent;

    Tài Nguyên Bổ Sung

    Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, vui lòng tham khảo các tài nguyên sau:

    • Tài liệu CLI của Intlayer
    • Tài liệu React Intlayer
    • Tài liệu Next Intlayer

    Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trên nhiều môi trường và framework khác nhau.

    Giới tính
    Tệp
    Alt+→

    Trong trang này

      Các cuộc thảo luận là ẩn danh và được xem xét thường xuyên để giải quyết các vấn đề phổ biến. Hãy thoải mái chia sẻ ý tưởng tính năng, phản hồi về tài liệu hoặc bất cứ điều gì liên quan đến Intlayer, chúng tôi sử dụng thông tin này để định hình lộ trình và cải thiện sản phẩm.