官方文件：Changing the colors - Material for MkDocs

建議詳細(xì)學(xué)習(xí)一下上面的官方網(wǎng)站↑↑↑

我把我目前的配置文件mkdocs.yml代碼寫在下面👇🏻

#[Info] site_name: #網(wǎng)站名字 site_url: #網(wǎng)站地址 site_author: #作者名 #[UI] theme:name: materialpalette:#primary: blue grey- scheme: default # 日間模式primary: grey # 上方的accent: cyan # 鏈接等可交互元件的高亮色toggle:icon: material/weather-night # 圖標(biāo)name: 切換至夜間模式 # 鼠標(biāo)懸浮提示- scheme: slate # 夜間模式primary: black accent: cyantoggle:icon: material/weather-sunnyname: 切換至日間模式features: - navigation.instant #- header.autohide #自動隱藏#- announce.dismiss #呈現(xiàn)可標(biāo)記為由用戶讀取的臨時公告，可以包含一個用于取消當(dāng)前公告的按鈕- navigation.tracking #地址欄中的 URL 將自動更新為在目錄中突出顯示的活動錨點- navigation.tabs #頂級部分將呈現(xiàn)在上面視口標(biāo)題下方的菜單層中，但在移動設(shè)備上保持原樣#- navigation.tabs.sticky #啟用粘性選項卡后，導(dǎo)航選項卡將鎖定在標(biāo)題下方，并在向下滾動時始終保持可見#- navigation.sections #啟用部分后，頂級部分在邊欄中呈現(xiàn)為1220px以上視口的組，但在移動設(shè)備上保持原樣- navigation.top # 返回頂部的按鈕 在上滑時出現(xiàn)- search.suggest # 搜索輸入一些字母時推薦補全整個單詞- search.highlight # 搜索出的文章關(guān)鍵詞加入高亮- navigation.expand # 打開Tab時左側(cè)目錄全部展開#- navigation.indexes #啟用節(jié)索引頁后，可以將文檔直接附加到節(jié)- search.share #搜索分享按鈕language: zh # 一些提示性的文字會變成中文icon: repo: fontawesome/brands/github #右上角圖標(biāo) edit_uri: edit/main/docs # 編輯按鈕跳轉(zhuǎn)的鏈接 repo_url: https://github.com/Wcowin/mymkdocs # 右上角點擊跳轉(zhuǎn)的鏈接 repo_name: Wcowin.github.io # 右上角的名字# [Navigtion] nav: - 博客:- 好用/好玩網(wǎng)站分享: blog/Webplay.md- What is Github: blog/Github.md- 解決谷歌翻譯用不了的問題: blog/googletranslate.md- Mac/windows軟件網(wǎng)站匯總: blog/macsoft.md- win11資源分享: blog/win.md- Telegram 群組、頻道、機器人 - 匯總分享: blog/TG.md- Python:- 將Python文件.py打包成.exe可執(zhí)行程序: blog/py/python.md- pip: blog/py/pip.md- C語言: blog/c.md- 科學(xué)上網(wǎng): blog/kexue.md- 開發(fā): - Markdown: develop/markdown.md- MWeb Pro: develop/MWeb.md- 大廠們的良心軟件～: develop/fenxiang.md- 寫給所有 Mac 用戶的摸魚指北: develop/Mac.md- 閑話:- 原神: relax/game.md- 詩文:- 滕王閣序: relax/shiwen/twgx.md- 望江南·超然臺作: relax/shiwen/sjcnh.md- 擊鼓: relax/shiwen/jg.md- 雨霖鈴·秋別: relax/shiwen/yll.md- 旅行: - 家鄉(xiāng): trip/LH.md- 重慶: trip/travel.md- 關(guān)于:- 個人履歷: about/geren.md- 網(wǎng)站制作: about/web.mdcopyright: Copyright &copy; 2022王科文 # 左下角的版權(quán)聲明extra:generator: false #刪除頁腳顯示“使用 MkDocs 材料制造”social:- icon: fontawesome/brands/twitter link: https://twitter.com/wcowin_- icon: fontawesome/brands/githublink: https://github.com/Wcowin- icon: fontawesome/brands/bilibililink: https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0- icon: fontawesome/solid/paper-planelink: mailto:<1135801806@qq.com> #聯(lián)系方式#cookie # analytics: # provider: google# property: !ENV GOOGLE_ANALYTICS_KEY# feedback:# title: Was this page helpful?# ratings:# - icon: material/heart# name: This page was helpful# data: 1# note: >-# Thanks for your feedback!# - icon: material/heart-broken# name: This page could be improved# data: 0# note: >- # Thanks for your feedback! Help us improve this page by# using our <a href="..." target="_blank" rel="noopener">feedback form</a>.# consent:# title: Cookie consent# description: >- # 我們也使用cookies來識別您的重復(fù)訪問和偏好來衡量我們文檔的有效性以及用戶是否找到他們要找的東西。# 如果你同意,你可以幫助我們讓我們的網(wǎng)站更好~#描述plugins:- search- tags #標(biāo)簽 markdown_extensions:- abbr- pymdownx.caret- pymdownx.mark- pymdownx.tilde- md_in_html- pymdownx.arithmatex: # latex支持generic: true- toc:permalink: true # 固定標(biāo)題位置為當(dāng)前位置- pymdownx.highlight: # 代碼塊高亮anchor_linenums: true# linenums: true # 顯示行號# auto_title: true # 顯示編程語言名稱- pymdownx.inlinehilite- pymdownx.snippets- pymdownx.superfences- attr_list- pymdownx.emoji:emoji_index: !!python/name:materialx.emoji.twemojiemoji_generator: !!python/name:materialx.emoji.to_svg- pymdownx.superfences # 代碼塊高亮插件- meta # 支持Markdown文件上方自定義標(biāo)題標(biāo)簽等extra_javascript:- javascripts/extra.js- javascripts/mathjax.js- https://polyfill.io/v3/polyfill.min.js?features=es6- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js extra_css:- stylesheets/extra.css

