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

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 เพื่อเปิดดูใน 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

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

ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบ หรือเข้าร่วมเซิร์ฟเวอร์ Discord