ไฟล์โครงร่าง: +layout.svelte
ใช้การนำทางและส่วนโครงของส่วนติดต่อผู้ใช้ร่วมกันในหลายหน้าด้วยคอมโพเนนต์โครงร่าง
ไฟล์โครงร่าง: +layout.svelte เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เลย์เอาต์ครอบหน้าต่าง ๆ
ไฟล์ +layout.svelte จะครอบทุกหน้าในโฟลเดอร์เดียวกันและโฟลเดอร์ย่อย
เลย์เอาต์ราก
src/routes/+layout.svelte จะครอบทุกหน้าในแอป มักใช้เป็นตำแหน่งสำหรับแถบนำทางและโครงหน้า
<!-- +layout.svelte -->
<nav>...</nav>
<main>
<slot />
</main>ช่องแทรกเนื้อหา
หน้าปัจจุบันจะถูกแทรกตรงตำแหน่งที่มี <slot />
เลย์เอาต์ซ้อนกัน
เพิ่ม +layout.svelte ในโฟลเดอร์ย่อยใด ๆ สำหรับเลย์เอาต์เฉพาะส่วน
src/routes/admin/+layout.svelte // wraps all /admin/* pagesการสืบทอดเลย์เอาต์
หน้าจะสืบทอดเลย์เอาต์ของทุกโฟลเดอร์แม่ตั้งแต่รากลงมา เลือกซ้อนเลย์เอาต์เพื่อใช้ส่วนติดต่อผู้ใช้ร่วมกัน
การโหลดข้อมูลของเลย์เอาต์
ใช้ร่วมกับ +layout.js เพื่อโหลดข้อมูลที่เลย์เอาต์ต้องใช้
ส่วนติดต่อผู้ใช้แบบมีเงื่อนไข
เลย์เอาต์สามารถอ่าน $page เพื่อปรับเปลี่ยนตาม URL ปัจจุบัน
รีเซ็ตเลย์เอาต์
ใช้รูปแบบ +page@ เพื่อแยกหน้าใดหน้าหนึ่งออกจากเลย์เอาต์
กลุ่มเลย์เอาต์
ใช้โฟลเดอร์อย่าง (marketing) สำหรับเลย์เอาต์ที่ไม่เพิ่มส่วนเส้นทางใน URL
หน้าข้อผิดพลาด
วาง +error.svelte ในโฟลเดอร์เลย์เอาต์ใด ๆ เพื่อดักจับข้อผิดพลาดของส่วนนั้น
การใช้เลย์เอาต์ซ้ำ
เลย์เอาต์ช่วยให้สร้างส่วนติดต่อผู้ใช้ที่สอดคล้องกันได้ง่าย โดยไม่ต้องส่งพร็อพผ่านหลายชั้น
ตรวจสอบความเข้าใจ
หน้าเว็บจะแสดงผลภายในเลย์เอาต์ตรงตำแหน่งใด
สรุปทบทวน
เลย์เอาต์ครอบหน้าผ่าน +layout.svelte และมี <slot /> โดยจะซ้อนกันตามความลึกของโฟลเดอร์
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “ไฟล์โครงร่าง: +layout.svelte” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ไฟล์โครงร่าง: +layout.svelte” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ไฟล์โครงร่าง: +layout.svelte”
ใช้การนำทางและส่วนโครงของส่วนติดต่อผู้ใช้ร่วมกันในหลายหน้าด้วยคอมโพเนนต์โครงร่าง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ไฟล์โครงร่าง: +layout.svelte” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดเส้นทางตามไฟล์ด้วย +page.svelte
- พารามิเตอร์เส้นทางแบบไดนามิก: [id]
- พารามิเตอร์เสริมและพารามิเตอร์ส่วนที่เหลือ
- ไฟล์โครงร่าง: +layout.svelte