Ansök om tidig åtkomst

Ange ditt förnamn och din e-postadress på jobbet. Vi skickar en länk för att bekräfta din begäran om åtkomst till Tajo.

På denna sida

Integrera med ett befintligt tema

Illustration · exempeldata

Exempel på synkronisering

Granska en post

Källa

Shopify

Kopplingens status: Under utveckling

Mål

Brevo

Kopplingens status: Aktiv

Fältmappning

Källfält	Målfält	Exempelvärde
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Utkast
Granska en post
Godkänn den här versionen

Status gäller varje enskild koppling och garanterar inte att den här synkroniseringen är klar. Fälten är illustrativa. Kontrollera det faktiska schemat och behörigheterna innan synkronisering körs.

Det här temat är byggt för att fungera sömlöst tillsammans med andra Tailwind CSS v4-projekt.

Nödvändiga steg

Kopiera mappen src/docs från det här temat till ditt befintliga projekt.

Det mesta i temat ligger under mappen src/docs. Första steget är därför helt enkelt att kopiera hela den mappen till ditt befintliga projekt (behåll samma mappstruktur på src/docs).
Importera dokumentationens stilar i din globala css-fil.

Det gör du genom att lägga till följande rad i din global.css-fil efter importen av tailwind-temat:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Lägg till innehållssamlingen för dokumentationen i sajtens konfigurationsfil för innehållssamlingar.

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

Lägg till mdx-komponenterna i AutoImport-integrationen

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

Lägg till dokumentationssidorna på din sajt.

Kopiera hela mappen src/pages/docs från Tajo-temat till sajtens mapp src/pages/docs.

Valfria steg

Typsnitt

Temat använder typsnittet Inter som standard. Vi rekommenderar att du installerar typsnittet lokalt från fontsource.

Lägg sedan till följande i din fonts.css-fil:

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

Andra typsnitt

Du kan också använda andra typsnitt. Se bara till att du lägger till de typsnitt som behövs i din fonts.css-fil, och uppdaterar egenskapen font-family i din fil src/docs/styles/docs-global.css.

Info

Du bör också förladda ditt typsnitt i komponenten src/docs/layouts/BaseHead.astro, på samma sätt som Inter-typsnittet.

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

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