ปรับแต่งหน้าด้วย Slot (Custom Layout Slot)

Slot คืออะไร?

Slot ใน VitePress คือ "จุดวางเนื้อหา" ที่เราสามารถแทรกเนื้อหาของเราเองเข้าไปในตำแหน่งต่าง ๆ ของหน้าเว็บ เช่น ก่อนเนื้อหาหลัก หลังเนื้อหาหลัก หรือแถบข้าง (Sidebar) เป็นต้น

นึกภาพเหมือนกับการเว้นที่ว่างไว้ในเทมเพลต แล้วให้เรานำเนื้อหาของเรามาใส่ในจุดนั้นได้

ตัวอย่าง Slot ที่ใช้บ่อย

| ตำแหน่ง | ชื่อ Slot | ตัวอย่างการใช้งาน | |||| | ก่อนเนื้อหาหลัก | #doc-before | ใส่ป้ายประกาศ, รูปภาพ, หรือข้อความสำคัญก่อนบทความ | | หลังเนื้อหาหลัก | #doc-after | ใส่ลิงก์แนะนำ, ปุ่มแชร์, หรือโฆษณาหลังบทความ | | แถบข้าง | #sidebar-nav-before | เพิ่มเมนูพิเศษหรือข้อมูลติดต่อในแถบข้าง | | หน้าแรก | #home-hero-before | ใส่ข้อความต้อนรับหรือแบนเนอร์ที่หน้าแรก |

วิธีใช้งาน Slot แบบง่าย ๆ

1. สร้างไฟล์ Vue component (เช่น MyLayout.vue)
2. ใส่ <template #ชื่อslot> ในตำแหน่งที่ต้องการ

<template>
  <Layout>
    <template #doc-before>
      <div style="background: #f5f5f5; padding: 1rem">
        👋 สวัสดี นี่คือประกาศก่อนเนื้อหาหลัก!
      </div>
    </template>
    <slot />
    <!-- เนื้อหาหลัก -->
  </Layout>
</template>

ข้อควรรู้สำหรับมือใหม่

• ใช้ slot เมื่ออยาก "แทรก" หรือ "เพิ่ม" เนื้อหาในจุดที่ระบบเตรียมไว้ให้
• ไม่จำเป็นต้องใช้ทุก slot เลือกใช้เฉพาะที่จำเป็นกับเว็บของเรา
• แต่ละ slot มีชื่อเฉพาะ ต้องสะกดให้ถูก เช่น #doc-before, #sidebar-nav-before
• ถ้าไม่แน่ใจว่า slot ไหนอยู่ตรงไหน ลองใส่ข้อความทดสอบแล้วดูผลลัพธ์

| แถบข้าง (Sidebar) | | | | | #sidebar-nav-before | ส่วนก่อนเมนูนำทางด้านข้าง | | | #sidebar-nav-after | ส่วนหลังเมนูนำทางด้านข้าง | | ส่วนเสริม (Aside) | | | | | #aside-top | ส่วนบนของพื้นที่ด้านข้าง | | | #aside-bottom | ส่วนล่างของพื้นที่ด้านข้าง | | | #aside-outline-before | ส่วนก่อนสารบัญด้านข้าง | | | #aside-outline-after | ส่วนหลังสารบัญด้านข้าง | | | #aside-ads-before | ส่วนก่อนพื้นที่โฆษณา | | | #aside-ads-after | ส่วนหลังพื้นที่โฆษณา | | หน้าแรก (Home Page) | | | | | #home-hero-before | ส่วนก่อนพื้นที่ Hero | | | #home-hero-info | ส่วนข้อมูลในพื้นที่ Hero | | | #home-hero-image | ส่วนรูปภาพใน Hero | | | #home-hero-after | ส่วนหลังพื้นที่ Hero | | | #home-features-before | ส่วนก่อนพื้นที่แสดงฟีเจอร์ | | | #home-features-after | ส่วนหลังพื้นที่แสดงฟีเจอร์ | | การนำทาง (Navigation) | | | | | #nav-bar-title-before | ส่วนก่อนชื่อในแถบนำทาง | | | #nav-bar-title-after | ส่วนหลังชื่อในแถบนำทาง | | | #nav-bar-content-before | ส่วนก่อนเนื้อหาในแถบนำทาง | | | #nav-bar-content-after | ส่วนหลังเนื้อหาในแถบนำทาง | | | #nav-screen-content-before| ส่วนก่อนเนื้อหาในหน้าจอนำทาง | | | #nav-screen-content-after| ส่วนหลังเนื้อหาในหน้าจอนำทาง | | เลย์เอาต์ (Layout) | | | | | #layout-top | ส่วนบนสุดของเลย์เอาต์ | | | #layout-bottom | ส่วนล่างสุดของเลย์เอาต์ | | หน้า (Page) | | | | | #page-top | ส่วนบนของหน้า | | | #page-bottom | ส่วนล่างของหน้า | | อื่นๆ (Other) | | | | | #not-found | หน้า 404 (ไม่พบหน้าที่ต้องการ) |

วิธีการใช้งาน Slots

การใช้งาน Slots ใน VitePress ทำได้โดยการสร้างคอมโพเนนต์และกำหนด slot name ที่ต้องการ ตัวอย่างเช่น:

<!-- .vitepress/theme/MyLayout.vue -->
<template>
  <Layout>
    <template #doc-before>
      <div class="custom-content">
        เนื้อหาที่จะแสดงก่อนเนื้อหาหลักของเอกสาร
      </div>
    </template>
  </Layout>
</template>

คุณสามารถใช้ Slots เหล่านี้เพื่อ:

• เพิ่มเนื้อหาในตำแหน่งต่างๆ ของเว็บไซต์
• ปรับแต่งการแสดงผลให้ตรงตามความต้องการ
• เพิ่มฟีเจอร์พิเศษในตำแหน่งที่ต้องการ