?

從頭開始分析?

開頭

site_name: 網(wǎng)站名字 site_url: 網(wǎng)站網(wǎng)址 site_author: 作者名字

這三個無需多言

---

theme部分

顏色：

??

theme:palette:primary: yellow #頂部顏色

primary后面是網(wǎng)站頂部欄目的顏色（也用于標(biāo)題、邊欄、文本鏈接和其他幾個組件），目前支持下面幾個顏色：

?明暗主題按鈕：

?

theme:palette: # Palette toggle for light mode- scheme: defaulttoggle:icon: material/brightness-7 name: Switch to dark mode# Palette toggle for dark mode- scheme: slatetoggle:icon: material/brightness-4name: Switch to light mode

此配置將在搜索欄旁邊呈現(xiàn)調(diào)色板切換。請注意，您還可以為每個調(diào)色板的primary和accent定義單獨的設(shè)置。

按鈕圖標(biāo)可以改變（修改icon后面的代碼）：

---

---

features: - navigation.instant #- header.autohide #自動隱藏#- announce.dismiss #呈現(xiàn)可標(biāo)記為由用戶讀取的臨時公告，可以包含一個用于取消當(dāng)前公告的按鈕- navigation.tracking #地址欄中的 URL 將自動更新為在目錄中突出顯示的活動錨點- navigation.tabs #頂級部分將呈現(xiàn)在上面視口標(biāo)題下方的菜單層中，但在移動設(shè)備上保持原樣#- navigation.tabs.sticky #啟用粘性選項卡后，導(dǎo)航選項卡將鎖定在標(biāo)題下方，并在向下滾動時始終保持可見#- navigation.sections #啟用部分后，頂級部分在邊欄中呈現(xiàn)為1220px以上視口的組，但在移動設(shè)備上保持原樣- navigation.top # 返回頂部的按鈕 在上滑時出現(xiàn)- search.suggest # 搜索輸入一些字母時推薦補全整個單詞- search.highlight # 搜索出的文章關(guān)鍵詞加入高亮- navigation.expand # 打開Tab時左側(cè)目錄全部展開#- navigation.indexes #啟用節(jié)索引頁后，可以將文檔直接附加到節(jié)- search.share #搜索分享按鈕

