代码块折叠设置

设置代码块折叠的步骤

第一步

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

/* 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

$(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添加：

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

第四步

/hexo/source/_data/styles添加：

// 代码折叠功能添加
.hider_title{
    cursor: pointer;
    color: #ef4a05;
}
.close:before{
    content: "▼";
}
.open:before{
    content: "▲";
}

使用方法

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

显示效果：

something you want to fold, include code block.

参考

• 小丁的博客