Solicită acces anticipat

Introduceți prenumele și adresa de e-mail profesională. Vă vom trimite un link pentru a confirma cererea de acces la Tajo.

Pe această pagină

Integrarea cu o temă existentă

Set Noa

Ilustrație · date de exemplu

Exemplu de sincronizare

Verifică o înregistrare

Sursă

Shopify

Starea conectorului: În lucru

Destinație

Brevo

Starea conectorului: Activ

Maparea câmpurilor

Câmp sursă	Câmp destinație	Valoare exemplu
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Ciornă
Verifică o înregistrare
Aprobă această versiune

Stările se referă la fiecare conector și nu garantează că această sincronizare este pregătită. Câmpurile sunt ilustrative. Verifică schema și permisiunile reale înainte de sincronizare.

Această temă este proiectată să funcționeze fără probleme alături de alte proiecte Tailwind CSS v4.

Pași obligatorii

Copiază folderul src/docs din această temă în proiectul tău existent.

Majoritatea elementelor acestei teme se află în folderul src/docs. Așa că primul pas este să copiezi pur și simplu tot acest folder în proiectul tău existent (păstrând aceeași structură de foldere la src/docs).
Importă stilurile documentației în fișierul tău CSS global.

Poți face asta adăugând următoarea linie în fișierul global.css, după importul temei tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Adaugă colecția de conținut a documentației în fișierul de configurare al colecțiilor de conținut ale site-ului tău.

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

Adaugă componentele mdx în integrarea 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",
      ],
    }),
  ],
});

Adaugă paginile de documentație în site-ul tău.

Din tema Tajo, copiază tot folderul src/pages/docs în folderul src/pages/docs al site-ului tău.

Pași opționali

Fonturi

Această temă folosește implicit fontul Inter. Îți recomandăm să instalezi fontul local de la fontsource.

Apoi, în fișierul fonts.css, adaugă următoarele:

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

Fonturi alternative

Poți folosi și alte fonturi. Asigură-te doar că adaugi fonturile necesare în fișierul fonts.css și că actualizezi proprietatea font-family în fișierul src/docs/styles/docs-global.css.

Info

Ar trebui să preîncarci fontul și în componenta src/docs/layouts/BaseHead.astro, la fel ca fontul 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" />