看我所做的注釋就很好理解，feature部分讓網(wǎng)站擁有了目錄，增加了搜索項目的功能，返回頂部等功能，注釋里很簡明介紹了

搜索框 搜索時高亮關(guān)鍵詞及分析按鈕

?

?

返回頂部按鈕

?

右側(cè)目錄

?

?

---

nav部分?

這一部分就是目錄

nav: - 博客:- 好用/好玩網(wǎng)站分享: blog/Webplay.md #.md文件的相對路徑- 開發(fā): - Markdown: develop/markdown.md

?依照上面的模版為例，你可以建立博客和開發(fā)兩個大標(biāo)簽，里面的內(nèi)容：

- 內(nèi)容標(biāo)題: 文件路徑

內(nèi)容標(biāo)題效果：

?文件路徑：

---

---

這里也注意：所有文件都在docs文件下，文件類型除Css，javascript等都是.md結(jié)尾的文件

所以強烈推薦去學(xué)習(xí)Maekdown和Html5

到這里先檢查一下文件樹狀圖(xx.md代表你的md文件)：

$ tree -a . ├── .github │ ├── .DS_Store │ └── workflows │ └── PublishMySite.yml ├── docs │ └── index.md | |___ xx.md | └── mkdocs.yml

---

extra部分

extra:generator: false #刪除頁腳顯示“使用 MkDocs 材料制造”social:- icon: fontawesome/brands/twitter link: https://twitter.com/wcowin_- icon: fontawesome/brands/githublink: https://github.com/Wcowin- icon: fontawesome/brands/bilibililink: https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0- icon: fontawesome/solid/paper-planelink: mailto:<1135801806@qq.com> #聯(lián)系方式

social部分可設(shè)置網(wǎng)站右下角的社交鏈接（icon是小圖標(biāo)，link后填自己鏈接即可）：

?cookie部分先不考慮

---

Plugins部分

plugins:- search- tags #標(biāo)簽

- search開啟搜索功能：

搜索框

- tags就是標(biāo)簽

plugins:- tags:tags_file: tags.md plugins:- tags:tags_extra_files:compatibility.md:- compat web.md:- html- js- css

---

?markdown_extensions部分

markdown_extensions:- abbr- pymdownx.caret- pymdownx.mark- pymdownx.tilde- md_in_html- pymdownx.arithmatex: # latex支持generic: true- toc:permalink: true # 固定標(biāo)題位置為當(dāng)前位置- pymdownx.highlight: # 代碼塊高亮anchor_linenums: true# linenums: true # 顯示行號# auto_title: true # 顯示編程語言名稱- pymdownx.inlinehilite- pymdownx.snippets- pymdownx.superfences- attr_list- pymdownx.emoji:emoji_index: !!python/name:materialx.emoji.twemojiemoji_generator: !!python/name:materialx.emoji.to_svg- pymdownx.superfences # 代碼塊高亮插件- meta # 支持Markdown文件上方自定義標(biāo)題標(biāo)簽等

這部分是對markdown語法的擴展，注釋里也有簡述 ，建議直接復(fù)制粘貼

---

extra_javascript?和extra_css

extra_javascript:- javascripts/extra.js- javascripts/mathjax.js- https://polyfill.io/v3/polyfill.min.js?features=es6- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js extra_css:- stylesheets/extra.css

extra_javascript里有對數(shù)學(xué)公式的擴展，extra_css里是Css的知識了，及自定義網(wǎng)站格式顏色等

---

上方代碼都在這里：mymkdocs/mkdocs.yml at main · Wcowin/mymkdocs · GitHubWcowin的個人網(wǎng)站. Contribute to Wcowin/mymkdocs development by creating an account on GitHub.https://github.com/Wcowin/mymkdocs/blob/main/mkdocs.yml?最后，作者仍在研究學(xué)習(xí)中,能力有限~文章不免有疏漏，還望廣大CSDN博友批評指正

總結(jié)

以上是生活随笔為你收集整理的Mkdocs部署静态网页至GitHub pages配置说明(mkdocs.yml)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。