想把leetcode刷题记录放在博客上,但是博客弄得比较花哨,不适合放这种过于严肃的东西🤠。在网上浏览看到了这位大佬的博客——SMSLIT,使用了mkdocs来管理,看起来条理清晰,简单大方。于是我也准备搭建自己的mkdocs。

1. 下载mkdocs

打开命令行,使用pip下载mkdocs(pip下载速度慢的可以看我这篇文章——Windows下给pip换为国内源)

没有安装python的小伙伴自行搜索一下哈,很简单,这里就不多赘述了。

1
pip install mkdocs

查看版本,如下图说明安装成功

2. 新建MyDocs

使用命令

1
mkdocs new MyDocs

新建MyDocs。

类似于Hugo、Hexo静态博客,切换进MyDocs文件夹,目录结构如下

- docs
mkdocs.yml

其中mkdocs.yml是配置文件,docs是放文档的目录。

3. 在本地启动mkdocs

1
mkdocs serve

注意是serve不是server!!!

在本地启动mkdocs

即在localhost:8000即可看到新建的mkdocs。

4. 修改主题

在这里选择自己心仪的主题——MkDocs Theme.

我选的是MkDocs Bootstrap Theme

使用pip进行安装

1
pip install mkdocs-bootswatch

安装后在配置文件中添加一句即可切换主题

1
theme: flatly

5. 设置子目录

配置文件当中这样写

1
2
3
4
nav:
- 简介: index.md
- about:
- 'hey': 'hey.md'

6. Markdown扩展

这个主题的官方文档里没有具体说明,直接写文章的话有些markdown语法它识别不出来。我找了半天👀,发现Material for MkDocs主题中介绍了pydown,所以我就直接把这个配置拿过来了,使用Bootstrap主题也可以正常使用。

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
markdown_extensions:
- admonition
- codehilite:
guess_lang: false
linenums: false
- toc:
permalink: true
- footnotes
- meta
- def_list
- pymdownx.arithmatex
- pymdownx.betterem:
smart_enable: all
- pymdownx.caret
- pymdownx.critic
- pymdownx.details
- pymdownx.emoji:
emoji_generator: !!python/name:pymdownx.emoji.to_png
- pymdownx.inlinehilite
- pymdownx.magiclink
- pymdownx.mark
- pymdownx.smartsymbols
- pymdownx.superfences
- pymdownx.tasklist
- pymdownx.tilde

7. 设置网页图标

在docs目录下新建img文件夹,把图片文件放置在img文件夹下,并命名为favicon.ico即可。

换完之后清理一下浏览器缓存,否则看到的还是之前的图标。

更详细的配置请参考官方文档呀——MkDocs

8. 部署到Gitee Pages

和Hugo博客一样,输入命令

1
mkdocs build

会在MyDocs目录下生成site文件夹,把这个文件夹推送到Gitee仓库并启用Gitee Pages服务就好啦

9. 增加LaTeX公式识别

2020.5.31补,想要使mkdocs的markdown能够识别LaTeX公式,需要在mkdocs.yml添加js

1
2
extra_javascript:
- https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML

10. 参考