跳转至

Mkdocs部署静态网页至GitHub pages配置说明(mkdocs.yml)

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

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

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
#[Info]
site_name: Wcowin's Web
site_url: http://wcowin.work/
site_author: 王科文(Wcowin)
#[UI]
theme:
  name: material
  custom_dir: overrides
  # custom_dir: material/.overrides
  # font:
  #   text: Bitter
  #   code: Roboto Mono
  logo: https://cn.mcecy.com/image/20231006/a05f708fb7b0426e7a5786669d5b1386.png
    # material/library
    # admonition:
    #   <type>: material/file-alert-outline

  favicon: img/apple-line.png
  # img/11.ico
  palette:
    #primary: blue grey

    - media: "(prefers-color-scheme: light)"
      scheme: default # 日间模式
      primary: blue grey # 上方的
      accent: indigo # 链接等可交互元件的高亮色
      # teal 
      toggle:
        icon: material/weather-night # 图标
        name: 切换至夜间模式 # 鼠标悬浮提示
    - media: "(prefers-color-scheme: dark)"
      scheme: slate # 夜间模式
      primary: black 
      accent: indigo
      # teal
      toggle:
        icon: material/weather-sunny
        name: 切换至日间模式
  features: 
    - announce.dismiss #呈现可标记为由用户读取的临时公告，可以包含一个用于取消当前公告的按钮
    # - navigation.instant 
    #- header.autohide  #自动隐藏
    - navigation.tracking #地址栏中的 URL 将自动更新为在目录中突出显示的活动锚点
    - navigation.tabs #顶级部分将呈现在上面视口标题下方的菜单层中，但在移动设备上保持原样
    # - navigation.tabs.sticky  #启用粘性选项卡后，导航选项卡将锁定在标题下方，并在向下滚动时始终保持可见
    - navigation.sections #启用部分后，顶级部分在边栏中呈现为1220px以上视口的组，但在移动设备上保持原样
    - navigation.top # 返回顶部的按钮 在上滑时出现
    - navigation.footer #页脚将呈现在边栏中，但在移动设备上保持原样
    - search.suggest # 搜索输入一些字母时推荐补全整个单词
    - search.highlight # 搜索出的文章关键词加入高亮
    - search.share #搜索分享按钮
    - navigation.expand # 打开Tab时左侧目录全部展开
    - navigation.indexes #启用节索引页后，可以将文档直接附加到节
    - content.tabs.link
    - content.tooltips
    - content.code.copy
    - content.action.edit
    - content.action.view
    - content.code.annotate 
  language: zh # 一些提示性的文字会变成中文


  icon: 
    repo: fontawesome/brands/github #右上角图标
edit_uri: edit/main/docs # 编辑按钮跳转的链接 
repo_url: https://github.com/Wcowin/Wcowin.github.io # 右上角点击跳转的链接
repo_name: Wcowin.github.io # 右上角的名字

