Mkdocs配置文件说明(mkdocs.yml)

这篇具有很好参考价值的文章主要介绍了Mkdocs配置文件说明(mkdocs.yml)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • Mkdocs


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

建议详细学习一下上面的官方网站↑↑↑

我把我目前的部分配置文件mkdocs.yml代码写在下面👇🏻

#[Info]
site_name: #网站名字
site_url: #网站地址
site_author: #作者名
#[UI]
theme:
  name: material
  palette:
    #primary: blue grey
  
    - scheme: default # 日间模式
      primary: grey # 上方的
      accent: cyan # 链接等可交互元件的高亮色
      toggle:
        icon: material/weather-night # 图标
        name: 切换至夜间模式 # 鼠标悬浮提示
    - scheme: slate # 夜间模式
      primary: black 
      accent: cyan
      toggle:
        icon: material/weather-sunny
        name: 切换至日间模式
  features: 
    - navigation.instant #- header.autohide  #自动隐藏
    #- announce.dismiss #呈现可标记为由用户读取的临时公告,可以包含一个用于取消当前公告的按钮
    - navigation.tracking #地址栏中的 URL 将自动更新为在目录中突出显示的活动锚点
    - navigation.tabs #顶级部分将呈现在上面视口标题下方的菜单层中,但在移动设备上保持原样
    #- navigation.tabs.sticky  #启用粘性选项卡后,导航选项卡将锁定在标题下方,并在向下滚动时始终保持可见
    #- navigation.sections #启用部分后,顶级部分在边栏中呈现为1220px以上视口的组,但在移动设备上保持原样
    - navigation.top # 返回顶部的按钮 在上滑时出现
    - search.suggest # 搜索输入一些字母时推荐补全整个单词
    - search.highlight # 搜索出的文章关键词加入高亮
    - navigation.expand # 打开Tab时左侧目录全部展开
    #- navigation.indexes #启用节索引页后,可以将文档直接附加到节
    - search.share #搜索分享按钮
  language: zh # 一些提示性的文字会变成中文
  
 
  icon: 
    repo: fontawesome/brands/github #右上角图标
edit_uri: edit/main/docs # 编辑按钮跳转的链接 
repo_url: https://github.com/Wcowin/mymkdocs # 右上角点击跳转的链接
repo_name: Wcowin.github.io # 右上角的名字
 
# [Navigtion]
nav: 
  - 博客:
    - 好用/好玩网站分享: blog/Webplay.md
    - What is Github: blog/Github.md
    - 解决谷歌翻译用不了的问题: blog/googletranslate.md
    - Mac/windows软件网站汇总: blog/macsoft.md
    - win11资源分享: blog/win.md
    - Telegram 群组、频道、机器人 - 汇总分享: blog/TG.md
    - Python:
        - 将Python文件.py打包成.exe可执行程序: blog/py/python.md
        - pip: blog/py/pip.md
    - C语言: blog/c.md
    - kexueshangwang: blog/kexue.md
  - 开发: 
    - 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
  - 旅行: 
    - 家乡: trip/LH.md
    - 重庆: trip/travel.md
  - 关于:
    - 个人履历: about/geren.md
    - 网站制作: about/web.md
 
 
  
  
copyright: Copyright © 2022王科文 # 左下角的版权声明
  
 
extra:
  generator: false  #删除页脚显示“使用 MkDocs 材料制造”
  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:<1135801806@qq.com> #联系方式
  
  analytics: 
    provider: google
    property: G-XXXXXXXXXX # Google Analytics ID
    feedback:
      title: 此页面有帮助吗?
      ratings:
        - icon: material/thumb-up-outline
          name: This page was helpful
          data: 1
          note: >-
            谢谢你的反馈!
        - 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: >- 
      我们也使用cookies来识别您的重复访问和偏好来衡量我们文档的有效性以及用户是否找到他们要找的东西。
      如果你同意,你可以帮助我们让我们的网站更好

      
plugins:
  - search
  - tags:
      tags_file: tag.md #标签


markdown_extensions:
  - abbr
  - pymdownx.caret
  - pymdownx.mark
  - pymdownx.tilde
  - md_in_html
  - pymdownx.arithmatex:  # latex支持
      generic: true
  - toc:
      permalink: true # 固定标题位置为当前位置
  - 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.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.superfences # 代码块高亮插件
  - meta # 支持Markdown文件上方自定义标题标签等
     
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: 网站名字
site_url: 网站网址
site_author: 作者名字

无须多言

theme部分

颜色:

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
theme:
  palette:
    primary: yellow #顶部颜色

