admin管理员组文章数量:1443955
修复代码块默认高度相关缺陷
总结摘要
对于开发者的博客而言，避免不了会有不少代码示例或展示的区域，只是在文章中如果是有很多的代码块显示，那还是会影响到读者的阅读检验。参考了PaperMod主题对于代码块的做法，给HugoNexT主题中的代码块增加默认高度，并修复了其他与代码块中显示异常的问题。
对于上个月Hugo NexT最新的V4.7.2版本发布后，便是收到了不少用户使用的反馈，其中一点便是与代码块显示需要折叠的问题 Issues#168 。这点对于那些程序“猿”的博友们来说，或多或少是要在文章中嵌入大量的代码块，以便给读者展示具体功能实现过程。如果此时的代码块的篇幅比较大，那么文章里的其他非代码块的信息显示会被撑到很下面，对于读者的阅读体验就不那么的友好。这算是个比较普遍通用的需求，加上代码块在显示也有些重叠覆盖的问题，便打算是尽早的把它们给修复好。
增加默认高度
参考了下网友提供的PaperMod主题示例，分析下其实现的过程原理发现比较简单，只需要调整CSS样式中的max-height参数，通过它来控制代码块的收缩或是展开。突然间就把格局打开啦，于是便开始动手修改主题中的CSS文件，给代码块的DOM增加个相应的参数。同时将垂直方向的滚动条设置会自动格式，便会在高度超过最大高度限定时，以滚动条进行滑动显示。
调整代码块位置
另外发现有些用户代码块较多且显示的代码过长时，代码块的显示会撑出文章本身的高度，导致其他内容被遮掩无法显示，而且整个页面看起来也是错乱无序的。尝试后发现是代码块的position属性设置有问题，需要将其调整为relative，同时需要将这个position参数设置到代码块的父层元素，才能确保长代码内容撑出代码块范围影响到文章其它内容显示。
增加默认最大高度
考虑到主题配置的灵活性满足不同用户对于代码块显示需求，在配置文件中增加maxHeight参数，默认值是200px，用户可根据自己的需求进行调整。同时对于小于默认高度的代码块移除收缩的点击事件，只保留超过默认高度代码块的收缩展开事件。
信息
后来在代码调整完成后反思了下，其实PaperMod主题的做法是正确的，尤其当文章中的代码块较多且长时，如果默认都是展开显示的话，文章内容就会被撑得很长，影响阅读体验。有了这个默认高度的设置后，可在阅读代码块的时候选择是否以展开全部。
本文标签： 修复代码块默认高度相关缺陷
版权声明：本文标题：修复代码块默认高度相关缺陷 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1748169667a2820507.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论