-
Mkdocs
Official documentation: Changing the colors – Material for MkDocs
It is recommended to study the above official website in detail ↑↑↑
I put my current partial configuration file mkdocs.yml code below
#[Info]
site_name: #site name
site_url: #website address
site_author: #author name
#[UI]
theme:
name: material
palette:
#primary: blue gray
- scheme: default # day mode
primary: gray # above
accent: cyan # The highlight color of interactive elements such as links
toggle:
icon: material/weather-night # icon
name: switch to night mode # mouse hover prompt
- scheme: slate # night mode
primary: black
accent: cyan
toggle:
icon: material/weather-sunny
name: switch to day mode
features:
- navigation.instant #- header.autohide #Auto hide
#- announce.dismiss #Renders a temporary announcement that can be marked as read by the user, can contain a button to cancel the current announcement
- navigation.tracking #The URL in the address bar will be automatically updated to highlight the active anchor in the table of contents
- navigation.tabs #Top level sections will be rendered in the menu layer below the viewport title above, but remain as-is on mobile
#- navigation.tabs.sticky # When sticky tabs are enabled, the navigation tabs will be locked below the header and always remain visible when scrolling down
#- navigation.sections # When sections are enabled, top-level sections are rendered as groups for viewports above 1220px in the sidebar, but remain as-is on mobile
- navigation.top # Back to top button appears when swiping up
- search.suggest # When searching and entering some letters, it is recommended to complete the whole word
- search.highlight # The searched article keywords are added to the highlight
- navigation.expand # When opening Tab, the left directory is fully expanded
#- navigation.indexes #When section index pages are enabled, documents can be attached directly to sections
- search.share #search share button
language: zh # Some suggestive text will be changed to Chinese
icon:
repo: fontawesome/brands/github #top right icon
edit_uri: edit/main/docs # Edit button jump link
repo_url: https://github.com/Wcowin/mymkdocs # Click the jump link in the upper right corner
repo_name: Wcowin.github.io # The name in the upper right corner
# [Navigation]
nav:
- Blog:
- Easy to use/fun website sharing: blog/Webplay.md
- What is Github: blog/Github.md
- Solve the problem that Google Translate cannot be used: blog/googletranslate.md
- Mac/windows software website summary: blog/macsoft.md
- win11 resource sharing: blog/win.md
- Telegram groups, channels, bots - Summary sharing: blog/TG.md
-Python:
- Package the Python file .py into a .exe executable program: blog/py/python.md
- pip: blog/py/pip.md
- C language: blog/c.md
- kexueshangwang: blog/kexue.md
- Development:
- Markdown: develop/markdown.md
- MWeb Pro: develop/MWeb.md
- Conscience software for big manufacturers~: develop/fenxiang.md
- Fishing guide for all Mac users: develop/Mac.md
- Gossip:
- Yuanshin: relax/game.md
- Poetry:
- Preface to the Pavilion of King Teng: relax/shiwen/twgx.md
- Wang Jiangnan·Transcendence: relax/shiwen/sjcnh.md
- Drumming: relax/shiwen/jg.md
- Yulinling·Autumn Farewell: relax/shiwen/yll.md
- travel:
- Hometown: trip/LH.md
- Chongqing: trip/travel.md
- about:
- Personal resume: about/geren.md
- Website production: about/web.md
copyright: Copyright & amp;copy; 2022 Wang Kewen # The copyright statement in the lower left corner
extra:
generator: false #Delete the footer to display "Made with MkDocs material"
social:
- icon: fontawesome/brands/twitter
link: https://twitter.com/wcowin_
- icon: fontawesome/brands/github
link: https://github.com/Wcowin
- icon: fontawesome/brands/bilibili
link: https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0
- icon: fontawesome/solid/paper-plane
link: mailto:<[email protected]> #Contact information
analytics:
provider: google
property: G-XXXXXXXXXX # Google Analytics ID
feedback:
title: Was this page helpful?
ratings:
- icon: material/thumb-up-outline
name: This page was helpful
data: 1
note: >-
thank you for your feedback!
- icon: material/thumb-down-outline
name: This page could be improved
data: 0
note: >-
Thanks for your feedback! Help us improve this page by
using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
consent:
title: Cookie consent
description: >-
We also use cookies to recognize your repeat visits and preferences to measure the effectiveness of our documentation and whether users find what they are looking for.
If you agree, you can help us make our website better
plugins:
-search
- tags:
tags_file: tag.md #tag
markdown_extensions:
- abbr
-pymdownx.caret
-pymdownx.mark
-pymdownx.tilde
-md_in_html
- pymdownx.arithmatex: # latex support
generic: true
- toc:
permalink: true # The fixed title position is the current position
- pymdownx.highlight: # Code block highlighting
anchor_linenums: true
# linenums: true # display line numbers
# auto_title: true # Display the programming language name
-pymdownx.inlinehilite
-pymdownx.snippets
- pymdownx. superfences
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.superfences # Code block highlighting plugin
- meta # Support custom title tags above Markdown files, etc.
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
Analyze from scratch
beginning
site_name: site name site_url: website URL site_author: author name
Needless to say
theme part
Color:
theme:
palette:
primary: yellow #top color
Behind the primary is the color of the top column of the website (also used for titles, sidebars, text links, and several other components). Currently, the following colors are supported:
Light and dark theme buttons:
theme:
palette:
# Palette toggle for light mode
- scheme: default
toggle:
icon: material/brightness-7
name: Switch to dark mode
# Palette toggle for dark mode
- scheme: slate
toggle:
icon: material/brightness-4
name: Switch to light mode
This configuration will render the palette toggle next to the search bar. Note that you can also define separate settings for each palette’s primary and accent.
The button icon can be changed (modify the code behind the icon):
features
features:
- navigation.instant #- header.autohide #Auto hide
#- announce.dismiss #Renders a temporary announcement that can be marked as read by the user, can contain a button to cancel the current announcement
- navigation.tracking #The URL in the address bar will be automatically updated to highlight the active anchor in the table of contents
- navigation.tabs #Top level sections will be rendered in the menu layer below the viewport title above, but remain as-is on mobile
#- navigation.tabs.sticky # When sticky tabs are enabled, the navigation tabs will be locked below the header and always remain visible when scrolling down
#- navigation.sections # When sections are enabled, top-level sections are rendered as groups for viewports above 1220px in the sidebar, but remain as-is on mobile
- navigation.top # Back to top button appears when swiping up
- search.suggest # When searching and entering some letters, it is recommended to complete the whole word
- search.highlight # The searched article keywords are added to the highlight
- navigation.expand # When opening Tab, the left directory is fully expanded
#- navigation.indexes #When section index pages are enabled, documents can be attached directly to sections
- search.share #search share button
It is easy to understand by looking at the comments I made. The feature part allows the website to have a directory, adding the function of searching for items, returning to the top and other functions. The comments are very concise.
nav part
This part is the directory
nav:
- Blog:
- Easy to use/fun website sharing: blog/Webplay.md #The relative path of the .md file
- Development:
- Markdown: develop/markdown.md
According to the above template as an example, you can create a blog and develop two big tags, the contents of which are:
- Content Title: File Path
Content title effect:
.md file path (relative path):
Also note here: all files are under the docs file, and the file types except CSS, Javascript, etc. are all files ending in .md
So it is strongly recommended to learn Maekdown, Html5, CSS3, Javascript and other knowledge, so that you can customize your website.
Go here and check the file tree first (xx.md represents your md file):
$ tree -a . ├── .github │ ├── .DS_Store │ └── workflows │ └── PublishMySite.yml ├── docs │ └── index.md | |___xx.md | └── mkdocs.yml
extra part
extra:
generator: false #Delete the footer to display "Made with MkDocs material"
social:
- icon: fontawesome/brands/twitter
link: https://twitter.com/wcowin_
- icon: fontawesome/brands/github
link: https://github.com/Wcowin
- icon: fontawesome/brands/bilibili
link: https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0
- icon: fontawesome/solid/paper-plane
link: mailto:<[email protected]> #Contact method
In the social section, you can set the social link in the lower right corner of the website (the icon is a small icon, just fill in your own link after the link):
cookie
analytics:
provider: google
property: G-XXXXXXXXXX #Your Google Analytics ID
feedback:
title: Was this page helpful?
ratings:
- icon: material/thumb-up-outline
name: This page was helpful
data: 1
note: >-
thank you for your feedback!
- icon: material/thumb-down-outline
name: This page could be improved
data: 0
note: >-
Thanks for your feedback! Help us improve this page by
using our <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" rel="noopener">feedback form</a>.
consent:
title: Cookie consent
description: >-
We also use cookies to recognize your repeat visits and preferences to measure the effectiveness of our documentation and whether users find what they are looking for.
If you agree, you can help us make our website better
Note property: G-XXXXXXXXXX #Your Google Analytics ID, where G-XXXXXXXXXX is your Google Analytics ID, you can find it in Google Analytics, if you don’t want to use Google Analytics, you can delete this part.
Plugins section
plugins: -search - tags #label
– search to enable the search function
– tags are tags
plugins:
- tags:
tags_file: tags.md
Create a new tags.md file under the docs folder, and a tag list will be automatically generated in the tags.md file
But each .md file needs to add tags at the beginning, otherwise it will not be displayed in the tags.md file
Format:
--- title: tags: - your label name hide: #- navigation # Show right navigation #- toc #Display left navigation ---
markdown_extensions part
markdown_extensions:
- abbr
-pymdownx.caret
-pymdownx.mark
-pymdownx.tilde
- md_in_html
- pymdownx.arithmatex: # latex support
generic: true
- toc:
permalink: true # The fixed title position is the current position
- pymdownx.highlight: # Code block highlighting
anchor_linenums: true
# linenums: true # display line numbers
# auto_title: true # Display the programming language name
-pymdownx.inlinehilite
-pymdownx.snippets
- pymdownx. superfences
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.superfences # Code block highlighting plugin
- meta # Support custom title tags above the Markdown file, etc.
This part is an extension of the markdown syntax, and there is also a brief description in the comments. It is recommended to copy and paste directly
extra_javascript and 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
There are extensions to mathematical formulas in javascripts/mathjax.js, knowledge of CSS in extra_css, and custom website format colors, etc.
The author’s ability is limited, and the article inevitably omits some omissions. I hope bloggers will point out in time, and I will revise them as soon as possible.
Rewrite this article on 2023.3.25