หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

Understanding Astro


ยินดีต้อนรับสู่การทำความเข้าใจ Astro!

หนังสือเล่มนี้เป็นแนวทางที่ดีที่สุดสำหรับ Astro ซึ่งเป็นเฟรมเวิร์กเว็บยุคถัดไปที่ออกแบบมาเพื่อความเร็ว

การทำความเข้าใจ Astro เป็นผลมาจากการใช้เวลาหลายเดือนในการค้นหา Astro และถ่ายทอดผลลัพธ์ในรูปแบบที่ใช้งานได้จริงและเข้าใจง่าย

หากคุณต้องการเข้าใจ Astro คุณมาถูกที่แล้ว

อย่าเพิ่งเรียนรู้กรอบงานอื่น เข้าใจมัน.

ต้องการดาวน์โหลดอีบุ๊ค

สารบัญ

ต่อไปนี้เป็นสารบัญโดยละเอียดสำหรับการทำความเข้าใจ Astro


การแนะนำ

การแนะนำ

  • อย่าไม่พอใจ

  • ความแตกต่างจากเอกสารอย่างเป็นทางการ

  • หนังสือมีโครงสร้างอย่างไร

  • ภาพรวมบทต่างๆ

  • ข้อกำหนดเบื้องต้น

  • แบบแผนการพิมพ์


บทที่ 1: สร้างแอปพลิเคชัน Astro แรกของคุณ

บทที่ 1: สร้างแอปพลิเคชัน Astro แรกของคุณ

  • สิ่งที่คุณจะได้เรียนรู้

  • ภาพรวมโครงการ

  • เริ่มต้นใช้งาน

    • ติดตั้ง Node.js

    • การตั้งค่าโปรแกรมแก้ไขโค้ดของคุณ

  • โครงสร้างโครงการ

    • tsconfig.json

    • แพ็คเกจ.json

    • แพคเกจ lock.json

    • astro.config.mjs

    • src/env.d.ts

    • src/pages/index.astro

  • ข้อมูลเบื้องต้นเกี่ยวกับหน้า Astro

  • กายวิภาคของส่วนประกอบ Astro

  • สไตล์ส่วนประกอบ

  • เค้าโครงหน้า

  • การแสดงผลส่วนประกอบและสล็อต

  • การใช้ชื่อส่วนประกอบให้เป็นตัวพิมพ์ใหญ่

  • คำสั่งสไตล์สากล

  • แบบอักษรที่กำหนดเองและ CSS ทั่วโลก

  • ส่วนประกอบ Astro อิสระ

  • การเพิ่มสคริปต์แบบโต้ตอบ

  • สลับธีมแบบโต้ตอบ

  • ตัวเลือก :global()

  • การจัดการเหตุการณ์

  • ธีมผ่านตัวแปร CSS

  • การเข้าถึงวัตถุไคลเอนต์ทั่วโลก

  • ความมหัศจรรย์ของสคริปต์

  • การใช้ประโยชน์จากสคริปต์อินไลน์

  • ตัวเลือกสากลในสคริปต์

  • หน้ามาร์กดาวน์

  • การนำทางระหว่างหน้า

  • เค้าโครงมาร์กดาวน์

  • การเขียนเค้าโครง

  • อุปกรณ์ประกอบฉากส่วนประกอบ

  • การใช้ประโยชน์จากคุณสมบัติ frontmatter ของ markdown

  • สถานะการนำทางแบบโต้ตอบ

  • องค์ประกอบส่วนประกอบ

  • การไหลของข้อมูลเทมเพลต

  • ด้านมืดของกำหนด:vars

  • กำลังโหลดไฟล์ในเครื่องหลายไฟล์

  • การปรับใช้ไซต์ Astro แบบคงที่

    • 1. สร้างสินทรัพย์การผลิตแบบคงที่

    • 2. ให้บริการสินทรัพย์คงที่ผ่านเว็บเซิร์ฟเวอร์แบบคงที่

    • ปัญหาเกี่ยวกับการปรับใช้ด้วยตนเอง

    • การปรับใช้งานเว็บไซต์แบบคงที่โดยอัตโนมัติ

  • เว็บไซต์ Astro ของเราเร็วแค่ไหน?

  • บทสรุป


