WangQiFei

蒸 馏 器


思想提纯
  • 首页
  • 归档
  • 标签
  • 关于
  •     

© 2024  by  Wangqifei

hexo代码折叠的实现方案

发布于 2024-04-05 18:04 hexo 

hexo没有代码折叠，导致长代码在插入以后阅读体现非常糟糕，网站改版以后这个现象尤其明显。简单搜了以下，没有发现特别满意的解决方案，只好自己动手来解决。

实现思路

  • 通过js来对页面dom操作，提取figure.highlight套上两个div容器；
  • 使用js添加显示和隐藏按钮，并加入滚动；
  • 对代码块和增加的按钮写个css

code-unfold.js

在主题/source/js/创建code-unfold.js，内容如下：

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
console.log('脚本启动');

var CODE_MAX_HEIGHT = 200;
console.log('CODE_MAX_HEIGHT:', CODE_MAX_HEIGHT);

var containers = [];
console.log('初始化containers数组');

// 展开
$('body').on('click', '.js_unfold_code_btn', function () {

  $(this).closest('.js_highlight_container').addClass('on');
});

// 收起  
$('body').on('click', '.js_retract_code_btn', function () {
  var $container = $(this).closest('.js_highlight_container').removeClass('on');
  var winTop = $(window).scrollTop();
  var offsetTop = $container.offset().top;

  $(this).css('top', 0);

  if (winTop > offsetTop) {

    // 滚动函数
    $('body, html').animate({
      scrollTop: $container.offset().top - CODE_MAX_HEIGHT
    }, 600);
  }

});

// 滚动事件
$(window).on('scroll', function() {

  var temp = []; // 定义temp
  var scrollTop = $(window).scrollTop();


  // 循环容器数组
  for(let i = 0; i < containers.length; i++) {

    var item = containers[i];
    var { $container, height, $hide, hasHorizontalScrollbar } = item;
    if ($container.closest('body').length === 0) {
      continue;
  }
   temp.push(item);
    if (!$container.hasClass('on')) {
      continue;
    }
  var offsetTop = $container.offset().top;
  var hideBtnHeight = $hide.outerHeight();
  var maxTop = parseInt(height - (hasHorizontalScrollbar ? 17 : 0) - hideBtnHeight);
  let top = parseInt(
    Math.min(
      Math.max(scrollTop - offsetTop, 0), // 如果小于 0 ，则取 0
      maxTop,// 如果大于 height ，则取 height
    )
  );
  var halfHeight = parseInt($(window).height() / 2 * Math.sin((top / maxTop) * 90 * (2 * Math.PI/360)));
  $hide.css('top', Math.min(top + halfHeight, maxTop));
}
  containers = temp;
  console.log('更新容器数组:', containers);

});

function addCodeWrap($node) {

  console.log('添加代码容器');
  var $container = $node.wrap('<div class="js_highlight_container highlight-container"><div class="highlight-wrap"></div></div>').closest('.js_highlight_container');

  var $btn = $(`
  <div class="highlight-footer">
    <a class="js_unfold_code_btn show-btn" href="javascript:;">展开代码<i class="fa fa-angle-down" aria-hidden="true"></i></a>
  </div>
  <a class="js_retract_code_btn hide-btn" href="javascript:;"><i class="fa fa-angle-up" aria-hidden="true"></i>收起代码</a>
  `);

  $container.append($btn);

  return $container;

}

function codeUnfold() {
  console.log('初始化代码块');
  $('.highlight').each(function() {
  // 防止重复渲染
  if (this.__render__ === true) {
    return true;
  }
  this.__render__ = true;
  var $this = $(this);
  var height = $(this).outerHeight();
  if (height > CODE_MAX_HEIGHT) {
    // 添加展开&收起容器
    var $container = addCodeWrap($this, height);
    containers.push({
      $container,
      height,
      $hide: $container.find('.js_retract_code_btn'),
      hasHorizontalScrollbar: this.scrollWidth > this.offsetWidth,
    });
  }
});
};
codeUnfold();

highlight.css

在主题/source/css/下创建highlight.css,具体内容入下，根据自己需要修改样式：

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.highlight-container {
  position: relative;
}
.highlight-container.on .highlight-footer {
  display: none;
}
.highlight-container.on .hide-btn {
  display: flex;
}
.highlight-container.on .highlight-wrap {
  max-height: none;
}
.highlight-container .highlight-wrap {
  overflow: hidden;
  max-height: 200px;
}
.highlight-container .highlight-footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 60px;
  background-image: linear-gradient(-180deg, rgba(255,255,255,0) 0%, highlight-background 65%);
  text-align: center;
}
.highlight-container .show-btn {
  font-size: 12px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  line-height: 2em;
  text-decoration: none;
  padding: 0 0.8em;
  text-align: center;
  border-radius: 4px 4px 0;
}
.highlight-container .show-btn:hover {
  text-decoration: none;
}
.highlight-container .hide-btn {
  color: #fff;
  font-size: 12px;
  width: 22px;
  position: absolute;
  left: -21px;
  top: 0;
  line-height: 1em;
  text-decoration: none;
  text-align: center;
  display: none;
  flex-direction: column;
  background-color: highlight-background;
  border-radius: 4px 0 0 4px;
  padding: 0.1em 0 0.6em;
  transition: top ease 0.35s;
}
.highlight-container .fa-angle-up,
.highlight-container .fa-angle-down {
  font-style: normal;
  color: #fff;
}
.highlight-container .fa-angle-up:before {
  content: "\f106";
}
.highlight-container .fa-angle-down:before {
  content: "\f107";
  margin-left: 0.5em;
}
.highlight-container .js_unfold_code_btn,
.highlight-container .js_retract_code_btn {
  background: rgba(0,0,0,0.5);
  border-bottom: none !important;
}
.highlight-container .js_unfold_code_btn:hover,
.highlight-container .js_retract_code_btn:hover {
  border-bottom-color: none !important;
}
.highlight-container +blockquote {
  margin-top: 0.5em;
}

配置

需要将js和css文件引入到页面中，这里需要在主题/layout/paritial/修改head.pug和layout.pug分别加入css和js的引用。

 上一篇: 免费的都是产品,付费的才是用户 

下一篇: ios 捷径实现自动打卡的终极解决方案 

© 2024  by  Wangqifei