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
    Dibuat:2025-02-07Terakhir diperbarui:2026-05-12
    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. "Tambahkan dukungan format file YAML dan Markdown"
      v8.10.019/5/2026
    2. "Add `plural` content node type"
      v8.9.012/5/2026
    3. "Tambahkan tipe node konten `html`"
      v8.0.028/1/2026
    4. "Rename `live` import mode to `fetch` to better describe the underlying mechanism."
      v8.0.024/1/2026
    5. "Tambahkan opsi kamus `location` dan `schema`"
      v8.0.018/1/2026
    6. "Menambahkan dukungan format ICU dan i18next"
      v7.5.013/12/2025
    7. "Mengganti nama `autoFill` menjadi `fill`"
      v7.0.023/10/2025
    8. "Menambahkan dokumentasi fields"
      v6.0.020/9/2025
    9. "Memulai 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

    Berkas Konten

    www.youtube.com

    Apa itu Berkas Konten?

    Berkas konten dalam Intlayer adalah berkas yang berisi definisi kamus. Berkas-berkas ini mendeklarasikan konten teks aplikasi Anda, terjemahan, dan sumber daya. Berkas konten diproses oleh Intlayer untuk menghasilkan kamus.

    Kamus-kamus tersebut akan menjadi hasil akhir yang akan diimpor oleh aplikasi Anda menggunakan hook useIntlayer.

    Konsep Utama

    Kamus

    Sebuah kamus adalah kumpulan konten yang terstruktur dan diorganisir berdasarkan kunci. Setiap kamus berisi:

    • Key: Identifier unik untuk kamus tersebut
    • Content: Nilai konten sebenarnya (teks, angka, objek, dll.)
    • Metadata: Informasi tambahan seperti judul, deskripsi, tag, dll.

    Berkas Konten

    Contoh berkas konten:

    src/example.content.tsx
    Salin kode

    Salin kode ke clipboard

    import { type ReactNode } from "react";
    import {
      t,
      enu,
      plural,
      cond,
      nest,
      md,
      insert,
      file,
      type Dictionary,
    } from "intlayer";
    
    interface Content {
      imbricatedContent: {
        imbricatedContent2: {
          stringContent: string;
          numberContent: number;
          booleanContent: boolean;
          javaScriptContent: string;
        };
      };
      multilingualContent: string;
      quantityContent: string;
      pluralContent: string;
      conditionalContent: string;
      markdownContent: never;
      htmlContent: never;
      externalContent: string;
      insertionContent: string;
      nestedContent: string;
      fileContent: string;
      jsxContent: ReactNode;
    }
    
    export default {
      key: "page",
      content: {
        imbricatedContent: {
          imbricatedContent2: {
            stringContent: "Halo Dunia",
            numberContent: 123,
            booleanContent: true,
            javaScriptContent: `${process.env.NODE_ENV}`,
          },
        },
        multilingualContent: t({
          en: "English content",
          "en-GB": "English content (UK)",
          fr: "French content",
          es: "Spanish content",
        }),
        quantityContent: enu({
          "<-1": "Kurang dari minus satu mobil",
          "-1": "Minus satu mobil",
          "0": "Tidak ada mobil",
          "1": "Satu mobil",
          ">5": "Beberapa mobil",
          ">19": "Banyak mobil",
        }),
        pluralContent: plural({
          one: "One car",
          other: "{{count}} cars",
        }),
        conditionalContent: cond({
          true: "Validasi diaktifkan",
          false: "Validasi dinonaktifkan",
        }),
        insertionContent: insert("Halo {{name}}!"),
        nestedContent: nest(
          "navbar", // Kunci dari kamus yang akan disisipkan
          "login.button" // [Opsional] Jalur ke konten yang akan disisipkan
        ),
        fileContent: file("./path/to/file.txt"),
        externalContent: fetch("https://example.com").then((res) => res.json()),
        markdownContent: md("# Contoh Markdown"),
        htmlContent: html("<p>Hello <strong>World</strong></p>"),
    
        /*
         * Hanya tersedia menggunakan `react-intlayer` atau `next-intlayer`
         */
        jsxContent: <h1>Judul saya</h1>,
      },
    } satisfies Dictionary<Content>; // [opsional] Dictionary adalah generic dan memungkinkan Anda memperkuat format kamus Anda

    Content Nodes

    Content nodes adalah blok bangunan dari konten kamus. Mereka dapat berupa:

    • Nilai primitif: string, angka, boolean, null, undefined
    • Node bertipe: Jenis konten khusus seperti terjemahan, kondisi, markdown, dll.
    • Fungsi: Konten dinamis yang dapat dievaluasi saat runtime lihat Pengambilan Fungsi
    • Plural Content: See Plural Content See Plural Content
    • Konten bersarang: Referensi ke kamus lain

    Jenis Konten

    Intlayer mendukung berbagai jenis konten melalui node bertipe:

    • Konten Terjemahan: Teks multibahasa dengan nilai spesifik lokal lihat Konten Terjemahan
    • Konten Kondisi: Konten kondisional berdasarkan ekspresi boolean lihat Konten Kondisi
    • Konten Enumerasi: Konten yang bervariasi berdasarkan nilai enumerasi lihat Konten Enumerasi
    • Konten Penyisipan: Konten yang dapat disisipkan ke dalam konten lain lihat Konten Penyisipan
    • Konten Markdown: Konten teks kaya dalam format Markdown lihat Konten Markdown
    • Konten HTML: Konten HTML kaya dengan komponen kustom opsional lihat Konten HTML
    • Konten Bersarang: Referensi ke kamus lain lihat Konten Bersarang
    • Konten Gender: Konten yang bervariasi berdasarkan gender lihat Konten Gender
    • Konten File: Referensi ke file eksternal lihat Konten File

    Struktur Kamus

    Sebuah kamus dalam Intlayer didefinisikan oleh tipe Dictionary dan berisi beberapa properti yang mengontrol perilakunya:

    Properti Wajib

    key (string)

    Pengidentifikasi untuk kamus. Jika beberapa kamus memiliki kunci yang sama, Intlayer akan menggabungkannya secara otomatis.

    Gunakan konvensi penamaan kebab-case (misalnya, "about-page-meta").

    Content (string | number | boolean | object | array | function)

    Properti content berisi data kamus yang sebenarnya dan mendukung:

    • Nilai primitif: string, angka, boolean, null, undefined
    • Typed nodes: Jenis konten khusus menggunakan fungsi pembantu Intlayer
    • Objek bersarang: Struktur data kompleks
    • Array: Koleksi konten
    • Fungsi: Evaluasi konten dinamis

    Properti Opsional

    title (string)

    Judul yang mudah dibaca untuk kamus yang membantu mengidentifikasinya di editor dan sistem CMS. Ini sangat berguna saat mengelola sejumlah besar kamus atau saat bekerja dengan antarmuka manajemen konten.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    {  key: "about-page-meta",  title: "Metadata Halaman Tentang",  content: { /* ... */ }}

    description (string)

    Deskripsi rinci yang menjelaskan tujuan kamus, panduan penggunaan, dan pertimbangan khusus lainnya. Deskripsi ini juga digunakan sebagai konteks untuk pembuatan terjemahan berbasis AI, sehingga sangat berharga untuk menjaga kualitas dan konsistensi terjemahan.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    {  key: "about-page-meta",  description: [    "Kamus ini mengelola metadata dari Halaman Tentang",    "Pertimbangkan praktik terbaik untuk SEO:",    "- Judul harus antara 50 dan 60 karakter",    "- Deskripsi harus antara 150 dan 160 karakter",  ].join('\n'),  content: { /* ... */ }}

    tags (string[])

    Array string untuk mengkategorikan dan mengorganisir kamus. Tag memberikan konteks tambahan dan dapat digunakan untuk penyaringan, pencarian, atau pengorganisasian kamus di editor dan sistem CMS.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}

    format ('intlayer' | 'icu' | 'i18next')

    Menentukan formatter yang akan digunakan untuk konten kamus. Ini memungkinkan penggunaan sintaks pemformatan pesan yang berbeda.

    • 'intlayer': Formatter Intlayer default.
    • 'icu': Menggunakan pemformatan pesan ICU.
    • 'i18next': Menggunakan pemformatan pesan i18next.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}

    locale (LocalesValues)

    Mengubah kamus menjadi kamus per-locale di mana setiap field yang dideklarasikan dalam konten akan secara otomatis diubah menjadi node terjemahan. Ketika properti ini diatur:

    • Kamus diperlakukan sebagai kamus satu-lokasi
    • Setiap field menjadi node terjemahan untuk lokasi spesifik tersebut
    • Anda TIDAK boleh menggunakan node terjemahan (t()) dalam konten saat menggunakan properti ini
    • Jika tidak ada, kamus akan diperlakukan sebagai kamus multibahasa
    Lihat Deklarasi Konten Per-Lokasi di Intlayer untuk informasi lebih lanjut.

    Contoh:

    json
    Salin kode

    Salin kode ke clipboard

    // Kamus per-lokasi{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // Ini menjadi node terjemahan untuk 'en'    "description": "Learn more about our company"  }}

    schema (SchemaKeys)

    Skema konten kamus. Jika diatur, konten akan divalidasi terhadap skema ini. Ini memungkinkan Anda untuk memaksakan struktur tertentu untuk konten kamus Anda menggunakan skema validasi khusus yang ditentukan dalam konfigurasi Intlayer Anda.

    Contoh:

    intlayer.config.ts
    Salin kode

    Salin kode ke clipboard

    import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
    src/example.content.ts
    Salin kode

    Salin kode ke clipboard

    import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;

    location ('local' | 'remote' | 'hybrid' | string)

    Menunjukkan lokasi kamus dan mengontrol cara sinkronisasinya dengan CMS:

    • 'local': Kamus dikelola hanya secara lokal. Tidak akan didorong ke CMS jarak jauh. Gunakan ini untuk konten yang harus tetap berada di codebase Anda.
    • 'remote': Kamus dikelola hanya secara jarak jauh. Setelah didorong ke CMS, kamus akan terlepas dari file lokal. Saat memuat konten, kamus jarak jauh akan diambil dari CMS. File .content dengan lokasi remote akan diabaikan setelah push awal.
    • 'hybrid': Kamus dikelola baik secara lokal maupun jarak jauh. Setelah didorong ke CMS, kamus akan tetap tersinkronisasi, perubahan dari file lokal didorong ke CMS, dan perubahan jarak jauh dapat ditarik kembali ke file lokal.
    • string (mis. 'plugin'): Kamus dikelola oleh plugin atau sumber kustom. Saat Anda mencoba mendorongnya, sistem akan menanyakan apa yang harus dilakukan.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    {  key: "about-page",  location: "local", // Konten tetap hanya di codebase Anda  content: {    title: "About Us"  }}

    fill (Fill)

    Instruksi untuk mengisi konten kamus secara otomatis dari sumber eksternal. Ini dapat dikonfigurasi secara global di intlayer.config.ts atau per kamus. Mendukung beberapa format:

    • true: Mengaktifkan pengisian untuk semua lokasi
    • false: Menonaktifkan pengisian untuk semua lokasi
    • string: Jalur ke satu file atau template dengan variabel
    • object: Jalur file per lokasi

    Contoh:

    json
    Salin kode

    Salin kode ke clipboard

    // Menonaktifkan pengisian{  "fill": false}// Satu file{  "fill": "./translations/aboutPage.content.json"}// Template dengan variabel{  "fill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Konfigurasi per-lokasi yang detail{  "fill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}

    Variabel yang tersedia:

    • {{locale}} – Kode locale (misal fr, es)
    • {{fileName}} – Nama file (misal example)
    • {{key}} – Kunci kamus (misal example)
    Lihat Konfigurasi Auto-Fill di Intlayer untuk informasi lebih lanjut.
    priority (number)

    Menunjukkan prioritas kamus untuk penyelesaian konflik. Ketika beberapa kamus memiliki kunci yang sama, kamus dengan nomor prioritas tertinggi akan menimpa yang lain. Ini berguna untuk mengelola hierarki konten dan override.

    Contoh:

    typescript
    Salin kode

    Salin kode ke clipboard

    // Kamus dasar{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// Kamus override{  key: "welcome-message",  priority: 10,  content: { message: "Selamat datang di layanan premium kami!" }}// Ini akan menimpa kamus dasar

    Properti CMS

    version (string)

    Pengidentifikasi versi untuk kamus jarak jauh. Membantu melacak versi kamus yang sedang digunakan, sangat berguna saat bekerja dengan sistem manajemen konten jarak jauh.

    importMode ('static' | 'dynamic' | 'fetch')

    Mode impor menentukan bagaimana kamus Anda diimpor ke aplikasi Anda.

    • 'static': Kamus diimpor secara statis pada waktu build. Ini adalah mode default.
    • 'dynamic': Kamus diimpor secara dinamis pada runtime menggunakan API suspense.
    • 'fetch': Kamus diimpor secara dinamis menggunakan API sinkronisasi langsung.

    Jika disetel, properti ini akan menggantikan importMode global yang didefinisikan di intlayer.config.ts.

    Properti Sistem (Otomatis Dibuat)

    Properti ini dibuat secara otomatis oleh Intlayer dan tidak boleh dimodifikasi secara manual:

    $schema (string)

    Skema JSON yang digunakan untuk validasi struktur kamus. Ditambahkan secara otomatis oleh Intlayer untuk memastikan integritas kamus.

    id (string)

    Untuk kamus jarak jauh, ini adalah pengidentifikasi unik dari kamus di server jarak jauh. Digunakan untuk mengambil dan mengelola konten jarak jauh.

    projectIds (string[])

    Untuk kamus jarak jauh, array ini berisi ID proyek yang dapat menggunakan kamus ini. Kamus jarak jauh dapat dibagikan antara beberapa proyek.

    localId (LocalDictionaryId)

    Pengidentifikasi unik untuk kamus lokal. Dibuat secara otomatis oleh Intlayer untuk membantu mengidentifikasi kamus dan menentukan apakah itu lokal atau jarak jauh, beserta lokasinya.

    localIds (LocalDictionaryId[])

    Untuk kamus yang digabung, array ini berisi ID dari semua kamus yang digabungkan bersama. Berguna untuk melacak sumber konten yang digabung.

    filePath (string)

    Jalur file dari kamus lokal, menunjukkan dari file .content mana kamus tersebut dihasilkan. Membantu dalam debugging dan pelacakan sumber.

    versions (string[])

    Untuk kamus jarak jauh, array ini berisi semua versi kamus yang tersedia. Membantu melacak versi mana yang tersedia untuk digunakan.

    filled (true)

    Menunjukkan apakah kamus telah diisi otomatis dari sumber eksternal. Jika terjadi konflik, kamus dasar akan mengesampingkan kamus yang diisi otomatis.

    location ('distant' | 'locale')

    Menunjukkan lokasi kamus:

    • 'locale': Kamus lokal (dari file konten)
    • 'distant': Kamus jarak jauh (dari sumber eksternal)

    Jenis Node Konten

    Intlayer menyediakan beberapa jenis node konten khusus yang memperluas nilai primitif dasar:

    Konten Terjemahan (t)

    Konten multibahasa yang bervariasi berdasarkan locale:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
    See Konten Terjemahan (t) Doc for more information.

    Konten Kondisi (cond)

    Konten yang berubah berdasarkan kondisi boolean:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { cond } from "intlayer";conditionalContent: cond({  true: "Pengguna telah masuk",  false: "Silakan masuk untuk melanjutkan",});
    See Konten Kondisi (cond) Doc for more information.

    Konten Enumerasi (enu)

    Konten yang bervariasi berdasarkan nilai enumerasi:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { enu } from "intlayer";statusContent: enu({  pending: "Permintaan Anda sedang menunggu",  approved: "Permintaan Anda telah disetujui",  rejected: "Permintaan Anda telah ditolak",});
    See Konten Enumerasi (enu) Doc for more information.

    Plural Content (plural)

    Content that varies based on plural rules:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
    See Plural Content Doc for more information.

    Konten Penyisipan (insert)

    Konten yang dapat disisipkan ke dalam konten lain:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { insert } from "intlayer";insertionContent: insert("Teks ini dapat disisipkan di mana saja");
    See Konten Penyisipan (insert) Doc for more information.

    Konten Bersarang (nest)

    Referensi ke kamus lain:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { nest } from "intlayer";nestedContent: nest("about-page");
    See Konten Bersarang (nest) Doc for more information.

    Konten Markdown (md)

    Konten teks kaya dalam format Markdown:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { md } from "intlayer";markdownContent: md(  "# Selamat Datang\n\nIni adalah teks **tebal** dengan [tautan](https://example.com)");
    See Konten Markdown (md) Doc for more information.

    Konten HTML (html)

    Konten HTML kaya yang dapat menggunakan tag standar atau komponen kustom:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { html, file, t } from "intlayer";// HTML inlinehtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML per lokal dari file eksternallocalizedHtmlContent: t({  en: html(file("./content.en.html")),  id: html(file("./content.id.html")),});
    See Konten HTML (html) Doc for more information.

    Konten Gender (gender)

    Konten yang bervariasi berdasarkan gender:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { gender } from "intlayer";genderContent: gender({  male: "Dia adalah seorang pengembang",  female: "Dia adalah seorang pengembang",  other: "Mereka adalah seorang pengembang",});
    See Konten Gender (gender) Doc for more information.

    Konten File (file)

    Referensi ke file eksternal:

    typescript
    Salin kode

    Salin kode ke clipboard

    import { file } from "intlayer";fileContent: file("./path/to/content.txt");
    See Konten File (file) Doc for more information.

    Membuat File Konten

    Struktur Dasar File Konten

    A content file mengekspor objek default yang memenuhi tipe Dictionary:

    typescript
    Salin kode

    Salin kode ke clipboard

    // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Konten Halaman Selamat Datang",  description:    "Konten untuk halaman utama selamat datang termasuk bagian hero dan fitur",  tags: ["page", "welcome", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;

    File Konten JSON

    Anda juga dapat membuat file konten dalam format JSON:

    json
    Salin kode

    Salin kode ke clipboard

    {  "key": "welcome-page",  "title": "Konten Halaman Selamat Datang",  "description": "Konten untuk halaman utama selamat datang",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    File Konten Markdown

    markdown
    Salin kode

    Salin kode ke clipboard

    ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease

    File Konten YAML

    yaml
    Salin kode

    Salin kode ke clipboard

    key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease

    Anda juga dapat membuat file konten dalam format JSON:

    json
    Salin kode

    Salin kode ke clipboard

    {  "key": "welcome-page",  "title": "Konten Halaman Selamat Datang",  "description": "Konten untuk halaman selamat datang utama",  "tags": ["halaman", "selamat datang"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    File Konten Per-Locale

    Untuk kamus per-locale, tentukan properti locale:

    typescript
    Salin kode

    Salin kode ke clipboard

    typescript;// welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
    typescript
    Salin kode

    Salin kode ke clipboard

    // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;

    Ekstensi File Konten

    Intlayer memungkinkan Anda untuk menyesuaikan ekstensi untuk file deklarasi konten Anda. Kustomisasi ini memberikan fleksibilitas dalam mengelola proyek berskala besar dan membantu menghindari konflik dengan modul lain.

    Ekstensi Default

    Secara default, Intlayer memantau semua file dengan ekstensi berikut untuk deklarasi konten:

    • .content.json
    • .content.json5
    • .content.jsonc
    • .content.ts
    • .content.tsx
    • .content.js
    • .content.jsx
    • .content.mjs
    • .content.mjx
    • .content.cjs
    • .content.cjx
    • .content.md
    • .content.mdx
    • .content.yaml
    • .content.yml

    Ekstensi default ini cocok untuk sebagian besar aplikasi. Namun, ketika Anda memiliki kebutuhan khusus, Anda dapat menentukan ekstensi kustom untuk menyederhanakan proses build dan mengurangi risiko konflik dengan komponen lain.

    Untuk menyesuaikan ekstensi file yang digunakan Intlayer untuk mengidentifikasi file deklarasi konten, Anda dapat menentukan ekstensi tersebut dalam file konfigurasi Intlayer. Pendekatan ini bermanfaat untuk proyek skala besar di mana membatasi cakupan proses pemantauan meningkatkan performa build.

    Konsep Lanjutan

    Penggabungan Kamus

    Ketika beberapa kamus memiliki kunci yang sama, Intlayer secara otomatis menggabungkannya. Perilaku penggabungan tergantung pada beberapa faktor:

    • Prioritas: Kamus dengan nilai priority lebih tinggi akan menimpa yang memiliki nilai lebih rendah
    • Auto-fill vs Base: Kamus dasar (base) menimpa kamus yang diisi otomatis (auto-filled)
    • Lokasi: Kamus lokal menimpa kamus jarak jauh (remote) (ketika prioritas sama)

    Keamanan Tipe (Type Safety)

    Intlayer menyediakan dukungan penuh TypeScript untuk file konten:

    typescript
    Salin kode

    Salin kode ke clipboard

    // Definisikan tipe konten Andainterface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Gunakan di kamus Andaexport default {  key: "welcome-page",  content: {    // TypeScript akan menyediakan autocomplete dan pengecekan tipe    hero: {      title: "Selamat Datang",      subtitle: "Bangun aplikasi luar biasa",      cta: "Mulai",    },  },} satisfies Dictionary<WelcomePageContent>;

    Imbrikasi Node

    Anda dapat dengan mudah mengimbrikasikan fungsi ke dalam fungsi lain.

    Contoh:

    src/example.content.tsx
    Salin kode

    Salin kode ke clipboard

    import { t, enu, cond, nest, md, type Dictionary } from "intlayer";
    
    const getName = async () => "John Doe";
    
    export default {
      key: "page",
      content: {
        // `getIntlayer('page','en').hiMessage` mengembalikan `['Hi', ' ', 'John Doe']`
        hiMessage: [
          t({
            en: "Hi",
            fr: "Salut",
            es: "Hola",
          }),
          " ",
          getName(),
        ],
        // Konten komposit yang menggabungkan kondisi, enumerasi, dan konten multibahasa
        // `getIntlayer('page','en').advancedContent(true)(10) mengembalikan 'Multiple items found'`
        advancedContent: cond({
          true: enu({
            "0": t({
              en: "No items found",
              fr: "Aucun article trouvé",
              es: "No se encontraron artículos",
            }),
            "1": t({
              en: "One item found",
              fr: "Un article trouvé",
              es: "Se encontró un artículo",
            }),
            ">1": t({
              en: "Multiple items found",
              fr: "Plusieurs articles trouvés",
              es: "Se encontraron múltiples artículos",
            }),
          }),
          false: t({
            en: "No valid data available",
            fr: "Aucune donnée valide disponible",
            es: "Tidak ada data valid yang tersedia",
          }),
        }),
      },
    } satisfies Dictionary;

    Praktik Terbaik

    1. Konvensi Penamaan:

      • Gunakan kebab-case untuk kunci kamus ("about-page-meta")
      • Kelompokkan konten terkait di bawah prefix kunci yang sama
    2. Organisasi Konten:

      • Simpan konten terkait bersama dalam kamus yang sama
      • Gunakan objek bersarang untuk mengatur struktur konten yang kompleks
      • Manfaatkan tag untuk kategorisasi
      • Gunakan fill untuk mengisi terjemahan yang hilang secara otomatis
    3. Performa:

      • Sesuaikan konfigurasi konten untuk membatasi cakupan file yang dipantau
      • Gunakan kamus langsung hanya ketika pembaruan waktu nyata diperlukan, (misalnya A/B testing, dll.)
      • Pastikan plugin transformasi build (@intlayer/swc, atau @intlayer/babel) diaktifkan untuk mengoptimalkan kamus saat build time
    Integrasi CI/CD
    Terjemahan
    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.

      {  key: "about-page-meta",  title: "Metadata Halaman Tentang",  content: { /* ... */ }}
      {  key: "about-page-meta",  description: [    "Kamus ini mengelola metadata dari Halaman Tentang",    "Pertimbangkan praktik terbaik untuk SEO:",    "- Judul harus antara 50 dan 60 karakter",    "- Deskripsi harus antara 150 dan 160 karakter",  ].join('\n'),  content: { /* ... */ }}
      {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}
      {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}
      // Kamus per-lokasi{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // Ini menjadi node terjemahan untuk 'en'    "description": "Learn more about our company"  }}
      import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
      import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;
      {  key: "about-page",  location: "local", // Konten tetap hanya di codebase Anda  content: {    title: "About Us"  }}
      // Menonaktifkan pengisian{  "fill": false}// Satu file{  "fill": "./translations/aboutPage.content.json"}// Template dengan variabel{  "fill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Konfigurasi per-lokasi yang detail{  "fill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",    "es": "./translations/es/aboutPage.content.json"  }}
      // Kamus dasar{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// Kamus override{  key: "welcome-message",  priority: 10,  content: { message: "Selamat datang di layanan premium kami!" }}// Ini akan menimpa kamus dasar
      import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
      import { cond } from "intlayer";conditionalContent: cond({  true: "Pengguna telah masuk",  false: "Silakan masuk untuk melanjutkan",});
      import { enu } from "intlayer";statusContent: enu({  pending: "Permintaan Anda sedang menunggu",  approved: "Permintaan Anda telah disetujui",  rejected: "Permintaan Anda telah ditolak",});
      import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
      import { insert } from "intlayer";insertionContent: insert("Teks ini dapat disisipkan di mana saja");
      import { nest } from "intlayer";nestedContent: nest("about-page");
      import { md } from "intlayer";markdownContent: md(  "# Selamat Datang\n\nIni adalah teks **tebal** dengan [tautan](https://example.com)");
      import { html, file, t } from "intlayer";// HTML inlinehtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML per lokal dari file eksternallocalizedHtmlContent: t({  en: html(file("./content.en.html")),  id: html(file("./content.id.html")),});
      import { gender } from "intlayer";genderContent: gender({  male: "Dia adalah seorang pengembang",  female: "Dia adalah seorang pengembang",  other: "Mereka adalah seorang pengembang",});
      import { file } from "intlayer";fileContent: file("./path/to/content.txt");
      // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Konten Halaman Selamat Datang",  description:    "Konten untuk halaman utama selamat datang termasuk bagian hero dan fitur",  tags: ["page", "welcome", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;
      {  "key": "welcome-page",  "title": "Konten Halaman Selamat Datang",  "description": "Konten untuk halaman utama selamat datang",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease
      key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease
      {  "key": "welcome-page",  "title": "Konten Halaman Selamat Datang",  "description": "Konten untuk halaman selamat datang utama",  "tags": ["halaman", "selamat datang"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      typescript;// welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
      // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;
      // Definisikan tipe konten Andainterface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Gunakan di kamus Andaexport default {  key: "welcome-page",  content: {    // TypeScript akan menyediakan autocomplete dan pengecekan tipe    hero: {      title: "Selamat Datang",      subtitle: "Bangun aplikasi luar biasa",      cta: "Mulai",    },  },} satisfies Dictionary<WelcomePageContent>;