---
title: "การเชื่อมต่อกับธีมที่มีอยู่แล้ว | Tajo"
description: "เรียนรู้วิธีเชื่อมต่อ Tajo เข้ากับโปรเจกต์ที่มีอยู่แล้ว"
url: https://tajo.io/th/docs/getting-started/integrating/
markdown: https://tajo.io/th/docs/getting-started/integrating.md
lang: th-TH
author: "Set Noa"
author_url: https://tajo.io/th/set-noa/
robots: noindex
---

ขอสิทธิ์ใช้งานล่วงหน้า

กรอกชื่อและที่อยู่อีเมลที่ทำงานของคุณ เราจะส่งลิงก์เพื่อยืนยันคำขอเข้าใช้งาน Tajo ทางอีเมล

# การเชื่อมต่อกับธีมที่มีอยู่แล้ว

[Set Noa](https://tajo.io/th/set-noa/)

ธีมนี้ออกแบบมาให้ทำงานร่วมกับโปรเจกต์ Tailwind CSS v4 อื่น ๆ ได้อย่างราบรื่น

## ขั้นตอนที่จำเป็น

1. คัดลอกโฟลเดอร์ `src/docs` จากธีมนี้ไปยังโปรเจกต์ที่คุณมีอยู่

   องค์ประกอบส่วนใหญ่ของธีมนี้อยู่ภายใต้โฟลเดอร์ `src/docs` ขั้นตอนแรกจึงเป็นเพียงการคัดลอกโฟลเดอร์ทั้งหมดนี้ไปยังโปรเจกต์ที่คุณมีอยู่ โดยคงโครงสร้างโฟลเดอร์เดิมไว้ที่ `src/docs`

2. นำเข้าสไตล์ของเอกสารเข้าไปในไฟล์ css ส่วนกลางของคุณ

   ทำได้โดยเพิ่มบรรทัดต่อไปนี้ลงในไฟล์ `global.css` ของคุณ หลังจากบรรทัดที่นำเข้าธีมของ tailwind

   ```css
   /* theme definition import */
   @import "./tailwind-theme.css";

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

3. เพิ่ม content collection ของเอกสารลงในไฟล์กำหนดค่า content collection ของเว็บไซต์คุณ

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

4. เพิ่มคอมโพเนนต์ mdx ลงในอินทิเกรชัน AutoImport

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

5. เพิ่มหน้าเอกสารลงในเว็บไซต์ของคุณ

   คัดลอกโฟลเดอร์ `src/pages/docs` ทั้งหมดจากธีม Tajo ไปยังโฟลเดอร์ `src/pages/docs` ของเว็บไซต์คุณ

## ขั้นตอนเสริม

### ฟอนต์

ธีมนี้ใช้ฟอนต์ **Inter** เป็นค่าเริ่มต้น แนะนำให้ติดตั้งฟอนต์ไว้ในเครื่องจาก [fontsource](https://fontsource.org/fonts/inter/install)

จากนั้นเพิ่มโค้ดต่อไปนี้ลงในไฟล์ `fonts.css` ของคุณ

```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` และอัปเดตคุณสมบัติ `font-family` ในไฟล์ `src/docs/styles/docs-global.css` ของคุณ

Info

คุณควรพรีโหลดฟอนต์ของคุณในคอมโพเนนต์ `src/docs/layouts/BaseHead.astro` ด้วย เช่นเดียวกับที่ทำกับฟอนต์ Inter

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

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