Footer

यह थीम डिफ़ॉल्ट Starlight footer को एक कस्टम Footer.astro घटक से बदलता है, जो मानक footer सामग्री के नीचे सोशल मीडिया लिंक जोड़ता है।

घटक पैटर्न

---
import Default from '@astrojs/starlight/components/Footer.astro';
---

<Default {...Astro.props}><slot /></Default>

<div class="social-links">
  <!-- social link icons -->
</div>

यह पैटर्न डिफ़ॉल्ट footer को पूरी तरह बदलने के बजाय उसे विस्तारित करता है। <Default {...Astro.props}><slot /></Default> मूल Starlight footer (पिछला/अगला नेविगेशन) रेंडर करता है, फिर उसके नीचे सोशल लिंक जोड़े जाते हैं।

इसे कैसे पंजीकृत किया जाता है

Footer ओवरराइड को Starlight प्लगइन द्वारा index.ts में पंजीकृत किया जाता है। config:setup हुक के दौरान, यह Footer घटक ओवरराइड सेट करता है:

updateConfig({
  components: {
    ...config.components,
    Footer: '@f5-sales-demo/docs-theme/components/Footer.astro',
    // ... other component overrides
  },
});

कंटेंट रिपॉज़िटरी को footer को मैन्युअल रूप से पंजीकृत करने की आवश्यकता नहीं है — यह थीम प्लगइन लोड होने पर स्वचालित रूप से लागू हो जाता है।

सोशल लिंक

प्लेटफ़ॉर्म	URL	आइकन रंग	Aria लेबल
Facebook	https://www.facebook.com/f5incorporated	#1877F2 (Facebook Blue)	Facebook
X	https://x.com/F5	currentColor (inherits)	X
LinkedIn	https://www.linkedin.com/company/f5/	#0A66C2 (LinkedIn Blue)	LinkedIn
Instagram	https://www.instagram.com/f5.global/	#E4405F (Instagram Pink)	Instagram
YouTube	https://www.youtube.com/user/f5networksinc	#FF0000 (YouTube Red)	YouTube

प्रत्येक लिंक एक नए टैब में खुलता है (target="_blank") और सुरक्षा के लिए rel="noopener noreferrer" के साथ।

CSS स्टाइलिंग

.social-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0 0.5rem;
}

.social-links a {
  display: inline-flex;
  transition: opacity 0.2s ease;
}

.social-links a:hover {
  opacity: 0.7;
}

लिंक एक flex row में दाईं ओर संरेखित हैं और hover पर एक सूक्ष्म opacity प्रभाव के साथ।

अनुकूलन

URL बदलना

@f5-sales-demo/docs-theme पैकेज में components/Footer.astro के संबंधित <a> टैग पर href विशेषता संपादित करें।

लिंक जोड़ना

.social-links div के अंदर 24x24 SVG आइकन के साथ एक नया <a> तत्व जोड़ें। मौजूदा पैटर्न का पालन करें:

<a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="Platform Name">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#COLOR">
    <path d="..."/>
  </svg>
</a>

लिंक हटाना

उस प्लेटफ़ॉर्म के लिए संपूर्ण <a>...</a> ब्लॉक हटाएं जिसे आप हटाना चाहते हैं।

आइकन रंग बदलना

<svg> तत्व पर fill विशेषता संशोधित करें। टेक्स्ट रंग इनहेरिट करने के लिए currentColor का उपयोग करें, या ब्रांड रंगों के लिए एक विशिष्ट hex मान।

लेआउट बदलना

<style> ब्लॉक में .social-links CSS संशोधित करें:

• केंद्र संरेखण: justify-content को center में बदलें
• अधिक स्पेसिंग: gap मान बढ़ाएं
• बाईं ओर संरेखण: justify-content को flex-start में बदलें