BerandaSandboxShowcaseAplikasiDokumentasiBlog
    • EnglishInggris
      EN
    • русскийRusia
      RU
    • 日本語Jepang
      JA
    • françaisPrancis
      FR
    • 한국어Korea
      KO
    • 中文Tionghoa
      ZH
    • españolSpanyol
      ES
    • DeutschJerman
      DE
    • العربيةArab
      AR
    • italianoItalia
      IT
    • British EnglishInggris (Britania)
      EN-GB
    • portuguêsPortugis
      PT
    • हिन्दीHindi
      HI
    • TürkçeTurki
      TR
    • polskiPolski
      PL
    • IndonesiaIndonesia
      ID
    • Tiếng ViệtVietnam
      VI
    • українськаUkraina
      UK
    /
    Filter dokumen berdasarkan framework
    Alt+←
    Mengapa Intlayer?
    Mulai
    Konsep
    • Bagaimana Intlayer bekerja
    • Konfigurasi
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Editor visual
    • CMS
    • Integrasi CI/CD
    • TerjemahanPluralPenumeraanKondisiJenis kelaminPenambahanBerkasNestingMarkdownHTMLPengambilan fungsi
    • File untuk setiap lokal
    • Kompilator
    • Pengisian otomatis
    • Pengujian
    • Optimasi paket
    Lingkungan
    • Next.js 14 dan App Router
      Next.js 15
      Next.js tanpa locale URL
      Next.js dan Page Router
      Compiler
    • Tanstack Start Solid
    • Astro dan React
      Astro dan Svelte
      Astro dan Vue
      Astro dan Solid
      Astro dan Preact
      Astro dan Lit
      Astro dan Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt dan Vue
    • Vite dan Solid
    • SvelteKit
    • Vite dan Preact
    • Vite dan Vanilla JS
    • Vite dan Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native dan Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx dan React
    Plugins
    • JSON
    • gettext (.po)
    Ekstensi VS Code
    Agen
    • Server MCP
    • Keahlian agen
    Rilis
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Ajukan pertanyaan
    1. Documentation
    2. Konsep
    3. Deklarasi konten
    4. Penambahan
    Dibuat:2025-03-13Terakhir diperbarui:2025-06-29
    Referensikan dokumen ini ke asisten AI favorit Anda
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda

    Riwayat Versi

    1. "Dekorasi otomatis konten penyisipan"
      v8.0.018/1/2026
    2. "Inisialisasi riwayat"
      v5.5.1029/6/2025

    Konten halaman ini diterjemahkan menggunakan AI.

    Lihat versi terakhir dari konten aslinya dalam bahasa Inggris
    Sunting dokumen ini

    Jika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.

    Tautan GitHub ke dokumentasi
    Salin

    Salin Markdown dokumentasi ke clipboard

    Konten Penyisipan / Penyisipan di Intlayer

    Cara Kerja Penyisipan

    Di Intlayer, konten penyisipan dicapai melalui fungsi insertion, yang mengidentifikasi bidang placeholder dalam sebuah string (seperti {{name}} atau {{age}}) yang dapat diganti secara dinamis saat runtime. Pendekatan ini memungkinkan Anda membuat string yang fleksibel seperti template di mana bagian tertentu dari konten ditentukan oleh data yang dikirim dari aplikasi Anda.

    Saat diintegrasikan dengan React Intlayer atau Next Intlayer, Anda cukup menyediakan objek data yang berisi nilai untuk setiap placeholder, dan Intlayer akan secara otomatis merender konten dengan placeholder yang sudah diganti.

    Menyiapkan Konten Penyisipan

    Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten yang mencakup definisi penyisipan Anda.

    Gunakan fungsi insert untuk mendeklarasikan konten penyisipan secara eksplisit.

    Jika string mengandung indikator penyisipan umum (seperti {{name}}), Intlayer akan secara otomatis mengubahnya.

    Menggunakan Konten Insertion dengan React Intlayer

    Untuk memanfaatkan konten insertion dalam sebuah komponen React, impor dan gunakan hook useIntlayer dari paket react-intlayer. Hook ini mengambil konten untuk kunci yang ditentukan dan memungkinkan Anda untuk mengirimkan sebuah objek yang memetakan setiap placeholder dalam konten Anda ke nilai yang ingin Anda tampilkan.

    **/*.tsx
    Salin kode

    Salin kode ke clipboard

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    const InsertionComponent: FC = () => {
      const { myInsertion } = useIntlayer("my_key");
    
      return (
        <div>
          <p>
            {
              /* Output: "Halo, nama saya John dan saya berumur 30 tahun!" */
              myInsertion({ name: "John", age: "30" })
            }
          </p>
          <p>
            {
              /* Anda dapat menggunakan kembali insertion yang sama dengan nilai yang berbeda */
              myInsertion({ name: "Alice", age: "25" })
            }
          </p>
        </div>
      );
    };
    
    export default InsertionComponent;

    Sumber Daya Tambahan

    Untuk informasi lebih rinci tentang konfigurasi dan penggunaan, lihat sumber daya berikut:

    • Dokumentasi Intlayer CLI
    • Dokumentasi React Intlayer
    • Dokumentasi Next Intlayer

    Sumber daya ini menawarkan wawasan lebih lanjut tentang pengaturan dan penggunaan Intlayer di berbagai lingkungan dan framework.

    Jenis kelamin
    Berkas
    Alt+→

    Di halaman ini

      Diskusi bersifat anonim dan ditinjau secara berkala untuk mengatasi masalah umum. Jangan ragu untuk berbagi ide fitur, masukan tentang dokumentasi, atau apa pun yang terkait dengan Intlayer, kami menggunakan masukan ini untuk membentuk peta jalan dan meningkatkan produk.