---
title: "การตั้งค่าธีมเริ่มต้น"
description: "เริ่มต้นใช้งาน Tajo!"
url: https://tajo.io/th/docs/getting-started/configuration/
markdown: https://tajo.io/th/docs/getting-started/configuration.md
lang: th-TH
robots: noindex
---

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

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

# การตั้งค่าธีมเริ่มต้น

1. เริ่มต้นด้วยการติดตั้งแพ็กเกจที่จำเป็นทั้งหมดด้วย `npm install` หรือ `pnpm install` จากนั้นรันบิลด์ครั้งแรกเพื่อยืนยันว่าการตั้งค่าทำงานได้ ด้วย `npm run build` หรือ `pnpm build`

2. คัดลอกบิลด์ของ Pagefind (สำหรับการค้นหาภายในเว็บไซต์) ให้พร้อมใช้งานในสภาพแวดล้อมสำหรับพัฒนา ขั้นตอนนี้แตกต่างกันไปตามระบบปฏิบัติการที่คุณใช้ เราจึงเตรียมคำสั่งไว้ให้สองสามคำสั่งเพื่อช่วยในเรื่องนี้

   - สำหรับ Windows ให้รัน `npm run winsearch`
   - สำหรับ OSX หรือ Linux ให้รัน `npm run osxsearch`

3. ขั้นต่อไป ให้ตั้งค่า i18n ของเว็บไซต์ (ภาษาเดียวหรือหลายภาษา) เพียงรันคำสั่ง `npm run docs:config-i18n` แล้วทำตามคำแนะนำของสคริปต์เพื่อตั้งค่าให้เสร็จสมบูรณ์

4. จากนี้คุณก็ปรับแต่งเว็บไซต์ได้ตามต้องการแล้ว

## แนะนำโค้ดเบื้องต้น

เราได้สร้าง code tour ไว้สองสามชุดเพื่อช่วยแนะนำให้คุณรู้จักกับโค้ดเบส คุณจะต้องติดตั้งส่วนขยาย [Code Tour](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) เพื่อเปิดดูใน VSCode หรือ IDE อื่น

## โครงสร้างของโค้ด

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

## ตัวเลือกการตั้งค่า

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

### การตั้งค่าเว็บไซต์

ไฟล์ `src/docs/config/siteSettings.json.ts` ใช้กำหนดการตั้งค่าเว็บไซต์ ซึ่งรวมถึงการเปิดใช้งาน view transitions การเปิดใช้งานแอนิเมชัน และการแสดงปุ่มคัดลอกลิงก์สำหรับหัวข้อในเอกสาร

### ข้อมูลเว็บไซต์

ไฟล์ `src/docs/config/[language]/siteData.json.ts` ใช้กำหนดข้อมูลเว็บไซต์ ซึ่งรวมถึงชื่อเว็บไซต์ คำอธิบาย ลิงก์โซเชียล และรูปภาพเริ่มต้น

### ข้อมูลเมนูนำทาง

กำหนดข้อมูลเมนูนำทางสำหรับแถบนำทางด้านบนได้ในไฟล์ `src/docs/config/[language]/navData.json.ts`

### เลย์เอาต์แถบด้านข้าง

กำหนดลำดับของหมวดหมู่ในเอกสารได้ในไฟล์ `src/docs/config/[language]/sidebarNavData.json.ts`

### Robots

เพื่อให้บอทอย่าง Google เห็น sitemap ที่ถูกต้อง คุณควรแก้ไขไฟล์ `public/robots.txt` ให้ใช้โดเมนของเว็บไซต์คุณ

## แหล่งข้อมูลเพิ่มเติม

## ข้อมูลทั่วไปเกี่ยวกับ Astro

Astro จะมองหาไฟล์ `.astro` หรือ `.md` ในไดเรกทอรี `src/pages/` แต่ละหน้าจะถูกเปิดเป็นเส้นทางตามชื่อไฟล์ของหน้านั้น

ไดเรกทอรี `src/components/` ไม่มีอะไรพิเศษ แต่เป็นที่ที่เรานิยมวางคอมโพเนนต์ Astro/React/Vue/Svelte/Preact ทั้งหมด

ไฟล์สแตติกอย่างรูปภาพวางไว้ในไดเรกทอรี `public/` ได้ นอกจากนี้เรายังใช้ `src/assets` สำหรับรูปภาพอยู่บ่อยครั้ง เมื่อใช้ Astro assets เพื่อปรับรูปภาพให้เหมาะสม

### คำสั่ง

คำสั่งทั้งหมดรันจากรากของโปรเจกต์ผ่านเทอร์มินัล

| คำสั่ง | การทำงาน |
| --- | --- |
| `npm install` | ติดตั้ง dependencies |
| `npm run dev` | เริ่มเซิร์ฟเวอร์สำหรับพัฒนาในเครื่องที่ `localhost:4321` |
| `npm run build` | บิลด์เว็บไซต์สำหรับ production ไปที่ `./dist/` |
| `npm run preview` | ดูตัวอย่างบิลด์ในเครื่องก่อนดีพลอย |
| `npm run astro ...` | รันคำสั่ง CLI เช่น `astro add`, `astro check` |
| `npm run astro -- --help` | ดูวิธีใช้งาน Astro CLI |

### อยากเรียนรู้เพิ่มเติมหรือไม่

ดูรายละเอียดเพิ่มเติมได้ที่[เอกสารประกอบ](https://docs.astro.build/) หรือเข้าร่วม[เซิร์ฟเวอร์ Discord](https://astro.build/chat)