Richiedi l’accesso anticipato

Inserisci il tuo nome e indirizzo email aziendale. Ti invieremo un link per confermare la richiesta di accesso a Tajo.

In questa pagina

Integrazione con un tema esistente

Set Noa

Illustrazione · dati di esempio

Esempio di sincronizzazione

Esamina un record

Origine

Shopify

Stato del connettore: In corso

Destinazione

Brevo

Stato del connettore: Attivo

Mappatura dei campi

Campo di origine	Campo di destinazione	Valore di esempio
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

Preparare
Esamina un record
Approva questa versione

Gli stati riguardano i singoli connettori e non garantiscono che questa sincronizzazione sia pronta. Campi illustrativi. Verifica lo schema e le autorizzazioni effettivi prima di avviare una sincronizzazione.

Questo tema è progettato per funzionare senza attriti con altri progetti Tailwind CSS v4.

Passaggi obbligatori

Copia la cartella src/docs di questo tema nel tuo progetto esistente.

La maggior parte degli elementi di questo tema si trova nella cartella src/docs. Il primo passaggio consiste quindi semplicemente nel copiare l’intera cartella nel tuo progetto esistente (per mantenere la stessa struttura di cartelle in src/docs).
Importa gli stili della documentazione nel tuo file css globale.

Puoi farlo aggiungendo la riga seguente al tuo file global.css dopo l’import del tema tailwind:
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

Aggiungi la content collection della documentazione al file di configurazione delle content collection del tuo sito.

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

Aggiungi i componenti mdx all’integrazione 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",
      ],
    }),
  ],
});

Aggiungi le pagine della documentazione al tuo sito.

Dal tema Tajo copia l’intera cartella src/pages/docs nella cartella src/pages/docs del tuo sito.

Passaggi facoltativi

Font

Questo tema usa il font Inter come predefinito. Ti consigliamo di installare il font in locale da fontsource.

Poi, nel tuo file fonts.css, aggiungi quanto segue:

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

Font alternativi

Puoi anche usare font diversi. Assicurati solo di aggiungere i font necessari al tuo file fonts.css e di aggiornare la proprietà font-family nel tuo file src/docs/styles/docs-global.css.

Info

Dovresti anche precaricare il tuo font nel componente src/docs/layouts/BaseHead.astro, come avviene per il font 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" />