تخطَّ إلى المحتوى

الشعار

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

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

الملفالصيغةالوصف
assets/f5-logo.svgSVGشعار F5 باللون الأحمر السحابي (#e4002b)
assets/github-avatar.pngPNGصورة رمزية لمنظمة 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.

الخيار الأول: استخدام شعار F5 بصيغة SVG

Section titled “الخيار الأول: استخدام شعار 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' },
});

الخيار الثاني: استخدام شعار مخصص

Section titled “الخيار الثاني: استخدام شعار مخصص”

ضع ملف الشعار في مستودع المحتوى وأشر إليه:

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

الخيار الثالث: شعاران منفصلان للوضع الفاتح والداكن

Section titled “الخيار الثالث: شعاران منفصلان للوضع الفاتح والداكن”

يدعم 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 كيلوبايت
  • اختبر في كلا السمتين — تحقق من أن الشعار يبدو صحيحاً في كل من الوضع الفاتح والوضع الداكن