Hugo代码块折叠
严格来说不算折叠,只是限制了代码块最大高度,不过效果还不错。
步骤
以下均在博客站点根目录操作。
css
控制布局
首先新增一个code.css
到assets/css/extended/code.css
,作用是通过css
限制代码块最大高度,可根据博客布局自己调整。
|
|
内容:
|
|
js
实现同步滚动
但是这样会出现一个问题,滚动查看代码块时,代码块滚动但是行号没有同步滚动,需要添加js
代码使其同步滚动。
|
|
内容:
在某次更新后行号定位失效了,不打算维护,使用
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。