หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

นี่คือการซื้อคืนที่ใช้ร่วมกันสำหรับหลักสูตร Astro บน Frontend Masters

ตั้งค่า

สาขา start จากพื้นที่เก็บข้อมูลนี้มีเนื้อหาเพิ่มเติมบางส่วน และใช้เป็นจุดเริ่มต้นสำหรับหลักสูตร:

เราแนะนำให้ใช้ Node เวอร์ชัน 18 สำหรับหลักสูตรนี้ 

git clone https://github.com/learnwithjason/astro-frontend-masters.git
cd astro-frontend-masters
git checkout start
npm install

เรากำลังสร้างอะไรอยู่?

ไซต์ธุรกิจขนาดเล็กที่ใช้ขั้นตอนการทำงานทั่วไปหลายประการซึ่งเว็บไซต์ (ส่วนใหญ่) จำนวนมากติดตาม

  • หน้า Landing Page ทางการตลาด
    • ภาพฮีโร่
      • การจัดการภาพ
    • การ์ด
      • สินค้าเด่น
    • การจับจดหมายข่าว
  • ร้านค้า
    • เค้าโครงขั้นสูง (ซ้อนกัน)
    • สถานะที่ใช้ร่วมกัน
      • รถเข็นแข็ง
      • ปุ่มโต้ตอบรายการ (หยิบลงตะกร้า)
      • ร้านค้านาโนเพื่อแบ่งปันสถานะ
  • บล็อก
    • คอลเลกชันเนื้อหา
      • มาร์กดาวน์
    • เส้นทางแบบไดนามิก
    • ฟีด RSS
  • เกี่ยวกับ
    • มาร์กดาวน์เพจ
  • 404 หน้า

เราต้องการครอบคลุมคุณสมบัติอะไรบ้าง?

  • กำลังเริ่มต้นไซต์ Astro ใหม่
  • การพัฒนาท้องถิ่น
  • หน้า
    • ประเภทไฟล์ที่รองรับ
      • แอสโตร
      • มาร์กดาวน์
      • HTML
    • การกำหนดเส้นทางพื้นฐาน
    • ลิงค์
    • กำหนดเอง 404 หน้า
  • ส่วนประกอบแอสโตร
    • แนวหน้า
    • สล็อต
  • เค้าโครง
    • เค้าโครงพื้นฐาน
    • เค้าโครงขั้นสูง
  • กำลังดึงข้อมูล
    • การใช้ fetch ใน Astro และส่วนประกอบอื่นๆ
    • กำลังโหลดข้อมูล API
    • กำลังโหลดจาก CMS ที่ไม่มีส่วนหัว
  • จัดแต่งทรงผม
    • จัดแต่งทรงผมในส่วนประกอบ Astro
      • สไตล์ที่มีการกำหนดขอบเขต
      • สไตล์สากล
    • สารพัด Astro สำหรับ CSS
      • class:list
      • define:vars
    • การนำเข้าสไตล์ชีท
      • ท้องถิ่น
      • แพ็คเกจ npm
    • ในกรอบการทำงาน:
      • โมดูลซีเอสเอส
  • เส้นทางแบบไดนามิก
    • เมื่อคุณต้องการเรนเดอร์เพจหนึ่งครั้งในขณะสร้าง
  • การแบ่งหน้า
  • คอลเลกชันเนื้อหา
    • การตั้งค่าและการกำหนดค่าพื้นฐาน
      • การกำหนดสคีมา
      • ทากแบบกำหนดเอง
    • การใช้คอลเลกชันเพื่อสร้างเพจ
      • หน้ารายการ
      • หน้ารายการเต็ม
  • จุดสิ้นสุด
    • อาร์เอสเอส
    • API
      • คงที่
  • โหมด SSR
    • การกำหนดเส้นทางแบบไดนามิก
    • เมื่อคุณต้องการเรนเดอร์เพจทุกคำขอ
    • จุดสิ้นสุด API
  • การจัดการภาพ
    • ไดเรกทอรี assets
  • ส่วนประกอบ JS ให้ความชุ่มชื้น
    • client:* คำสั่ง
    • การใช้หลายเฟรมเวิร์ก
    • การแบ่งรัฐระหว่างเกาะต่างๆ
    • การแชร์สถานะระหว่างเฟรมเวิร์ก
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด