记录mkdocs+yeti生成页面左侧导航（sidebar）添加滚动条(scroll bar)方法

1.写在前面

mkdocs根据markdown文章和配置的主题生成静态页面有一种规整的美，在制作静态页面或网站时候是很好的选择。

博主使用mkdocs + yeti自定义主题生成静态页面，发现左侧导航栏（sidebar）没有滚动条，而恰好文章标题很多，导致看不全。

网上也有类似问题的：Sidebar does not have a scroll bar if it is too long · Issue #2780 · mkdocs/mkdocs · GitHub

2.解决方案

在yeti\css目录下找到base.css，用编辑器（如VS Code）打开。

找到如下图代码，添加height和overflow-y键值对即可。

.bs-sidebar.affix {position: fixed; /* Undo the static from mobile first approach *//*top: 80px;*/height: calc(100% - 100px);overflow-y: auto;
}

然后运行mkdocs命令编译和启动服务查看效果，

mkdocs build
mkdocs serve

 3.效果

如图所示，左侧导航栏有竖向滚动条了。

4.写在后面

 当然也可以使用mkdocs或第三方的主题，有很多丰富的主题可以选择。

如：https://github.com/cjsheets/mkdocs-rtd-dropdown

Installation - Material for MkDocs

在这里可以看到更多主题信息，

Choosing Your Theme - MkDocs

第三方主题 - MkDocs 文档

其他参考文章：

yeti：Customization | Yeti

MkDocs 目录结构与配置指南-CSDN博客

Mkdocs配置文件说明(mkdocs.yml)-CSDN博客