頁尾

此主題以自訂的 Footer.astro 元件取代預設的 Starlight 頁尾，並在標準頁尾內容下方新增社群媒體連結。

元件模式

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

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

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

此模式是擴充預設頁尾，而非完全取代。<Default {...Astro.props}><slot /></Default> 會渲染原始的 Starlight 頁尾（上一頁/下一頁導覽），社群連結則附加於其下方。

註冊方式

頁尾覆寫是由 Starlight 外掛在 index.ts 中註冊的。在 config:setup 鉤子期間，它會設定 Footer 元件覆寫：

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

內容存放庫無需手動註冊頁尾 — 當主題外掛載入時，它會自動套用。

社群連結

平台	URL	圖示顏色	Aria 標籤
Facebook	`https://www.facebook.com/f5incorporated`	`#1877F2`（Facebook 藍）	Facebook
X	`https://x.com/F5`	`currentColor`（繼承）	X
LinkedIn	`https://www.linkedin.com/company/f5/`	`#0A66C2`（LinkedIn 藍）	LinkedIn
Instagram	`https://www.instagram.com/f5.global/`	`#E4405F`（Instagram 粉紅）	Instagram
YouTube	`https://www.youtube.com/user/f5networksinc`	`#FF0000`（YouTube 紅）	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;
}

連結以彈性列靠右對齊，滑鼠懸停時有微妙的透明度效果。

自訂設定

變更 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 可繼承文字顏色，或使用特定的十六進位值來套用品牌顏色。

變更版面配置

修改 <style> 區塊中的 .social-links CSS：

置中對齊：將 justify-content 改為 center
增加間距：提高 gap 的值
靠左對齊：將 justify-content 改為 flex-start