الشعار

تعرض السمة شعاراً في رأس الموقع لكل موقع توثيق.

أصول الشعار المتاحة

تأتي السمة مع ملفَّي شعار في مجلد assets/:

الملف	التنسيق	الوصف
assets/f5-logo.svg	SVG	شعار F5 باللون الأحمر السحابي (#e4002b)
assets/github-avatar.png	PNG	صورة رمزية لمنظمة GitHub (الافتراضية)

الشعار الافتراضي

يتم تعيين الشعار الافتراضي في مصنع createF5xcDocsConfig ضمن config.ts:

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

إذا لم يتم توفير خيار logo، يُستخدم ملف PNG للصورة الرمزية على GitHub. المسار هو محدد حزمة npm يتم تحليله من خلال خريطة exports في 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 — ستعمل الصور النقطية (PNG، JPG) لكنها لن تتوسع بشكل واضح في جميع الأحجام
• أضف viewBox — يضمن تغيير حجم الشعار بشكل متناسب (مثلاً، viewBox="0 0 100 100")
• أبقِ حجم الملف صغيراً — يتم تحميل الشعار في كل صفحة؛ احرص على أن يكون أقل من 10 كيلوبايت
• اختبر في كلا السمتين — تحقق من أن الشعار يبدو صحيحاً في الوضع الفاتح والوضع الداكن