Ajukan akses awal

Masukkan nama depan dan alamat email kerja Anda. Kami akan mengirim tautan untuk mengonfirmasi permintaan akses Tajo.

Di halaman ini

Integrasi dengan Tema yang Sudah Ada

Ilustrasi · data contoh

Contoh sinkronisasi

Tinjau satu data

Sumber

Shopify

Status konektor: Dalam pengerjaan

Tujuan

Brevo

Status konektor: Aktif

Pemetaan field

Field sumber	Field tujuan	Nilai contoh
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Susun draf
Tinjau satu data
Setujui versi ini

Status berlaku untuk masing-masing konektor dan tidak menjamin sinkronisasi ini siap. Field ini hanya ilustrasi. Periksa skema dan izin sebenarnya sebelum sinkronisasi berjalan.

Tema ini dirancang untuk bekerja mulus dengan proyek Tailwind CSS v4 lainnya.

Langkah wajib

Salin folder src/docs dari tema ini ke proyek Anda yang sudah ada.

Sebagian besar isi tema ini berada di dalam folder src/docs. Jadi langkah pertama adalah menyalin seluruh folder tersebut ke proyek Anda yang sudah ada (pertahankan struktur folder yang sama di src/docs).
Impor gaya dokumentasi ke berkas css global Anda.

Ini bisa dilakukan dengan menambahkan baris berikut ke berkas global.css Anda setelah impor tema tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

/* docs styles */
@import "@/docs/styles/docs-global.css";
```

Tambahkan content collection dokumentasi ke berkas konfigurasi content collection situs Anda.

// other collections...

const docsCollection = defineCollection({
  loader: glob({ pattern: "**/[^_]*{md,mdx}", base: "./src/docs/data/docs" }),
  schema: () =>
    z.object({
      title: z.string(),
      description: z.string().optional(),
      sidebar: z
        .object({
          label: z.string().optional(),
          order: z.number().optional(),
          badge: z
            .object({
              text: z.string(),
              variant: z.enum(["note", "tip", "caution", "danger", "info"]).default("note"),
            })
            .optional(),
        })
        .optional(),
      tableOfContents: z
        .object({
          minHeadingLevel: z.number().min(1).max(6).optional(),
          maxHeadingLevel: z.number().min(1).max(6).optional(),
        })
        .optional(),
      pagefind: z.boolean().optional(),
      mappingKey: z.string().optional(),
      draft: z.boolean().optional(),
    }),
});

export const collections = {
  // other collection....
  docs: docsCollection,
};

Tambahkan komponen mdx ke integrasi AutoImport

export default defineConfig({
  // other config options...
  integrations: [
    AutoImport({
      imports: [
        // other imports...
        "@/docs/components/mdx-components/Aside.astro",
        "@/docs/components/mdx-components/Badge.astro",
        "@/docs/components/mdx-components/Button.astro",
        "@/docs/components/mdx-components/Steps.astro",
        "@/docs/components/mdx-components/Tabs.astro",
        "@/docs/components/mdx-components/TabsContent.astro",
        "@/docs/components/mdx-components/TabsList.astro",
        "@/docs/components/mdx-components/TabsTrigger.astro",
      ],
    }),
  ],
});

Tambahkan halaman dokumentasi ke situs Anda.

Dari tema Tajo, salin seluruh folder src/pages/docs ke folder src/pages/docs milik situs Anda.

Langkah opsional

Font

Tema ini menggunakan font Inter secara bawaan. Kami menyarankan Anda memasang font tersebut secara lokal dari fontsource.

Kemudian, di berkas fonts.css Anda, tambahkan berikut ini:

/* inter-latin-wght-normal */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

Font alternatif

Anda juga bisa menggunakan font yang berbeda. Pastikan saja Anda menambahkan font yang diperlukan ke berkas fonts.css Anda, lalu perbarui properti font-family di berkas src/docs/styles/docs-global.css Anda.

Info

Anda juga sebaiknya melakukan preload terhadap font Anda di komponen src/docs/layouts/BaseHead.astro, serupa dengan font Inter.

---
import InterVariable from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2";
---

<link rel="preload" href={InterVariable} as="font" type="font/woff2" crossorigin="anonymous" />