primary后面是网站顶部栏目的颜色(也用于标题、边栏、文本链接和其他几个组件),目前支持下面几个颜色:

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

明暗主题按钮:

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
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

此配置将在搜索栏旁边呈现调色板切换。请注意,您还可以为每个调色板的primary和accent定义单独的设置。

按钮图标可以改变(修改icon后面的代码):

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

features

features: 
    - navigation.instant   #- header.autohide  #自动隐藏
    #- announce.dismiss   #呈现可标记为由用户读取的临时公告,可以包含一个用于取消当前公告的按钮
    - navigation.tracking   #地址栏中的 URL 将自动更新为在目录中突出显示的活动锚点
    - navigation.tabs   #顶级部分将呈现在上面视口标题下方的菜单层中,但在移动设备上保持原样
    #- navigation.tabs.sticky    #启用粘性选项卡后,导航选项卡将锁定在标题下方,并在向下滚动时始终保持可见
    #- navigation.sections   #启用部分后,顶级部分在边栏中呈现为1220px以上视口的组,但在移动设备上保持原样
    - navigation.top   # 返回顶部的按钮 在上滑时出现
    - search.suggest   # 搜索输入一些字母时推荐补全整个单词
    - search.highlight   # 搜索出的文章关键词加入高亮
    - navigation.expand   # 打开Tab时左侧目录全部展开
    #- navigation.indexes   #启用节索引页后,可以将文档直接附加到节
    - search.share   #搜索分享按钮

看我所做的注释就很好理解,feature部分让网站拥有了目录,增加了搜索项目的功能,返回顶部等功能,注释里很简明介绍了

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

nav部分

这一部分就是目录

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
nav: 
  - 博客:
    - 好用/好玩网站分享: blog/Webplay.md  #.md文件的相对路径
  - 开发: 
    - Markdown: develop/markdown.md

依照上面的模版为例,你可以建立博客和开发两个大标签,里面的内容:

- 内容标题: 文件路径

内容标题效果:

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

.md文件路径(相对路径):

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

这里也注意:所有文件都在docs文件下,文件类型除CSS,Javascript等都是.md结尾的文件

所以强烈推荐去学习Maekdown、Html5、CSS3、Javascript等知识,这样你就可以自定义你的网站了。

