ส่วนประกอบ

Asides

Aside แต่ละประเภทใช้ไวยากรณ์ ::: พร้อมชื่อเริ่มต้น

ชื่อที่กำหนดเอง

เนื้อหาแบบผสมภายใน Asides

นี่คือ code block ภายใน aside:

npm install @astrojs/starlight

รายการสิ่งต่าง ๆ:

รายการแรกพร้อม ข้อความตัวหนา
รายการที่สองพร้อม inline code
รายการที่สามพร้อม ลิงก์ไปยังเอกสาร Starlight

CSS ของ Aside

คอมโพเนนต์ aside ในตัวของ Starlight มีมุมโค้งและเงาแบบเลเยอร์:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

Tabs

นี่คือเนื้อหาในแท็บ overview ประกอบด้วยข้อความธรรมดาเพื่อตรวจสอบการแสดงผล tab เบื้องต้น

Tabs ที่มีเนื้อหาผสม

เนื้อหาย่อหน้าธรรมดาในแท็บแรก

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

รายการที่หนึ่งภายใน tab
รายการที่สองพร้อม ข้อความตัวหนา
รายการที่สามพร้อม inline code

Tabs ที่ซิงก์กัน

กลุ่ม tab สองกลุ่มนี้ใช้ syncKey="pkg" ร่วมกัน การเลือก tab ในกลุ่มหนึ่งจะอัปเดตอีกกลุ่มด้วย

คำสั่งติดตั้ง:

npm install @f5-sales-demo/docs-theme

pnpm add @f5-sales-demo/docs-theme

yarn add @f5-sales-demo/docs-theme

คำสั่งรัน:

npm run dev

pnpm dev

yarn dev

Steps

Clone repository

git clone https://github.com/example/repo.git
cd repo

ติดตั้ง dependencies
Terminal window
```
npm install
```
เริ่ม dev server
Terminal window
```
npm run dev
```
ไซต์จะพร้อมใช้งานที่ http://localhost:4321

Cards

Card เดี่ยว

Single Card

นี่คือ card แบบเดี่ยวที่มีไอคอน Cards มีประโยชน์สำหรับเน้นข้อมูลหรือฟีเจอร์สำคัญ

Card Grid

Performance

Astro ส่งมอบหน้าเว็บโดยไม่มี JS เป็นค่าเริ่มต้นเพื่อให้โหลดหน้าได้รวดเร็ว

Customizable

Starlight มีตัวเลือกการปรับธีมและปลั๊กอินที่ครอบคลุม

Accessible

ฟีเจอร์การเข้าถึงในตัวช่วยให้เนื้อหาเข้าถึงได้สำหรับทุกคน

Documented

เอกสารที่ครอบคลุมทำให้การเริ่มต้นใช้งานเป็นเรื่องง่าย

รูปแบบ Stagger

ขั้นตอนที่หนึ่ง

กำหนดค่าการตั้งค่าโปรเจกต์และตัวแปรสภาพแวดล้อมของคุณ

ขั้นตอนที่สอง

สร้างหน้าเนื้อหาของคุณโดยใช้รูปแบบ MDX

ขั้นตอนที่สาม

ดูตัวอย่างในเครื่องด้วย development server

ขั้นตอนที่สี่

Deploy ไปยังแพลตฟอร์มโฮสติ้งที่คุณเลือก

Link Cards

ธีมมีคอมโพเนนต์ LinkCard ที่ใช้งานได้ทั้งแบบมีหรือไม่มีไอคอน นำเข้าจากธีม:

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight Documentationเรียนรู้วิธีสร้างไซต์เอกสารด้วย Starlight

Astro Documentationสำรวจ Astro framework สำหรับเว็บไซต์ที่ขับเคลื่อนด้วยเนื้อหา

พร้อมไอคอน

เพิ่ม prop icon โดยใช้ไวยากรณ์ prefix:name รองรับชุดไอคอนทั้งแปดชุด — ดู เอกสาร แพ็กเกจไอคอน สำหรับแคตตาล็อกทั้งหมด

Lucide (`lucide:`)

ไฟร์วอลล์แอปเว็บ (WAF)นโยบาย Firewall และการกำหนดค่า

เครือข่ายมัลติคลาวด์การเชื่อมต่อ Site ข้ามคลาวด์

Carbon (`carbon:`)

บริการความปลอดภัยชุดไอคอน IBM Carbon สำหรับความปลอดภัย

บริการ Cloudชุดไอคอน IBM Carbon สำหรับ cloud

Material Design Icons (`mdi:`)

การควบคุมการเข้าถึงไอคอน shield lock ของ Material Design

การจัดการข้อมูลไอคอน database ของ Material Design

Phosphor (`phosphor:`)

การป้องกันภัยคุกคามไอคอน shield ของ Phosphor

เครือข่ายทั่วโลกไอคอน globe ของ Phosphor

Tabler (`tabler:`)

แพลตฟอร์ม Cloudไอคอน cloud ของ Tabler

การ Deployไอคอน rocket ของ Tabler

F5 Brand (`f5-brand:`)

ความปลอดภัย Cloudไอคอน cloud shield ของ F5 brand

Firewallไอคอน firewall ของ F5 brand

F5 Distributed Cloud (`f5xc:`)

ไอคอนเหล่านี้เป็นแบบหลายสีและใช้ CSS custom properties สำหรับการปรับสีในโหมดสว่าง/มืด

