Hexo next博客添加折疊塊功能添加折疊代碼塊

前言

有大段的東西想要放上去，但又不想占據大量的位置。折疊是最好的選擇。下面在Hexo的主題上定制添加折疊功能。

本文基於Hexo Next的主題修改。其他主題應該也差不多。效果如下：https://blog.rmiao.top/hexo-fold-block/

在main.js中添加折疊js

next主題的主要js位於themes/next/source/js/src/post-details.js,
在里面找合適的位置，添加如下代碼：

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

自定義內建標簽

在主題scripts下添加一個tags.js, 位於themes/next/scripts/tags.js

/*
  @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.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});

最后，添加幾個自定義樣式，位置themes/next/source/css/_custom/custom.styl

.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

最后，在我們需要折疊的地方前后添加便簽，示例用法：

{% fold 點擊顯/隱內容 %}
something you want to fold, include code block.
{% endfold %}

參考

https://www.oyohyee.com/post/Note/fold.html