網站客製化

你可以透過 YAML 設定、CSS、自訂 HTML、JavaScript 等方式來 客製化 MkDocs Material，讓網站符合你的需求。

Note

我們考慮將本章的mkdocs.yml, icon跟logo的部分刪掉，因為有專章討論這些東西了！

🔹 1. 修改 `mkdocs.yml`（基本客製化）

在 mkdocs.yml 進行基本客製化設定：

theme:
  name: material
  palette:
    scheme: slate  # 深色主題
    primary: indigo  # 主色
    accent: pink  # 強調色
  font:
    text: Roboto  # 主要字體
    code: Fira Code  # 程式碼字體
  features:
    - navigation.tabs  # 啟用頁籤式導覽
    - navigation.sections  # 啟用側邊欄分段
    - content.code.copy  # 啟用代碼複製按鈕

📌 這可以客製化：

顏色主題（palette）
字體設定（font）
導覽選項（navigation.tabs、navigation.sections）
代碼顯示功能（content.code.copy）

🔹 2. 客製化 CSS

你可以使用 自訂 CSS 來調整樣式。

步驟 1：建立 `extra.css`

在 docs/assets/extra.css 加入：

/* 修改標題顏色 */
.md-typeset h1 {
    color: #ff4081; /* 粉紅色 */
}

/* 修改表格內文字垂直置中 */
.md-typeset table td {
    vertical-align: middle;
}

/* 修改側邊欄背景 */
.md-sidebar {
    background-color: #333;
}

步驟 2：在 `mkdocs.yml` 啟用

extra_css:
  - assets/extra.css

🔹 3. 自訂 Logo、Icons

設定網站 Logo

theme:
  name: material
  logo: assets/logo.png

設定社交媒體 Icons

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/your-repo
    - icon: fontawesome/brands/linkedin
      link: https://linkedin.com/in/your-profile

🔹 4. 自訂 HTML 頁面

你可以建立 overrides/ 目錄來覆蓋預設的 HTML。

步驟 1：建立 `overrides/` 目錄

docs/
├── overrides/
│   ├── main.html  # 自訂主版面
│   ├── footer.html  # 自訂頁尾

步驟 2：啟用 `overrides/`

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

🔹 5. 加入 JavaScript

如果你需要額外的 互動效果，可以加入 JavaScript。

步驟 1：建立 `extra.js`

在 docs/assets/extra.js 加入：

document.addEventListener("DOMContentLoaded", function() {
    console.log("Hello from extra.js!");
});

步驟 2：在 `mkdocs.yml` 載入

extra_javascript:
  - assets/extra.js

📝 總結

客製化項目	設定方式
修改主題顏色	`palette: primary: indigo, accent: pink`
修改字體	`font: text: Roboto, code: Fira Code`
自訂 CSS	`extra_css: assets/extra.css`
自訂 Logo & Icons	`theme: logo: assets/logo.png`，`extra: social`
自訂 HTML 結構	建立 `overrides/main.html`，啟用 `custom_dir: overrides`
加入 JavaScript	`extra_javascript: assets/extra.js`

📌 這些設定能夠讓你的 Material for MkDocs 網站變得更獨特！ 🚀🎨

網站客製化

🔹 1. 修改 mkdocs.yml（基本客製化）