到这里先检查一下文件树状图(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/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:<1135801806@qq.com> #联系方式

social部分可设置网站右下角的社交链接(icon是小图标,link后填自己链接即可):

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

cookie

analytics: 
    provider: google
    property: G-XXXXXXXXXX  #你的Google Analytics ID
    feedback:
      title: 此页面有帮助吗?
      ratings:
        - icon: material/thumb-up-outline
          name: This page was helpful
          data: 1
          note: >-
            谢谢你的反馈!
        - 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: >- 
      我们也使用cookies来识别您的重复访问和偏好来衡量我们文档的有效性以及用户是否找到他们要找的东西。
      如果你同意,你可以帮助我们让我们的网站更好
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

注意property: G-XXXXXXXXXX #你的Google Analytics ID,这里的G-XXXXXXXXXX是你的Google Analytics ID,你可以在Google Analytics中找到,如果你不想使用Google Analytics,可以删除这一部分。

Plugins部分

plugins:
  - search
  - tags  #标签

- search开启搜索功能

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

- tags就是标签

plugins:
  - tags:
      tags_file: tags.md
Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

docs文件夹下新建tags.md文件,会自动在tags.md文件中生成标签列表

但是每个.md文件最开始的地方都需要添加标签,否则不会显示在tags.md文件中

Mkdocs配置文件说明(mkdocs.yml),Mkdocs系列教程,github,前端,经验分享,Powered by 金山文档

格式:

---
title: 
tags:
  - 你的标签名字
hide:
  #- navigation # 显示右侧导航
  #- toc #显示左侧导航
---

markdown_extensions部分

markdown_extensions:
  - abbr
  - pymdownx.caret
  - pymdownx.mark
  - pymdownx.tilde
  - md_in_html
  - pymdownx.arithmatex:  # latex支持
      generic: true
  - toc:
      permalink: true # 固定标题位置为当前位置
  - 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.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.superfences # 代码块高亮插件
  - meta # 支持Markdown文件上方自定义标题标签等

这部分是对markdown语法的扩展,注释里也有简述 ,建议直接复制粘贴


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

javascripts/mathjax.js里有对数学公式的扩展,extra_css里是CSS的知识了,及自定义网站格式颜色等

作者能力有限,文章不免疏漏之处,望博友及时指出,我会尽快修改文章来源地址https://www.toymoban.com/news/detail-743976.html

于2023.3.25重写此文

到了这里,关于Mkdocs配置文件说明(mkdocs.yml)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot案例-配置文件-yml配置文件

    SpringBoot提供了多种属性配置方式 application.properties application.yml application.yaml 常见配置文件格式对比 XML(臃肿) properties(层级结构不够清晰) yml/yaml( 简洁,以数据为中心, 推荐使用 ) 基本语法 大小写敏感 数值前必须有空格 ,作为分隔符 使用缩进表示层级关系,缩进时

    2024年02月11日
    浏览(42)
  • java springboot yml文件配置 多环境yml

    如果是properties改用yml,直接新增一个 .yml ,删除原 .properties ,系统会自动扫描 application.properties 和 application.yml文件(如果同时存在两个文件,则会优先使用.properties文件?)。 注意:改了之后 需要maven 命令 clean一下 ,清个缓存。 一、yml多环境 如果需要配置多环境的配置

    2024年02月15日
    浏览(41)
  • 17、YML配置文件及让springboot启动时加载我们自定义的yml配置文件的几种方式

    其实本质和.properties文件的是一样的。 Spring Boot默认使用SnakeYml工具来处理YAML配置文件,SnakeYml工具默认就会被spring-boot-starter导入,因此无需开发者做任何额外配置。 YAML本质是JSON的超级,它在表示结构化文档时更有表现力。 ▲ properties文件使用 .分隔符 作为结构化的表现:

    2024年02月14日
    浏览(48)
  • SpringGateWay——yml文件配置详解

    Spring Gateway 是一个基于 Spring 框架的网关服务,主要作用是将流量路由到不同的微服务中。它的灵活性和可扩展性使它成为构建云原生应用架构的不二之选。 下面是 Spring Gateway 的 yml 文件配置参数详解: 上面的配置文件中,routes 是一个路由列表,每一个路由配置包括 ID、目

    2024年02月05日
    浏览(36)
  • YAM yml 配置文件介绍

    toml-01-toml 配置文件介绍 YAML-01-yml 配置文件介绍 YAML-02-yml 配置文件 java 整合使用 yamlbeans + snakeyaml + jackson-dataformat-yaml YAML 是一种面向所有编程语言的人类友好的数据序列化标准。 zh_cn 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格。 缩进的空格数

    2024年03月24日
    浏览(34)
  • yml文件中配置路径并引用

    第一步在yml文件中配置本地上传路径(Windows系统 \\\'/\\\' 和 \\\'\\\' 都能识别): 第二步在实现类里面引用路径: 然后就可以直接使用了 拼接路径建议使用File.separator,Windows都可以识别,而Linux只能识别 \\\'/\\\',使用File.separator就不用担心这个问题了 给所有接口前加一个统一的前缀:

    2024年02月12日
    浏览(47)
  • SpringBoot 常用的配置文件 application.yml和 bootstrap.yml的区别

    SpringBoot默认支持properties和YAML两种格式的配置文件。前者格式简单,但是只支持键值对。如果需要表达列表,最好使用YAML格式。SpringBoot支持自动加载约定名称的配置文件,例如application.yml。如果是自定义名称的配置文件,就要另找方法了。可惜的是,不像前者有@PropertySour

    2023年04月15日
    浏览(52)
  • @ConfigurationProperties注解获取yml配置文件信息

    ConfigurationProperties注解主要用于将外部配置文件配置的属性填充到这个** Spring Bean实例 **中。 需要注意:它自己单独使用无效,需要配合其它注解一起使用。且对于Spring Bean才生效,普通的new 对象不生效。 ConfigurationProperties的使用方式: @ConfigurationProperties + @Component(或其它实

    2024年02月16日
    浏览(44)
  • nacos配置文件bootstrap.yml springcloud

    bootstrap.yml配置 nginx配置 在bootstrap.yml中配置的nacos地址 server-addr: nacos:80 ,之所以可以访问的到,是因为nginx做了映射。还需要在host文件中配置nacos这个字母映射到装nacos那台服务器的ip,即: 110.10.52.77 nacos 这样就可以直接用nacos这个字母访问远程的ip。 Nacos系列(10)-Nacos开启s

    2024年02月11日
    浏览(43)
  • SpringBoot的配置文件(properties与yml)

    SpringBoot 项目中所有重要的数据都是在配置文件中配置的,比如∶ 数据库的连接信息(包含用户名和密码的设置); 项目的启动端口; 第三方系统的调用秘钥等信息; 用于发现和定位问题的普通日志和异常日志; 还可以自定义配置,如配置上传文件的保存地址信息等。 想

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包