设置博客折叠代码

发表于 更新于 分类于 阅读次数： Changyan：

有些时候经常会遇到博客中很长的代码段，占据半个甚至整个屏幕，此时就非常需要将代码段进行折叠，以此来缓解代码块影响阅读的问题。

配置走起！

配置步骤

  1. 取消注释

打开themes\next\_config.yml文件。
CTRL+F查找关键字“custom_file_path”(如果你使用的是VS-CODE编辑器)。
取消bodyEnd: source/_data/body-end.njk注释和style: source/_data/styles.styl注释。

折叠代码
1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.swig
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl
  1. 按照style的路径和bodyEnd的路径添加相应的文件，如果当前不存在此文件的话。如果已经存在的话，添加以下配置。
  • 首先添加bodyEnd文件的内容
折叠代码
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
41
42
43
44
45
46
47
48
49
50
51
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // 查找所有 div.table-container 元素
    const tableContainers = document.querySelectorAll(".table-container");

    // 遍历所有 div.table-container 元素
    tableContainers.forEach(function(tableContainer) {
      // 获取 div.table-container 内的 span 元素数量
      const spanCount = tableContainer.querySelectorAll("tbody > tr > td.code > pre > span").length;

      // 检查 span 元素数量是否 >= 11
      if (spanCount >= 11) {
        // 检查 div.table-container 前面是否有 figcaption 元素，如果没有则添加一个
        const prevElement = tableContainer.previousElementSibling;
        let figcaption;
        let iElement;
        if (!prevElement || prevElement.tagName.toLowerCase() !== "figcaption") {
          // 在 div.table-container 前插入一个 figcaption 元素
          figcaption = document.createElement("figcaption");

          // 将 figcaption 插入到 DOM 中
          tableContainer.parentNode.insertBefore(figcaption, tableContainer);
        } else {
          figcaption = prevElement;
        }

        // 创建一个 <i> 标签并添加功能
        iElement = document.createElement("i");
        iElement.className = "fas fa-angle-down";
        // 插入一点空格
        iElement.innerHTML = "&nbsp;&nbsp;&nbsp;";
        figcaption.insertBefore(iElement, figcaption.firstChild);

        // 为 <i> 标签添加点击事件
        iElement.addEventListener("click", function() {
          // 切换 tableContainer 的 "code-hidden" 类
          tableContainer.classList.toggle("code-hidden");

          // 切换 <i> 标签的类名
          if (iElement.classList.contains("fa-angle-down")) {
            iElement.classList.remove("fa-angle-down");
            iElement.classList.add("fa-angle-right");
          } else {
            iElement.classList.remove("fa-angle-right");
            iElement.classList.add("fa-angle-down");
          }
        });
      }
    });
  });
</script>

PS：在代码的第11行，可以按照自己的需要进行设置，当代码超过多少行时，折叠代码的JS生效。

  • 然后修改style文件内容，在文件的末尾添加：
1
2
3
4
/* 代码块隐藏 */
.code-hidden {
    display: none;
}
  • 使用案例
1
2
3
```bash 折叠代码
/* some code */
```

完成的效果就像添加JS代码的代码块一样。

补充

已经取消注释的文件对应的功能和教程链接。

文件 功能
footer 背景”小飞棍”
bodyEnd 折叠代码
variable 设置圆角
style 背景图片、博客透明度、折叠代码