การป้องกัน App & APIไอคอน web app and API protection ของ F5 XC

การป้องกัน Botไอคอน bot defense ของ F5 XC

HashiCorp Flight (`hashicorp-flight:`)

Terraformไอคอน HashiCorp Terraform

Consulไอคอน HashiCorp Consul

Badges

Badge Variants แบบ Inline

Badge ทั้งหกแบบแสดงผลแบบ inline:

Default Note Danger Success Tip Caution

ขนาดของ Badge

Small Medium Large

แต่ละขนาดพร้อม variant:

Small Tip Medium Danger Large Success

Heading Badges

หัวข้อต่อไปนี้ใช้ไวยากรณ์ของปลั๊กอิน starlight-heading-badges

ฟีเจอร์สมบูรณ์ Stable

หัวข้อนี้มี badge success ที่ระบุว่าฟีเจอร์มีความเสถียร

Experimental API Beta

หัวข้อนี้มี badge caution ที่ระบุว่า API อยู่ในระหว่างทดลอง

ระบบเดิม Deprecated

หัวข้อนี้มี badge danger ที่ระบุว่าถูก deprecate แล้ว

ฟีเจอร์ใหม่ New

หัวข้อนี้มี badge tip ที่ระบุว่าเป็นฟีเจอร์ใหม่

เอกสาร Updated

หัวข้อนี้มี badge note ที่ระบุว่ามีการอัปเดตล่าสุด

Badge เริ่มต้น Info

หัวข้อนี้มี badge เริ่มต้นโดยไม่ระบุ variant

ตรวจสอบ sidebar: หน้านี้มี badge “ใหม่” พร้อม variant tip ที่กำหนดผ่าน frontmatter

Tables

ตารางอย่างง่าย

ฟีเจอร์	สถานะ	ลำดับความสำคัญ
Dark mode	รองรับ	สูง
Image zoom	รองรับ	กลาง
Mermaid diagrams	รองรับ	กลาง
Heading badges	รองรับ	ต่ำ

ตารางพร้อมการจัดตำแหน่งและ Code

Property	Type	Default	คำอธิบาย
`title`	`string`	—	ชื่อหน้าที่แสดงในส่วนหัว
`description`	`string`	`""`	Meta description สำหรับ SEO
`sidebar.order`	`number`	`0`	ลำดับการเรียงใน sidebar
`sidebar.badge`	`object`	`null`	Badge ที่แสดงถัดจากป้ายกำกับ sidebar
`template`	`"doc" \| "splash"`	`"doc"`	Template สำหรับเค้าโครงหน้า

Images

ภาพด้านล่างทดสอบปลั๊กอิน starlight-image-zoom คลิกเพื่อซูม

GitHub Avatar

File Tree

โฟลเดอร์src/
- โฟลเดอร์content/
  - โฟลเดอร์docs/
    index.mdx
    01-environment-variables.mdx
    02-build-pipeline.mdx
    03-astro-config.mdx
    04-logo.mdx
    05-colors.mdx
    07-typography.mdx
    08-code-blocks.mdx
    09-components.mdx หน้านี้
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- โฟลเดอร์plugins/
  - remark-mermaid.mjs
โฟลเดอร์styles/
- custom.css
astro.config.mjs
package.json

การตรวจสอบธีม

สีของ border-left แตกต่างกันตามประเภท aside (น้ำเงิน, ม่วง, เหลือง, แดง)
สีพื้นหลังของ aside มองเห็นได้ทั้งในโหมดสว่างและโหมดมืด
Box-shadow แสดงผลอย่างละเอียดแต่มองเห็นได้รอบ aside แต่ละอัน
มุมโค้ง (0.75rem) บน aside ทั้งหมด
สีตัวบ่งชี้ที่ใช้งานของ tab ใช้สีเน้น (accent color)
เส้นเชื่อมของ step มองเห็นได้ระหว่างขั้นตอนที่มีตัวเลข
Synced tabs ยังคงซิงก์กันเมื่อสลับระหว่างกลุ่ม
Code block ภายใน tab แสดงผลพร้อม syntax highlighting ที่ถูกต้อง
สีขอบ Card ปรับตัวระหว่างโหมดสว่างและโหมดมืด
เอฟเฟกต์พื้นหลังเมื่อ Hover มองเห็นได้บน card
สีไอคอนลูกศรของ LinkCard ตรงกับสีเน้น (accent color)
รูปแบบ Stagger เลื่อน card ที่สลับกันในแนวตั้ง
ไอคอนแสดงผลถูกต้องภายในส่วนหัวของ card
สีพื้นหลัง Badge ตามแต่ละ variant แตกต่างกันระหว่างโหมดมืดและโหมดสว่าง
Badge ในโหมดมืดใช้โทนสีเข้ม (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
Badge ในโหมดสว่างใช้โทนสีอ่อน (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Heading badges จัดตำแหน่งแบบ inline กับข้อความหัวข้อ
Sidebar badge แสดงผลถัดจากป้ายกำกับหน้า
สีขอบตารางปรับตัวระหว่างโหมดสว่างและโหมดมืด
แถวส่วนหัวตารางมีพื้นหลังที่แตกต่างชัดเจน
Image zoom overlay ทำงานเมื่อคลิก (starlight-image-zoom)
พื้นหลัง FileTree ใช้สีที่เหมาะสมกับธีม
ไอคอนสืบทอดสีข้อความปัจจุบัน