Skip to content

設定頁尾(Footer)

在 Material for MkDocs，你可以透過 mkdocs.yml 簡單的設定 Footer，或者使用 overrides/footer.html 來完全自訂 Footer。

你可以在 mkdocs.yml 設定 Footer 內容： 

extra:
  generator: false  # 隱藏 "Made with Material for MkDocs"
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/your-repo
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/your-profile
📌 這樣 Footer 會顯示 GitHub & Twitter 連結，並隱藏 MkDocs Material 的預設標語。

如果你想完全 自訂 Footer，可以建立 overrides/footer.html 來修改底部內容。

步驟 1：建立 overrides/footer.html

在你的 MkDocs 專案 內新增： 

docs/
├── overrides/
│   ├── footer.html

步驟 2：編輯 overrides/footer.html

在 overrides/footer.html 內加入： 

<footer class="md-footer">
  <div class="md-footer-meta">
    <p>&copy; 2024 ABC Tech Inc. | <a href="/privacy-policy">Privacy Policy</a></p>
    <p>Powered by <a href="https://squidfunk.github.io/mkdocs-material/">MkDocs Material</a></p>
  </div>
</footer>
📌 這樣你可以自訂公司名稱、版權聲明、隱私政策連結等內容。

theme:
  name: material
  custom_dir: overrides  # 啟用自訂模板

如果你希望調整 Footer 的樣式，你可以使用 自訂 CSS。

步驟 1：建立 extra.css

.md-footer {
    background-color: #222;  /* 深色背景 */
    color: white;
    text-align: center;
    padding: 10px;
}

.md-footer a {
    color: #ff4081;  /* 連結顏色 */
}

步驟 2：在 mkdocs.yml 啟用

extra_css:
  - assets/extra.css

✅ 總結

方式 設定方式 適用場景
內建簡單 Footer extra: generator: false, social: 快速設定社交媒體連結
完全自訂 Footer 建立 overrides/footer.html 自訂 HTML 內容（版權、隱私政策等）
調整 Footer 樣式 使用 extra.css 更改背景顏色、文字樣式

📌 這樣你就可以 輕鬆自訂 MkDocs Material 的 Footer 🚀🔥！