对于上个月Hugo NexT最新的V4.7.2版本发布后，便是收到了不少用户使用的反馈，其中一点便是与代码块显示需要折叠的问题 Issues#168 。这点对于那些程序“猿”的博友们来说，或多或少是要在文章中嵌入大量的代码块，以便给读者展示具体功能实现过程。如果此时的代码块的篇幅比较大，那么文章里的其他非代码块的信息显示会被撑到很下面，对于读者的阅读体验就不那么的友好。这算是个比较普遍通用的需求，加上代码块在显示也有些重叠覆盖的问题，便打算是尽早的把它们给修复好。

增加默认高度

参考了下网友提供的PaperMod主题示例，分析下其实现的过程原理发现比较简单，只需要调整CSS样式中的max-height参数，通过它来控制代码块的收缩或是展开。突然间就把格局打开啦，于是便开始动手修改主题中的CSS文件，给代码块的DOM增加个相应的参数。同时将垂直方向的滚动条设置会自动格式，便会在高度超过最大高度限定时，以滚动条进行滑动显示。

调整代码块位置

另外发现有些用户代码块较多且显示的代码过长时，代码块的显示会撑出文章本身的高度，导致其他内容被遮掩无法显示，而且整个页面看起来也是错乱无序的。尝试后发现是代码块的position属性设置有问题，需要将其调整为relative，同时需要将这个position参数设置到代码块的父层元素，才能确保长代码内容撑出代码块范围影响到文章其它内容显示。

增加默认最大高度

考虑到主题配置的灵活性满足不同用户对于代码块显示需求，在配置文件中增加maxHeight参数，默认值是200px，用户可根据自己的需求进行调整。同时对于小于默认高度的代码块移除收缩的点击事件，只保留超过默认高度代码块的收缩展开事件。