关于前端:mkdocs-部署教程

一、装置 mkdocs

pip install mkdocs

二、创立我的项目

mkdocs new testdocs

三、文档预览

mkdocs serve

四、更换主题

1. 下载主题

pip install mkdocs-material mkdocs-windmill

2. mkdocs.yml 里增加:

theme:
  name: 'material'

五、进行 mkdocs.yml 配置

site_name: My Docs
site_description: 在线云文档
site_author: 小康
copyright: Copyright © 2022 - 2099 小康
site_url: https://mkdocs.codeslive.top/
repo_url: https://github.com/codeslive/mkdocs
repo_name: mkdocs
edit_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 #删除线



# 自定义 css
extra_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

# 自定义 js
extra_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 多平台公布