บทที่ 2: ส่วนประกอบแอสโตรเชิงลึก

  • บทที่ 2: ส่วนประกอบแอสโตรเชิงลึก

  • สิ่งที่คุณจะได้เรียนรู้

  • การแนะนำ

  • กระดูกสันหลังของแอสโตร

    • ความล้าของรันไทม์ Javascript

    • ทิ้งรันไทม์

  • ส่วนประกอบ Astro คืออะไร?

    • 1. สไตล์เป็นแบบท้องถิ่นโดยค่าเริ่มต้น

    • 2. องค์ประกอบ HTML จะปรากฏอยู่เสมอ

    • 3. สไตล์และสคริปต์ถูกยกขึ้น

    • 4. องค์ประกอบ <head> และองค์ประกอบย่อยจะไม่ถูกยกขึ้น

    • คอมโพเนนต์ astro คือไฟล์ .astro ที่สามารถเรนเดอร์ HTML ที่ถูกต้องได้

    • คุณสามารถประกอบส่วนประกอบ Astro เพื่อสร้างเพจที่ซับซ้อนได้

  • ส่วนประกอบ Astro สามารถใช้ประโยชน์จากไวยากรณ์เทมเพลตที่ทรงพลังได้

    • การบริโภคตัวแปร
    • สร้างคุณลักษณะแบบไดนามิก
    • HTML แบบไดนามิก
    • แท็กแบบไดนามิก
    • ทบทวนสล็อต
    • ไม่ใช่ JSX สักหน่อย
    • 1. การสร้างหรืออ้างอิงตัวแปร
    • 2. การดำเนินการนำเข้า
    • 3. การดึงข้อมูล

    • สคริปต์ส่วนประกอบ

    • เทมเพลตส่วนประกอบ

  • บทสรุป


บทที่ 3: สร้างเกาะส่วนประกอบของคุณเอง

  • บทที่ 3: สร้างเกาะส่วนประกอบของคุณเอง

  • สิ่งที่คุณจะได้เรียนรู้

  • ประวัติโดยย่อว่าเรามาที่นี่ได้อย่างไร

    • ข้อดีของการให้ความชุ่มชื้นบางส่วน

    • ข้อเสียของการให้ความชุ่มชื้นบางส่วน

    • ข้อดีของการเรนเดอร์ฝั่งเซิร์ฟเวอร์พร้อมไฮเดรชั่นฝั่งไคลเอ็นต์

    • ข้อเสียของการเรนเดอร์ฝั่งเซิร์ฟเวอร์พร้อมไฮเดรชั่นฝั่งไคลเอ็นต์

    • ข้อดีของการเรนเดอร์ฝั่งเซิร์ฟเวอร์

    • ข้อเสียของการเรนเดอร์ฝั่งเซิร์ฟเวอร์

    • ข้อดีของการเรนเดอร์ฝั่งไคลเอ็นต์ (CSR)

    • ข้อเสียของการแสดงผลฝั่งไคลเอ็นต์

    • ที่ซึ่งทุกอย่างเริ่มต้นขึ้น

    • การแสดงผลฝั่งไคลเอ็นต์ (CSR)

    • การแสดงผลฝั่งเซิร์ฟเวอร์

    • การเรนเดอร์ฝั่งเซิร์ฟเวอร์พร้อมไฮเดรชั่นฝั่งไคลเอ็นต์

    • เติมน้ำบางส่วนเพื่อชัยชนะ

    • สถาปัตยกรรมเกาะมาจากไหน?

  • การใช้สถาปัตยกรรมหมู่เกาะไฮเดรชั่นบางส่วน

    • วิว

    • เปอติต-วู

    • พรีแอค

    • รองรับเงื่อนไข client:idle และ client:media

    • รอเพื่อไม่ได้ใช้งาน

    • รอสำหรับมีเดีย

    • วัตถุประสงค์

    • การติดตั้ง

    • การออกแบบเอพีไอ

    • เริ่มต้นใช้งาน

    • การใช้ประโยชน์จากองค์ประกอบเทมเพลตเนื้อหา

    • การจัดการการให้น้ำแบบขี้เกียจผ่านแอตทริบิวต์ “client:”

    • กรอบการทำงานที่รองรับ: Vue, Petite-vue และ Preact

  • บทสรุป



ต้องการดาวน์โหลด eBooks หรือไม่? คลิกที่นี่



