Vraag vroegtijdige toegang aan

Vul je voornaam en je zakelijke e-mailadres in. We sturen je een link om je aanvraag voor toegang tot Tajo te bevestigen.

Op deze pagina

Integreren met een bestaand thema

Illustratie · voorbeelddata

Voorbeeld van synchronisatie

Eén record controleren

Bron

Shopify

Connectorstatus: In ontwikkeling

Bestemming

Brevo

Connectorstatus: Actief

Veldtoewijzing

Bronveld	Doelveld	Voorbeeldwaarde
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Opstellen
Eén record controleren
Deze versie goedkeuren

Statussen gelden per connector en garanderen niet dat deze synchronisatie klaar is. De velden zijn illustratief. Controleer het echte schema en de rechten voordat een synchronisatie draait.

Dit thema is ontworpen om naadloos samen te werken met andere Tailwind CSS v4-projecten.

Vereiste stappen

Kopieer de map src/docs van dit thema naar je bestaande project.

De meeste onderdelen van dit thema staan in de map src/docs. De eerste stap is dus om die hele map naar je bestaande project te kopiëren (zodat de mapstructuur op src/docs hetzelfde blijft).
Importeer de docs-stijlen in je globale css-bestand.

Dat doe je door de volgende regel aan je global.css-bestand toe te voegen, na de import van het tailwind-thema:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Voeg de docs content collection toe aan het configuratiebestand voor de content collections van je site.

// 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,
};

Voeg de mdx-componenten toe aan de AutoImport-integratie

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

Voeg de docs-pagina’s toe aan je site.

Kopieer vanuit het Tajo-thema de volledige map src/pages/docs naar de map src/pages/docs van je site.

Optionele stappen

Lettertypen

Dit thema gebruikt standaard het lettertype Inter. Het is aan te raden om het lettertype lokaal te installeren via fontsource.

Voeg daarna het volgende toe aan je fonts.css-bestand:

/* 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;
}

Andere lettertypen

Je kunt ook andere lettertypen gebruiken. Zorg er alleen voor dat je de benodigde lettertypen aan je fonts.css-bestand toevoegt en dat je de eigenschap font-family in je src/docs/styles/docs-global.css-bestand aanpast.

Info

Preload je lettertype ook in de component src/docs/layouts/BaseHead.astro, net zoals bij het Inter-lettertype.

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

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