ส่วนประกอบ

Asides

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

หมายเหตุ

นี่คือ aside แบบ note ใช้เพื่อดึงความสนใจไปยังข้อมูลเสริมที่ผู้อ่านควรทราบ

เคล็ดลับ

นี่คือ aside แบบ tip ใช้เพื่อเน้นแนวทางปฏิบัติที่ดีที่สุดหรือทางลัดที่มีประโยชน์

คำเตือน

นี่คือ aside แบบ caution ใช้เพื่อเตือนเกี่ยวกับข้อผิดพลาดที่อาจเกิดขึ้นหรือพฤติกรรมที่ไม่ชัดเจน

อันตราย

นี่คือ aside แบบ danger ใช้เพื่อแจ้งเตือนการดำเนินการที่ทำลายข้อมูลหรือไม่สามารถย้อนกลับได้

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

Custom Note Title

Aside นี้ใช้คอมโพเนนต์ <Aside> พร้อมการกำหนดชื่อที่กำหนดเอง

Pro Tip

คุณสามารถซ้อน ตัวหนา, ตัวเอียง และ inline code ภายในคอมโพเนนต์ aside ได้

Watch Out

ระวังเมื่ออัปเกรด dependencies — ตรวจสอบ changelog ก่อนเสมอ

Destructive Action

การรัน git reset --hard จะลบการเปลี่ยนแปลงที่ยังไม่ได้ commit อย่างถาวร

เนื้อหาหลากหลายภายใน Asides

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

นี่คือ 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

Tabs พื้นฐาน

Overview

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

Details

นี่คือแท็บ details การสลับระหว่างแท็บควรเป็นไปอย่างทันทีโดยไม่ต้องโหลดหน้าใหม่

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

Text

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

Code

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

List

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

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

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

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

npm

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

pnpm

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

yarn

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

คำสั่งรัน:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Steps

1. โคลน repository

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

2. ติดตั้ง dependencies

   npm install

3. เริ่มต้น dev server

   npm run dev

   ไซต์จะพร้อมใช้งานที่ http://localhost:4321

Cards

Card เดี่ยว

Single Card

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

Card Grid

Performance

Astro ส่งมอบ zero-JS ตามค่าเริ่มต้นเพื่อการโหลดหน้าที่รวดเร็ว

Customizable

Starlight มีตัวเลือกธีมและปลั๊กอินที่หลากหลาย

Accessible

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

Documented

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

Stagger Layout

Step One

กำหนดค่าการตั้งค่าโปรเจกต์และ environment variables

Step Two

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

Step Three

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

Step Four

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 รองรับ icon pack ทั้งแปดชุด — ดูที่เอกสาร แพ็กเกจไอคอน สำหรับรายการทั้งหมด

Lucide (lucide:)

Web App Firewallนโยบายและการกำหนดค่าไฟร์วอลล์

Multi-Cloud Networkingการเชื่อมต่อไซต์ข้ามคลาวด์

Carbon (carbon:)

Security Servicesชุดไอคอน security ของ IBM Carbon

Cloud Servicesชุดไอคอน cloud ของ IBM Carbon

Material Design Icons (mdi:)

Access Controlไอคอน shield lock ของ Material Design

Data Managementไอคอน database ของ Material Design

Phosphor (phosphor:)

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

Global Networkไอคอน globe ของ Phosphor

Tabler (tabler:)

Cloud Platformไอคอน cloud ของ Tabler

Deploymentไอคอน rocket ของ Tabler

F5 Brand (f5-brand:)

Cloud Securityไอคอน cloud shield แบรนด์ F5

Firewallไอคอน firewall แบรนด์ F5

F5 Distributed Cloud (f5xc:)

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

App & API Protectionไอคอน web app และ API protection ของ F5 XC

Bot Defenseไอคอน bot defense ของ F5 XC

HashiCorp Flight (hashicorp-flight:)

Terraformไอคอน Terraform ของ HashiCorp

Consulไอคอน Consul ของ HashiCorp

Badges

Badge แบบ Inline ทุกตัวแปร

Badge ทั้งหกตัวแปรแสดงผลแบบ inline:

Default Note Danger Success Tip Caution

ขนาด Badge

Small Medium Large

แต่ละขนาดพร้อมตัวแปร:

Small Tip Medium Danger Large Success

Heading Badges

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

Feature Complete Stable

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

Experimental API Beta

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

Legacy System Deprecated

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

New Feature New

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

Documentation Updated

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

Default Badge Info

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

Sidebar Badge

ดูที่แถบด้านข้าง: หน้านี้มี badge “New” พร้อมตัวแปร tip ที่กำหนดผ่าน frontmatter

Tables

ตารางพื้นฐาน

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

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

Property	Type	Default	Description
title	string	—	ชื่อหน้าที่แสดงในส่วนหัว
description	string	""	Meta description สำหรับ SEO
sidebar.order	number	0	ลำดับการเรียงในแถบด้านข้าง
sidebar.badge	object	null	Badge ที่แสดงถัดจากป้ายกำกับในแถบด้านข้าง
template	"doc" | "splash"	"doc"	เทมเพลตเลย์เอาต์ของหน้า

Images

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

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

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

• สีเส้นขอบด้านซ้ายแตกต่างกันตามประเภท aside (น้ำเงิน, ม่วง, เหลือง, แดง)
• สีพื้นหลัง aside มองเห็นได้ทั้งในโหมดสว่างและมืด
• Box-shadow บางเบาแต่มองเห็นได้รอบ aside แต่ละอัน
• มุมโค้ง (0.75rem) บน aside ทั้งหมด
• สีตัวบ่งชี้แท็บที่ใช้งานอยู่ใช้สี accent
• เส้นเชื่อมต่อ step มองเห็นได้ระหว่างขั้นตอนที่มีตัวเลข
• Tabs ที่ซิงค์กันคงสถานะซิงค์เมื่อสลับระหว่างกลุ่ม
• Code blocks ภายใน tabs แสดงผลพร้อม syntax highlighting ที่ถูกต้อง
• สีเส้นขอบ Card ปรับตัวระหว่างโหมดสว่างและมืด
• เอฟเฟกต์พื้นหลังเมื่อ hover มองเห็นได้บน cards
• สีไอคอนลูกศร LinkCard ตรงกับสี accent
• Stagger layout เลื่อน cards สลับกันในแนวตั้ง
• ไอคอนแสดงผลได้อย่างถูกต้องภายในส่วนหัว card
• สีพื้นหลัง Badge ตามตัวแปรแตกต่างกันระหว่างโหมดมืดและสว่าง
• 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 ใช้สีที่เหมาะสมกับธีม
• ไอคอนรับค่าสีข้อความปัจจุบัน