บทที่ 4: สร้างเกาะส่วนประกอบของคุณเอง

  • บทที่ 4: ชีวิตลับของหมู่เกาะส่วนประกอบแอสโตร

  • สิ่งที่คุณจะได้เรียนรู้

  • หมู่เกาะทำงานอย่างไรใน Astro

    • มันไม่ใช่ข้อผิดพลาด มันเป็นคุณสมบัติ

    • ขั้นตอนที่ 1: สร้างไซต์ Astro

    • ขั้นตอนที่ 2: ติดตั้งการรวมเฟรมเวิร์ก

    • ขั้นตอนที่ 3: เขียนกรอบงานส่วนประกอบ

    • ขั้นตอนที่ 4: เรนเดอร์เฟรมเวิร์กส่วนประกอบ

  • การให้ความชุ่มชื้นอย่างมีความรับผิดชอบ

    • ลูกค้า:โหลด

    • ลูกค้า:เท่านั้น

    • ลูกค้า:มองเห็นได้

    • ลูกค้า:สื่อ

    • ลูกค้า:ไม่ได้ใช้งาน

  • การใช้หลายเฟรมเวิร์ก

    • ตัวนับโหวตใน Vue

    • การแสดงผลส่วนประกอบกรอบงานที่แตกต่างกัน

  • การแบ่งปันสถานะระหว่างหมู่เกาะส่วนประกอบ

    • นาโนสโตร์ทำงานอย่างไร

    • ติดตั้งร้านนาโน

    • สร้างมูลค่าของรัฐ

    • การใช้ค่าสถานะในส่วนประกอบของกรอบงาน

  • การส่งอุปกรณ์ประกอบฉากและลูก ๆ ไปยังส่วนประกอบของเฟรมเวิร์ก

  • ส่วนประกอบกรอบงานซ้อนกัน

  • เกาะแอสโตรได้รับแล้ว

    • 1. อย่าใช้ส่วนประกอบ Astro ในส่วนประกอบกรอบงาน

    • 2. อย่าให้น้ำแก่ส่วนประกอบ Astro

  • ทำไมต้องเกาะ?

    • 1. ประสิทธิภาพ

    • 2. การให้น้ำอย่างมีความรับผิดชอบ

    • 3. การโหลดแบบขนาน

  • บทสรุป


โอ้รีแอคของฉัน! (โคลนไซต์เอกสารตอบโต้)

  • บทที่ 5: โอ้ ปฏิกิริยาของฉัน! (โคลนไซต์เอกสารตอบโต้)

  • สิ่งที่คุณจะได้เรียนรู้

  • ตั้งค่าโครงการเริ่มต้น

  • การติดตั้งการพึ่งพา

  • จัดสไตล์โปรเจ็กต์ Astro ด้วย Tailwind

    • การติดตั้งเทลวินด์

    • Tailwind ทำงานอย่างไร

    • การกำหนดค่าลมท้าย

  • นามแฝงการนำเข้า typescript

  • หมู่เกาะและส่วนประกอบของหน้าการจัดเรียงข้อมูล

  • การเน้นไวยากรณ์

    • ข้อดี

    • ข้อเสีย

    • ข้อดี

    • ข้อเสีย

    • ส่วนประกอบรหัสเริ่มต้น

    • นำธีมของคุณมา

    • การจัดการกับธีมสว่างและมืด

  • เริ่มต้นใช้งานคอลเลกชันเนื้อหา

    • ด่วนโซด

    • โฟลเดอร์ .astro

    • คอลเลกชั่นเนื้อหาแก้ปัญหาอะไรได้บ้าง?

    • การจัดระเบียบคอลเลกชันเนื้อหา

    • การสร้างเนื้อหาด้วย MDX

    • การกำหนดค่าคอลเลกชันเนื้อหา

  • สืบค้นและแสดงผลคอลเลกชันเนื้อหา

  • การกำหนดเส้นทางแบบไดนามิก

    • 1. พารามิเตอร์ที่มีชื่อ

    • 2. พารามิเตอร์ที่เหลือ

    • ลำดับความสำคัญ

  • สร้างเส้นทางด้วยคอลเลกชันเนื้อหา

    • การแสดงผลเนื้อหาแต่ละบล็อก

  • ส่วนประกอบ MDX

    • องค์ประกอบ HTML ที่กำหนดเอง

    • ส่วนประกอบภายใน

    • การนำเข้าจากภายนอก

    • นำเข้าอัตโนมัติ

  • จุดเด่นของการบูรณาการ: Astro SEO

  • กำหนดเอง 404 หน้าใน Astro

  • บทสรุป


บทที่ 6: การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ใน Astro

  • บทที่ 6: การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ใน Astro

  • สิ่งที่คุณจะได้เรียนรู้

  • คุณต้องการ SSR เมื่อใด

  • วิธีเปิดใช้งาน SSR

  • การปรับใช้โครงการ SSR

  • ใช้อะแดปเตอร์ที่ถูกต้อง

  • SSR พร้อมเพจแบบคงที่

  • จากคำขอไปจนถึงการตอบกลับ

    • วัตถุคำขอ

    • วัตถุตอบสนอง

    • การตอบสนองการเปลี่ยนเส้นทาง

    • ยูทิลิตี้สำหรับการจัดการคุกกี้

    • ที่อยู่ IP ของคำขอ

  • ตัวแปรสภาพแวดล้อม

    • การดึงข้อมูลตัวแปรสภาพแวดล้อม

    • ตัวแปรสภาพแวดล้อมเริ่มต้น

    • การสร้างตัวแปรสภาพแวดล้อม

    • ชนิดสคริปต์ IntelliSense

  • เส้นทางแบบไดนามิก

    • 1. พารามิเตอร์ที่มีชื่อ

    • 2. พารามิเตอร์ที่เหลือ

    • ลำดับความสำคัญ

  • จุดสิ้นสุดของเซิร์ฟเวอร์

    • การสร้างจุดสิ้นสุดเซิร์ฟเวอร์

    • ขอรายละเอียด

    • เส้นทาง API แบบไดนามิก

    • ไดเรกทอรี API เฉพาะ

    • รองรับวิธี HTTP อื่น ๆ

  • สตรีมโอ้สตรีม

    • เซิร์ฟเวอร์สตรีมมิ่งคืออะไร?

    • ทำไมเราต้องรำคาญ?

    • การสตรีมเป็นเรื่องง่ายแต่ยาก

    • เซิร์ฟเวอร์สตรีมมิ่งใน Astro

    • การใช้ประโยชน์จากการสตรีม

  • บทสรุป


