hexo博客配置-代码块折叠

本文所用的架构或思路参考该文：hexo博客配置-主题管理与配置

添加代码块折叠功能

先建立hexo-theme-next/scripts/custom/fold_tag.js，

fold_tag.jsview raw

//ledong代码折叠功能添加: https://blog.rmiao.top/hexo-fold-block/

/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
    var text = args[0];
    if(!text) text = "点击显/隐";
    var str1 = '<div class="fold_hider"><div class="close hider_title"><span style="color:gray;font-size:12px">' + text + '</span></div></div>'
    var str2 = '<div class="fold">\n'+ hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div>'
    return '<div style="margin-top: -20px;">'+ str1 +str2 + str1+ '</div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

还有hexo-theme-next/source/custom/fold_action.js文件，

fold_action.jsview raw

//ledong代码折叠功能添加: https://blog.rmiao.top/hexo-fold-block/

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

然后创建文件hexo-theme-next/layout/_custom/post-details.swig如下

{# hexo-theme-next/layout/_custom/post-details.swig
add to: themes/hexo-theme-next/layout/_scripts/pages/post-details.swig
#}
<script type="text/javascript" src="{{ url_for(theme.custom) }}/fold_action.js?v={{ version }}"></script>

并在themes/hexo-theme-next/layout/_scripts/pages/post-details.swig的末尾加上：

{% include '../../_custom/post-details.swig' %}

注意：还需修改主题下的_config.yml如下，即加入"custom: custom"(其实是配置了source目录下的文件夹).

# Assets
css: css
js: js
images: images
custom: custom

最后，修改hexo-theme-next/source/css/_custom/custom.styl配置风格：

//ledong代码折叠功能添加: https://www.cnblogs.com/woshimrf/p/hexo-fold-block.html
.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:before{
    content: "▼";
}
.open:before{
    content: "▲";
}
.post-body div.fold_hider { margin-left: 1.5em}
.post-body div.fold { margin-top: -15px}

使用方法

{% fold 点击显/隐内容 %}
somthing...
{% endfold %}

修复自建tag里写代码块，渲染成undefined的问题

参考该文：hexo博客配置-自建标签Bug解决方案

只需添加文件hexo-theme-next/scripts/custom/debugCustom.js如下

debugCustom.jsview raw

//ledong修复自建tag里写 ```代码块```，渲染成 undefined 的问题: 
// https://www.oyohyee.com/post/Note/hexo_tag/
/*
  @haohuawu
  修复 Nunjucks 的 tag 里写 ```代码块```，最终都会渲染成 undefined 的问题
  https://github.com/hexojs/hexo/issues/2400
*/
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

局限

• 不能如此嵌套使用（但可嵌套正常代码块），待改进

{% fold 点击显/隐内容 %}
{% include_code [title] [lang:language] path/to/file %}
{% endfold %}

参考

参考1：Hexo添加代码块折叠

参考2：Hexo自建标签渲染代码段Bug解决方案