一、装置mkdocs

pip install mkdocs

二、创立我的项目

mkdocs new testdocs

三、文档预览

mkdocs serve

四、更换主题

  1. 下载主题
pip install mkdocs-material mkdocs-windmill
  1. mkdocs.yml里增加:
theme:  name: 'material'

五、进行mkdocs.yml配置

site_name: My Docssite_description: 在线云文档site_author: 小康copyright: Copyright © 2022 - 2099 小康site_url: https://mkdocs.codeslive.top/repo_url: https://github.com/codeslive/mkdocsrepo_name: mkdocsedit_uri: ""# 主题配置theme:     name: material    language: en    search_index_only: true    palette:    - media: "(prefers-color-scheme: light)"      scheme: default      toggle:        icon: material//weather-sunny        name: Switch to dark mode    - media: "(prefers-color-scheme: dark)"      primary: teal      scheme: slate      toggle:        icon: material/weather-night        name: Switch to light mode    features:    #- navigation.instant # 点击外部链接时，不必全副刷新页面    - navigation.tracking # 在url中应用题目定位锚点    - navigation.tabs # 顶部显示导航顶层nav（也就是第一个节点）    - navigation.tabs.sticky # 滚动是暗藏顶部nav，须要配合navigation.tabs应用    - navigation.sections # nav节点缩进    - navigation.expand # 不折叠左侧nav节点    - navigation.indexes # 指定节点index pages ，跟instant不兼容    - toc.integrate # 右侧生产目录    - toc.integrate #导航集成    - navigation.top # 一键回顶部    - header.autohide    - search.share # 搜寻分享    - search.suggest # 搜寻倡议    - search.highlight #搜寻高亮plugins:  - search:      jieba_dict: user_dict.txt# 图标icon:    admonition:      note: octicons/tag-16      abstract: octicons/checklist-16      info: octicons/info-16      tip: octicons/squirrel-16      success: octicons/check-16      question: octicons/question-16      warning: octicons/alert-16      failure: octicons/x-circle-16      danger: octicons/zap-16      bug: octicons/bug-16      example: octicons/beaker-16      quote: octicons/quote-16# 扩大markdown_extensions:  - admonition  - pymdownx.details  - pymdownx.superfences  - abbr  - pymdownx.snippets  - def_list  - tables  - pymdownx.tasklist:      custom_checkbox: true  - attr_list  - md_in_html  - meta  - pymdownx.highlight:      anchor_linenums: true  - pymdownx.inlinehilite  - pymdownx.caret #下划线  - pymdownx.mark #文本高亮  - pymdownx.tilde #删除线# 自定义cssextra_css:    - '//cdn.staticaly.com/gh/codeslive/[email protected]/css/imageszoom.css' #图片放大css  #- '//cdn.staticaly.com/gh/codeslive/[email protected]/cdn/css/custom.css'  #- '//cdn.staticaly.com/gh/codeslive/[email protected]/cdn/css/simplelightbox.min.css' #图片放大css# 自定义jsextra_javascript:   - '//cdn.staticaly.com/gh/codeslive/[email protected]/js/busuanzi.pure.mini.js' # 网站拜访统计  - '//cdn.staticaly.com/gh/codeslive/[email protected]/js/imageszoom.js' # 图片放大js  #- '//cdn.staticaly.com/gh/codeslive/[email protected]/js/jquery-3.2.1.min.js'   #- '//cdn.staticaly.com/gh/codeslive/[email protected]/js/simplelightbox.min.js'  #图片放大js  #- '//cdn.staticaly.com/gh/codeslive/[email protected]/js/custom.js'# 设置extra:    social:        -   icon: fontawesome/brands/github            link: https://github.com/codeslive            name: github        -   icon: fontawesome/brands/slack            link: https://codeslive.github.io            name: myblog        -   icon: fontawesome/solid/paper-plane            link: [email protected]            name: 邮箱地址# 文档区nav:    - 文档介绍: 'index.md'    - '在线云文档':        - '动态云文档':            - mkdoc : 'mkdocs.md'            - docsify : 'docsify.md'        - '动静云文档':            - leanote : 'leanote.md'            - mrdoc : 'mrdoc.md'            - showdoc: 'showdoc.md'    - 集体博客搭建:        - '动态博客':            - hexo : 'hexo.md'            - vuepress : 'vuepress.md'        - '动静博客':            - halo : 'halo.md'            - worldpress : 'worldpress.md'    - 开发记录: 'record.md'

部署站点

 1. 打包命令 mkdocs build 2. 增加仓库 git init git remote add origin gh repo clone codeslive/mkdocs 3. 上传 mkdocs gh-deploy or mkdocs build --clean && mkdocs gh-deploy

六、相干教程

  • 快来丑化你的MKDocs吧
  • mkdocs-material

七、成果演示

白天模式

夜间模式

本文由mdnice多平台公布