บทที่ 7: จงได้ยิน! (โครงการฟูลสแตกแอสโตร)

บทที่ 7: จงได้ยิน! (โครงการฟูลสแตกแอสโตร)

  • สิ่งที่คุณจะได้เรียนรู้

  • การตั้งค่าโครงการ

  • ภาพรวมโครงการ

    • หน้าแรก

    • หน้าบันทึก

    • หน้าสมัครสมาชิก

    • หน้าลงชื่อเข้าใช้งาน

    • ส่วนประกอบตัวช่วยและยูทิลิตี้

  • ทางเลือกด้านเทคโนโลยี

  • การตั้งค่าแบ็กเอนด์

  • จัดการการรับรองความถูกต้อง

    • กำลังเริ่มต้น firebase บนไคลเอนต์

    • การใช้โปรแกรมจำลอง Firebase

    • การจัดการการสมัครสมาชิกของผู้ใช้

    • การจัดการการลงชื่อเข้าใช้ของผู้ใช้

  • การใช้เพจที่ได้รับการป้องกัน

    • กำลังเริ่มต้น Firebase บนเซิร์ฟเวอร์

    • การปกป้องเส้นทางโฮมเพจ

    • กำลังอัปเดต URL การเปลี่ยนเส้นทาง

    • ออกจากระบบผู้ใช้จากเพจที่ได้รับการป้องกัน

  • การตั้งค่าที่เก็บข้อมูลบนคลาวด์

  • กำลังอัพโหลดไฟล์บันทึกเสียง

    • การจัดการการอัปโหลดผ่านเส้นทาง API

    • การอัปโหลดการบันทึกจากไคลเอนต์

    • การตอบสนองต่อการเปลี่ยนแปลง UI ในส่วนประกอบของกรอบงาน

  • กำลังดึงข้อมูลจากเซิร์ฟเวอร์

  • การส่งแบบฟอร์ม HTML

  • บทสรุป


บทที่ 1: สร้างแอปพลิเคชัน Astro แรกของคุณ

  • บทที่ 8: สร้างการบูรณาการ Astro ของคุณเอง

  • สิ่งที่คุณจะได้เรียนรู้

  • แอสโตร และ ไวท์

  • การบูรณาการ Astro คืออะไร

  • สวัสดีชาวโลก. ขออภัย สวัสดี บูรณาการ

    • วัตถุประสงค์ของโครงการ

    • การผสานรวมแบบกำหนดเองครั้งแรกของคุณ

    • การพิมพ์ข้อความไปยังคอนโซลเซิร์ฟเวอร์

    • การบูรณาการแบบกำหนดเองเป็นฟังก์ชันของโรงงาน

  • วงจรชีวิตของ Astro hooks

    • เมื่อไหร่และทำไมจึงต้องใช้ตะขอ

    • ตรวจสอบลำดับการประเมิน hooks

  • สร้างการผสานรวมการแสดงภาพล่วงหน้าเริ่มต้น

    • วัตถุประสงค์ของโครงการ

    • API การบูรณาการ

    • ภาพรวมโซลูชันทางเทคนิค

    • การเริ่มต้นโครงการผ่านแฟล็ก CLI

    • การตั้งค่าการรวมระบบ

    • กำลังตรวจสอบการกำหนดค่า Astro ที่แก้ไขแล้ว

    • การใช้ปลั๊กอิน Vite ในการบูรณาการแบบกำหนดเอง

    • การเขียนปลั๊กอิน Vite สำหรับ Astro

    • การแยกวิเคราะห์และการเปลี่ยนแปลง AST

    • การทดสอบด้วยตนเอง

  • การสร้างตัวเรนเดอร์และการรวมไลบรารี

  • บทสรุป


บทสรุป

บทสรุป



ต้องการดาวน์โหลด eBooks หรือไม่? คลิกที่นี่


ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License ดูไฟล์ LICENSE.md สำหรับรายละเอียด

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด