集成到现有主题

Set Noa

示意图 · 示例数据

同步示例

检查一条记录

来源

Shopify

连接器状态: 开发中

目标

Brevo

连接器状态: 已上线

字段映射

来源字段	目标字段	示例值
`record.id`	`source_id`	`record_1042`
`record.updated_at`	`updated_at`	`2026-10-18T08:00:00Z`
`record.value`	`value`	`sample_value`

起草
检查一条记录
批准此版本

状态仅针对各个连接器，不保证此同步已就绪。字段仅供示意。运行同步前，请检查实际架构和权限。

本主题可以与其他 Tailwind CSS v4 项目无缝配合。

必要步骤

把本主题的 src/docs 文件夹复制到你的现有项目中。

本主题的大部分内容都位于 src/docs 文件夹下。因此第一步就是把整个文件夹复制到你的现有项目中（保持相同的目录结构 src/docs）。
在全局 css 文件中引入文档样式。

在 global.css 文件中，于 tailwind 主题引入之后加入以下这行：
src/styles/global.css
```
/* theme definition import */
@import "./tailwind-theme.css";

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

在站点的内容集合配置文件中加入文档内容集合。

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

把 mdx 组件加入 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",
      ],
    }),
  ],
});

把文档页面加入你的站点。

从 Tajo 主题中把整个 src/pages/docs 文件夹复制到站点的 src/pages/docs 文件夹下。

可选步骤

字体

本主题默认使用 Inter 字体。建议从 fontsource 把字体安装到本地。

然后在 fonts.css 文件中加入以下内容：

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

备选字体

你也可以使用其他字体。只要把所需字体加入 fonts.css 文件，并更新 src/docs/styles/docs-global.css 文件中的 font-family 属性即可。

Info

你还应该在 src/docs/layouts/BaseHead.astro 组件中预加载字体，做法与 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" />