代码块折叠设置

设置代码块折叠的步骤

第一步

/hexo/script/tags文件目录下,新建fold_tag.js:

1
2
3
4
5
6
7
8
/* global hexo */
// Usage: {% fold 点击显/隐内容 %} Something {% endfold %}
function fold (args, content) {
var text = args[0];
if(!text) text = "点击显/隐";
return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

第二步

/hexo/source/js/新建fold_action.js

1
2
3
4
5
6
7
8
$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display","none");
});

第三步

/hexo/source/_data/body-end.swig添加:

1
2
{# 代码压缩 #}
<script type="text/javascript" src="/js/fold_action.js"></script>

第四步

/hexo/source/_data/styles添加:

1
2
3
4
5
6
7
8
9
10
11
// 代码折叠功能添加
.hider_title{
cursor: pointer;
color: #ef4a05;
}
.close:before{
content: "▼";
}
.open:before{
content: "▲";
}

使用方法

1
2
3
{% fold 点击显/隐内容 %}
something you want to fold, include code block.
{% endfold %}

显示效果:

点击显/隐内容

something you want to fold, include code block.

参考


----本文结束啦感谢您阅读----

欢迎关注我的其它发布渠道