Be om tidlig tilgang

Skriv inn fornavn og e-postadresse på jobb. Vi sender deg en lenke for å bekrefte forespørselen om tilgang til Tajo.

På denne siden

Integrering med et eksisterende tema

Illustrasjon · eksempeldata

Eksempel på synkronisering

Se gjennom én oppføring

Kilde

Shopify

Koblingsstatus: Under utvikling

Mål

Brevo

Koblingsstatus: Aktiv

Feltkobling

Kildefelt	Målfelt	Eksempelverdi
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Utkast
Se gjennom én oppføring
Godkjenn denne versjonen

Status gjelder hver enkelt kobling og garanterer ikke at denne synkroniseringen er klar. Feltene er illustrative. Kontroller faktisk skjema og tillatelser før synkroniseringen kjører.

Dette temaet er laget for å fungere sømløst sammen med andre Tailwind CSS v4-prosjekter.

Nødvendige steg

Kopier mappen src/docs fra dette temaet til det eksisterende prosjektet ditt.

Det meste av innholdet i dette temaet ligger under mappen src/docs. Første steg er derfor rett og slett å kopiere hele denne mappen til det eksisterende prosjektet ditt (behold den samme mappestrukturen på src/docs).
Importer dokumentasjonsstilene inn i den globale css-filen din.

Det gjør du ved å legge til denne linjen i global.css-filen din etter importen av Tailwind-temaet:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Legg til innholdssamlingen for dokumentasjonen i konfigurasjonsfilen for nettstedets innholdssamlinger.

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

Legg til mdx-komponentene i AutoImport-integrasjonen

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

Legg dokumentasjonssidene til på nettstedet ditt.

Kopier hele mappen src/pages/docs fra Tajo-temaet inn i nettstedets egen src/pages/docs-mappe.

Valgfrie steg

Skrifter

Dette temaet bruker skriften Inter som standard. Vi anbefaler at du installerer skriften lokalt fra fontsource.

Legg deretter til dette i fonts.css-filen din:

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

Alternative skrifter

Du kan også bruke andre skrifter. Pass bare på at du legger de nødvendige skriftene inn i fonts.css-filen din, og oppdaterer egenskapen font-family i filen src/docs/styles/docs-global.css.

Info

Du bør også forhåndslaste skriften din i komponenten src/docs/layouts/BaseHead.astro, på samme måte som Inter-skriften.

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

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