Hugo代码块折叠

严格来说不算折叠，只是限制了代码块最大高度，不过效果还不错。

步骤

以下均在博客站点根目录操作。

css控制布局

首先新增一个code.css到assets/css/extended/code.css，作用是通过css限制代码块最大高度，可根据博客布局自己调整。

1

nano assets/css/extended/code.css

内容：

1
2
3
4

.post-content pre code {
    max-height: 52em; /* 设置代码块的最大高度为父元素字体大小的xx倍 */
    overflow: auto; /* 当代码块内容超出最大高度时，显示滚动条 */
}

js实现同步滚动

但是这样会出现一个问题，滚动查看代码块时，代码块滚动但是行号没有同步滚动，需要添加js代码使其同步滚动。

1
2

cp themes/PaperMod/layouts/partials/extend_footer.html layouts/partials/
nano layouts/partials/extend_footer.html

内容：

在某次更新后行号定位失效了，不打算维护，使用collapse短代码替代。 
 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

{{- /* Footer custom content area start */ -}}
{{- /* Insert any custom code web-analytics, resources, etc. here */ -}}
{{- /* Footer custom content area end */ -}}

{{- if (and (eq .Kind "page") (ne .Layout "archives") (ne .Layout "search") (.Param "ShowCodeCopyButtons")) }}
<script>
// 实现代码块和行号同步滚动。
// 在页面加载完毕后匹配出代码块和行号对应的容器并绑定滚动事件
window.addEventListener('load', function () {
  // 获取代码块容器和行号容器的元素
  var codeContainers = document.querySelectorAll('.highlight code[class^="language-"]');
  var lineNumbersContainers = document.querySelectorAll('.highlight code[class^="hljs "]');

  // 添加滚动事件监听器
  var isScrollSyncing = false; // 标志位，指示是否正在进行滚动同步操作

  codeContainers.forEach(function (container, index) {
    container.addEventListener('scroll', function () {
      if (!isScrollSyncing) {
        isScrollSyncing = true;
        // 将行号容器的滚动位置设置为相同的值
        lineNumbersContainers[index].scrollTop = container.scrollTop;
        isScrollSyncing = false;
      }
    });
  });

  lineNumbersContainers.forEach(function (container, index) {
    container.addEventListener('scroll', function () {
      if (!isScrollSyncing) {
        isScrollSyncing = true;
        // 将代码块容器的滚动位置设置为相同的值
        codeContainers[index].scrollTop = container.scrollTop;
        isScrollSyncing = false;
      }
    });
  });
});
</script>
{{- end }}

补充

得益于Hugo的拓展性和PaperMod主题提供的拓展接口，很轻松就能实现丰富的效果。

我也重温了下前端的写法还被迫Debug调试无法同步滚动的问题。前端就是这点好，所见即所得，有个浏览器就不需要配环境了，哈哈。

最后感谢素履大佬的博客提供的思路，参见Git for Sulv’s Blog。

引用