Beantrage frühzeitigen Zugang

Gib deinen Vornamen und deine geschäftliche E-Mail-Adresse ein. Wir senden dir einen Link, mit dem du deine Anfrage für den Tajo-Zugang bestätigst.

Auf dieser Seite

Integration mit einem bestehenden Theme

Set Noa

Illustration · Beispieldaten

Sync-Beispiel

Einen Datensatz prüfen

Quelle

Shopify

Connector-Status: In Arbeit

Ziel

Brevo

Connector-Status: Aktiv

Feldzuordnung

Quellfeld	Zielfeld	Beispielwert
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Entwerfen
Einen Datensatz prüfen
Diese Version freigeben

Der Status gilt für einzelne Connectoren und garantiert nicht, dass dieser Sync bereit ist. Felder zur Veranschaulichung. Prüfen Sie vor dem Sync das tatsächliche Schema und die Berechtigungen.

Dieses Theme ist darauf ausgelegt, nahtlos mit anderen Tailwind CSS v4 Projekten zusammenzuarbeiten.

Erforderliche Schritte

Kopieren Sie den src/docs-Ordner aus diesem Theme in Ihr bestehendes Projekt.

Die meisten Elemente dieses Themes befinden sich im src/docs-Ordner. Der erste Schritt besteht also darin, diesen gesamten Ordner in Ihr bestehendes Projekt zu kopieren (um die gleiche Ordnerstruktur unter src/docs beizubehalten).
Importieren Sie die Docs-Styles in Ihre globale CSS-Datei.

Dies kann durch Hinzufuegen der folgenden Zeile in Ihre global.css-Datei nach dem Tailwind-Theme-Import erfolgen:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Fuegen Sie die Docs-Content-Collection zur Content-Collection-Konfigurationsdatei Ihrer Seite hinzu.

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

Fuegen Sie die MDX-Komponenten zur AutoImport-Integration hinzu.

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

Fuegen Sie die Docs-Seiten zu Ihrer Website hinzu.

Kopieren Sie aus dem Tajo-Theme den gesamten src/pages/docs-Ordner in den src/pages/docs-Ordner Ihrer Website.

Optionale Schritte

Schriftarten

Dieses Theme verwendet standardmaessig die Schriftart Inter. Es wird empfohlen, die Schriftart lokal von fontsource zu installieren.

Fuegen Sie dann in Ihrer fonts.css-Datei Folgendes hinzu:

/* 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 Schriftarten

Sie koennen auch andere Schriftarten verwenden. Stellen Sie sicher, dass Sie die erforderlichen Schriftarten in Ihre fonts.css-Datei einfuegen und die font-family-Eigenschaft in Ihrer src/docs/styles/docs-global.css-Datei aktualisieren.

Info

Sie sollten Ihre Schriftart auch in der Komponente src/docs/layouts/BaseHead.astro vorladen, aehnlich wie bei der Inter-Schriftart.

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

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