लोगो

थीम प्रत्येक दस्तावेज़ीकरण साइट के साइट हेडर में एक लोगो प्रदर्शित करती है।

उपलब्ध लोगो एसेट

थीम assets/ डायरेक्टरी में दो लोगो फ़ाइलें शिप करती है:

फ़ाइल	फ़ॉर्मेट	विवरण
assets/f5-logo.svg	SVG	Cloud Red (#e4002b) में F5 लोगो
assets/github-avatar.png	PNG	GitHub संगठन अवतार (डिफ़ॉल्ट)

डिफ़ॉल्ट लोगो

डिफ़ॉल्ट लोगो config.ts में createF5xcDocsConfig फ़ैक्ट्री में सेट किया गया है:

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

यदि कोई logo विकल्प प्रदान नहीं किया जाता, तो GitHub अवतार PNG का उपयोग किया जाता है। पाथ एक npm पैकेज स्पेसिफ़ायर है जिसे package.json के exports मैप के माध्यम से रिज़ॉल्व किया जाता है।

लोगो बदलना

विकल्प 1: F5 SVG लोगो का उपयोग करें

createF5xcDocsConfig को logo विकल्प पास करें:

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 KB से कम रखने का लक्ष्य रखें
• दोनों थीम में परीक्षण करें — सत्यापित करें कि लोगो लाइट और डार्क दोनों मोड में सही दिखता है