# [Navigtion]
nav:
  # - 主页: index.md
  - 博文:
    - 好用/好玩网站分享: blog/Webplay.md
    - Mac/windows软件网站汇总: blog/macsoft.md
    - 语雀: blog/yuque.md
    - Telegram 群组、频道、机器人  汇总分享: blog/TG.md
    - MKdocs教程:
        - 利用mkdocs部署静态网页至GitHub pages: blog/Mkdocs/mkdocs1.md
        - Mkdocs部署静态网页至GitHub pages配置说明(mkdocs.yml): blog/Mkdocs/mkdocs2.md
        - 解决 mkdocs部署 Github Pages 自定义域名失效的问题: blog/Mkdocs/mkdocs3.md
        - 设置Mkdocs博客: blog/Mkdocs/mkdocsblog.md
    - Mkdocs美化:
        - 修改网站字体: blog/websitebeauty/mkdocsfont.md
        - JS实现鼠标样式: blog/websitebeauty/shubiao.md
        - 背景特效: blog/websitebeauty/backgroud.md      
    - 技术分享:
        - Win11镜像下载、壁纸及KMS激活 : blog/technique sharing/win.md
        - 实用脚本分享: blog/technique sharing/jiaoben.md
        - 搭建个人图床: blog/technique sharing/tuchuang.md
        - oh-my-zsh 更新: blog/technique sharing/ohmuzsh.md
        - 解决谷歌翻译用不了的问题: blog/technique sharing/googletranslate.md
        - 爱心代码: blog/technique sharing/aixin.md
        - 用Matlab画玫瑰百合花: blog/technique sharing/matlabrose.md
        - 科学上网: blog/technique sharing/kexue.md
        - 计算机编年史: blog/technique sharing/jisuanjibiannianshi.md

    - 学术:
        - LaTeX常用符号整理: blog/Academic/LaTeX.md
        - Math: blog/Academic/math.md
        - 数学竞赛: 
          - 第十四届全国大学生数学竞赛(非数学类)初赛补赛详细解答: blog/Academic/Math/14.md
          - 第十三届全国大学生数学竞赛(非数学类)决赛详细解答: blog/Academic/Math/13js.md    
    - Mac:
        - PD虚拟机: blog/Mac/Pd.md
        - 提示 「“XXX”已损坏,无法打开。 您应该将它移到废纸篓。」「打不开 xxx,因为它来自身份不明的开发者」解决方法: blog/Mac/sunhuai.md
        - Macbook启动台顽固应用图标删除方法: blog/Mac/shanchu.md
        - Homebrew国内如何自动安装(国内地址)(Mac & Linux): blog/Mac/homebrew.md
        - mac 无法访问 github 的解决办法: blog/Mac/jiasugithub.md
        - Mac的esc键失效的解决方法: blog/Mac/Macesc.md
        - 启动台图标顺序错乱怎么办: blog/Mac/Launchpad.md
        - Mac小技巧:去除系统截图名的日期后缀: blog/Mac/jietu.md
        - 小小Mac技巧: blog/Mac/xjiq.md
        - Mac隐藏彩蛋: blog/Mac/maccd.md
        - Mac 键盘快捷键: blog/Mac/kjj.md
    - iPhone:
        - iphone多账号如何不频繁登录,双重认证: blog/iphone/iphoneduozhanghao.md
        - 苹果iphone /iOS 限免网站合集: blog/iphone/iphonexianmian.md
        - 苹果手机如何去除开屏广告: blog/iphone/iphonequchukaiping.md
    - WIN:
        - 彻底卸载360安全卫士的方法: blog/Win/360.md
        - 三步卸载 Microsoft Edge: blog/Win/edgexz.md
        - windows快捷键: blog/Win/winkjj.md
        - 安卓的子系统: blog/Win/anzhuodezixit.md

    - Python:
        - 将Python文件.py打包成.exe可执行程序: blog/py/python.md
        - pip: blog/py/pip.md
    - C语言: 
        - C笔记: blog/C language/c.md



  - 开发: 
    - 我的设备: develop/mydevice.md
    - 如何注册ChatGPT: develop/ChatGPT.md
    - Markdown: 
        - Markdown指南: develop/Markdown/markdown.md
        - MWeb Pro: develop/Markdown/MWeb.md
    - Git 实用技巧: develop/git.md    
    - 我的作品:
        # - 基于讯飞人脸算法进行人脸比对(调用API): develop/Mywork/face_compare.md
        # - 人脸识别系统: develop/Mywork/face-recognition.md
        - 基于百度API和opencv的智能车牌识别程序: develop/Mywork/opencv.md
        - 利用百度API进行植物识别: develop/Mywork/aizhiwu.md
        - 玩的设计: develop/Mywork/design.md
    - 设计美学:
        - 唐·诺曼—情感设计的三个层次: develop/designbeauty/db1.md
        - 我对设计的一些观点: develop/designbeauty/my-to-desihn.md
    - 1024code: develop/1024code.md
    - 利用Lighthouse测试网站性能: develop/lighthouse.md
    - What is Github: develop/Github.md
    - 如何将 github pages 迁移到 vercel 上托管: develop/vercel.md
    - 大厂们的良心软件～: develop/fenxiang.md
    - 写给所有 Mac 用户的摸鱼指北: develop/Mac.md
    - 看源码才懂: develop/kanyuanma.md

  - 闲话:
    - 推荐的Books: relax/tuijianyuedu.md
    - 小米: relax/xiaomo.md
    - Apple: relax/Apple.md
    - 如是我闻: relax/rushiwowen.md
    - 王冰冰o(^▽^)o: relax/wbb.md
    - 诗文:
      - 枫桥夜泊: relax/shiwen/fqyb.md
      - 滕王阁序: relax/shiwen/twgx.md
      - 望江南·超然台作: relax/shiwen/sjcnh.md
      - 击鼓: relax/shiwen/jg.md
      - 雨霖铃·秋别: relax/shiwen/yll.md
      - 江城子·乙卯正月二十日夜记梦: relax/shiwen/jcz.md
    - 数至十: 
      - 1: relax/wkwMath/1.md
      - 2: relax/wkwMath/2.md 
      - 3: relax/wkwMath/3.md 
      - 4: relax/wkwMath/4.md
      - 5: relax/wkwMath/5.md
      # - 诗经: relax/shiwen/shijing.json

    - 观影:
        - 推荐的番剧: relax/Movie/tuijianfanju.md
        - 推荐的电影: relax/Movie/tuijiandedianyin.md
        - 推荐的电视剧: relax/Movie/tuijiandsj.md

    - 杂文:
        - 《目送》节选: relax/Essay/musong.md
        - 大学一个人吃饭很丢人吗？: relax/Essay/dx.md
        - luv letter: relax/Essay/luv letter.md
        - 有哪些给男孩子在谈恋爱时的忠告？: relax/Essay/zhonggao.md
        - 哈基米🐈: relax/Essay/cat.md
    - 程序人生:
        - 《程序员成长历程的四个阶段》: relax/Manong/sigejieduan.md
        - 《程序员脱单指南》: relax/Manong/tuodanbukeneng.md
        - 《程序员学习路线图》: relax/Manong/wtf.md
        - 《printf("❤️\n》: relax/Manong/cxiaoaixin.md
    - 写信:
        - 第一封: relax/Letter/letter1.md
        - 第二封: relax/Letter/letter2.md
        - 情书:
            -   朱生豪与宋清如: relax/Letter/luvletter/sqrzszyz.md
            - 《朱生豪情书全集摘录》(021): relax/Letter/luvletter/zhushenghao1.md
            - 《朱生豪情书全集摘录》(031): relax/Letter/luvletter/zhushenghao2.md
            - 《朱生豪情书全集摘录》(036): relax/Letter/luvletter/zhushenghao3.md
            - 《朱生豪情书全集摘录》(046): relax/Letter/luvletter/zhushenghao4.md
            - 《朱生豪情书全集摘录》(053): relax/Letter/luvletter/zhushenghao5.md
            - 《朱生豪情书全集摘录》(055): relax/Letter/luvletter/zhushenghao6.md


    # - Music:
    #     - shape of you: relax/Music/soy.md
    #     - Floating: relax/Music/Floating.md
    #     - 朱砂: relax/Music/zhusha.md
    #     - 关于郑州的记忆: relax/Music/gyzzdjy.md
    #     - 若把你: relax/Music/rbn.md
    #     - 絶頂讃歌: relax/Music/jdzg.md
    - Game:
        - 原神: relax/Game/yuanshen.md
        - 如何玩好《王者荣耀》？: relax/Game/wzry.md
    - 入党结业考试题总结: relax/rudang.md
    - 润学之为什么润: about/run.md
    - 让人说话，天塌不下来: about/maozedong.md
    - 关于教育革命的谈话: relax/jiaoyu.md
    - 程序猿神之楷模:一个人,一个网站,5.75亿美元卖掉: relax/kaimo.md

  - 旅行: 
    # - trip/index.md
    - 重庆: 
        - 重庆旅游推荐路线: trip/InCQ/CQ.md
    - Hometown: trip/LH.md
    - 西安: trip/Xian.md

  - 标签: tag.md
  - 留言板: waline.md
  - 友链: 
    - 友链: about/link.md
    - 如何给MKdocs添加友链: blog/Mkdocs/linktech.md
  - Blogger:
    - index: blog/index.md
    # - wkw: blog/posts/wkw.md
    # - 我的一些见解: blog/posts/post1.md
    # - Lifecycle: blog/posts/post2.md  
  - 关于:
    - 个人简介: about/geren.md
    - 个人简历: about/个人简历2.pdf
    - My Goal: about/goal.md
    - Github主页介绍: about/Wcowin.md
    - 网站制作: about/web.md
    - 支持作者: about/zcw.md

    - 毕业之前值得去做的30件事: about/biye.md
    - 免责声明: about/shengming.md
    - Test: about/test.md
    - 404公益页面: about/404.md
    - For lover: about/Foryou.md



copyright: Copyright &copy; 2022~2023 Wcowin/All Rights Reserved. # 左下角的版权声明


extra:
  generator: true  #删除页脚显示“使用 MkDocs 材料制造”
  social:
    - icon: fontawesome/brands/x-twitter 
      link: https://twitter.com/wcowin_
    - icon: fontawesome/brands/github
      link: https://github.com/Wcowin

    - icon: fontawesome/regular/envelope
      link: mailto:<wangkewen821@gmail.com> #联系方式
    - icon: fontawesome/brands/bilibili
      link: https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0
  analytics: 
    provider: google
    property: G-29HZMNR0KG
    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:
  # - glightbox
  - search
  - blog:
      post_date_format: full #时间
      draft: true
      draft_if_future_date: true #自动将具有未来日期的帖子标记为草稿
      post_readtime: true
      post_readtime_words_per_minute: 265  #计算帖子的阅读时间时读者每分钟预计阅读的字数
      post_url_format: "{date}/{slug}"
      categories_slugify: !!python/object/apply:pymdownx.slugs.slugify
        kwds:
          case: lower
      # categories_toc: true
      # pagination_per_page: 5
      pagination_url_format: "page/{page}"
      authors_file: "{blog}/.authors.yml"  #作者信息
  - tags:
      tags_file: tag.md  #分类标签



markdown_extensions:
  - abbr
  - attr_list
  - admonition
  - def_list
  - footnotes
  - md_in_html
  # - meta # 支持Markdown文件上方自定义标题标签等
  - pymdownx.caret
  - pymdownx.betterem
  - pymdownx.critic
  - pymdownx.details
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.snippets
  - pymdownx.smartsymbols
  - pymdownx.tilde
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format # 代码块高亮插件
  - pymdownx.arithmatex:  # latex支持
      generic: true
  - toc:
      permalink: true # 固定标题位置为当前位置
  - pymdownx.highlight: # 代码块高亮
      anchor_linenums: true
      linenums: true # 显示行号
      # auto_title: true # 显示编程语言名称
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  - markdown.extensions.toc:
      slugify: !!python/object/apply:pymdownx.slugs.slugify {kwds: {case: lower}}
      permalink: "\ue157"

extra_javascript:
  - javascripts/extra.js
  # - https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/extra.js  # extra的cdn
  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
  # - javascripts/mathjax-config.js
  # - https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML


  - https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js
  # - ckplayer/js/ckplayer.js
  # - https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js
  # - javascripts/backbound1.js
  # - javascripts/rellax.min.js
  - https://cdn.jsdelivr.net/npm/mermaid@10.0.2/dist/add-html-label-6e56ed67.min.js
  # - https://res.zvo.cn/translate/translate.js  # Translate

extra_css:
  - stylesheets/extra.css
  - stylesheets/link.css
  # - https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/extra.css # extra.css的CDN
  # - stylesheets/extra1.css
  # - stylesheets/video.css
  - https://unpkg.com/@waline/client@v2/dist/waline.css
  - https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.css
  - ckplayer/css/ckplayer.css
  - https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css
  # - https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css
  - https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css  #字体
  # - https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css
  # - https://cdn.jsdelivr.net/npm/lxgw-wenkai-tc-webfont@1.0.0/style.css
  # - https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css

# crisp
# https://crisp.chat/en/
# crisp:
#   enable: true
#   website_id: 89ded6c2-1a10-47e3-af5d-f12e6a378547

# tidio:
#   enable: true
#   public_key: w3nvk9wmckvjf2iity4bwxicoj4yss9l

从头开始分析

开头

1
2
3
site_name: 网站名字
site_url: 网站网址
site_author: 作者名字
无须多言

theme部分

颜色

img 

1
2
3
theme:
  palette:
    primary: yellow #顶部颜色
primary后面是网站顶部栏目的颜色（也用于标题、边栏、文本链接和其他几个组件），目前支持下面几个颜色： img

明暗主题按钮

img 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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后面的代码）： img

features

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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部分让网站拥有了目录，增加了搜索项目的功能，返回顶部等功能，注释里很简明介绍了 img img img img

这一部分就是目录 img 

1
2
3
4
5
nav: 
  - 博客:
    - 好用/好玩网站分享: blog/Webplay.md  #.md文件的相对路径
  - 开发: 
    - Markdown: develop/markdown.md
依照上面的模版为例，你可以建立博客和开发两个大标签，里面的内容： 
1
- 内容标题: 文件路径
内容标题效果： img

.md文件路径(相对路径)： img

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

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

到这里先检查一下文件树状图(xx.md代表你的md文件)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
$ tree -a
.
├── .github
│   ├── .DS_Store
│   └── workflows
│       └── PublishMySite.yml
├── docs
│   └── index.md
|   |___ xx.md
|
└── mkdocs.yml

extra部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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后填自己链接即可）： img

cookie 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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来识别您的重复访问和偏好来衡量我们文档的有效性以及用户是否找到他们要找的东西。
      如果你同意,你可以帮助我们让我们的网站更好
img
img img 注意property: G-XXXXXXXXXX #你的Google Analytics ID，这里的G-XXXXXXXXXX是你的Google Analytics ID，你可以在Google Analytics中找到，如果你不想使用Google Analytics，可以删除这一部分。

Plugins部分

1
2
3
plugins:
  - search
  - tags  #标签

- search开启搜索功能 img

- tags就是标签 

1
2
3
plugins:
  - tags:
      tags_file: tag.md  #分类标签
img docs文件夹下新建tags.md文件，会自动在tags.md文件中生成标签列表 但是每个.md文件最开始的地方都需要添加标签，否则不会显示在tags.md文件中 img 格式：

1
2
3
4
5
6
7
8
---
title: 
tags:
  - 你的标签名字
hide:
  #- navigation # 显示右侧导航
  #- toc #显示左侧导航
---

markdown_extensions部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
markdown_extensions:
  - abbr
  - attr_list
  - admonition
  - def_list
  - footnotes
  - md_in_html
  # - meta # 支持Markdown文件上方自定义标题标签等
  - pymdownx.caret
  - pymdownx.betterem
  - pymdownx.critic
  - pymdownx.details
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.snippets
  - pymdownx.smartsymbols
  - pymdownx.tilde
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format # 代码块高亮插件
  - pymdownx.arithmatex:  # latex支持
      generic: true
  - toc:
      permalink: true # 固定标题位置为当前位置
  - pymdownx.highlight: # 代码块高亮
      anchor_linenums: true
      linenums: true # 显示行号
      # auto_title: true # 显示编程语言名称
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  - markdown.extensions.toc:
      slugify: !!python/object/apply:pymdownx.slugs.slugify {kwds: {case: lower}}
      permalink: "\ue157"
这部分是对markdown语法的扩展，注释里也有简述 ，建议直接复制粘贴

extra_javascript 和extra_css

1
2
3
4
5
6
7
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的知识了，及自定义网站格式颜色等

如果你想自定义网站的样式，可以看这几篇文章：

JS实现鼠标样式

背景特效

自定义网站字体