โลโก้

ธีมจะแสดงโลโก้ในส่วนหัวของเว็บไซต์เอกสารทุกแห่ง

ไฟล์โลโก้ที่มีให้ใช้งาน

ธีมมาพร้อมกับไฟล์โลโก้สองไฟล์ในไดเรกทอรี assets/:

ไฟล์	รูปแบบ	คำอธิบาย
assets/f5-logo.svg	SVG	โลโก้ F5 ในสี Cloud Red (#e4002b)
assets/github-avatar.png	PNG	รูปประจำตัวองค์กร GitHub (ค่าเริ่มต้น)

โลโก้เริ่มต้น

โลโก้เริ่มต้นถูกกำหนดไว้ใน factory createF5xcDocsConfig ในไฟล์ config.ts:

const logo = options.logo || { src: '@f5-sales-demo/docs-theme/assets/github-avatar.png' };

หากไม่มีการระบุตัวเลือก logo จะใช้ GitHub avatar PNG แทน โดย path เป็น npm package specifier ที่แก้ไขผ่าน exports map ใน package.json

การเปลี่ยนโลโก้

ตัวเลือกที่ 1: ใช้โลโก้ F5 ในรูปแบบ SVG

ส่งตัวเลือก logo ไปยัง createF5xcDocsConfig:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: '@f5-sales-demo/docs-theme/assets/f5-logo.svg' },
});

ตัวเลือกที่ 2: ใช้โลโก้แบบกำหนดเอง

วางไฟล์โลโก้ของคุณในที่เก็บเนื้อหาและอ้างอิงดังนี้:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: './src/assets/my-logo.svg' },
});

ตัวเลือกที่ 3: แยกโลโก้สำหรับธีมสว่างและธีมมืด

Starlight รองรับโลโก้แยกสำหรับโหมดสว่างและโหมดมืด:

import { createF5xcDocsConfig } from '@f5-sales-demo/docs-theme/config';

export default createF5xcDocsConfig({
  logo: {
    light: './src/assets/logo-light.svg',
    dark: './src/assets/logo-dark.svg',
  },
});

แนวทางปฏิบัติ

• ใช้รูปแบบ SVG — รูปภาพแบบ raster (PNG, JPG) สามารถใช้งานได้แต่จะไม่คมชัดในทุกขนาด
• ใส่ viewBox — เพื่อให้โลโก้ขยายขนาดตามสัดส่วนที่ถูกต้อง (เช่น viewBox="0 0 100 100")
• รักษาขนาดไฟล์ให้เล็ก — โลโก้จะโหลดในทุกหน้า ควรตั้งเป้าให้ต่ำกว่า 10 KB
• ทดสอบในทั้งสองธีม — ตรวจสอบว่าโลโก้แสดงผลถูกต้องในทั้งโหมดสว่างและโหมดมืด