Hexo next博客添加折叠块功能添加折叠代码块-白红宇

前言

有大段的东西想要放上去，但又不想占据大量的位置。折叠是最好的选择。下面在Hexo的主题上定制添加折叠功能。

本文基于Hexo Next的主题修改。其他主题应该也差不多。效果如下：

在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 = /
     
      ]*)>([\s\S]*?)<\/escape>/g;const placeholder = '\uFFFD';const rPlaceholder = /(?:<|<)\!--\uFFFD(\d+)--(?:>|>)/g;const cache = [];function escapeContent(str) {
       return '
      ';}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 '
     
      
       
        ' + text + '
       
      
      
       \n' + hexo.render.renderSync({
     text: content, engine: 'markdown'}) + '\n
      
     
';}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 %}

本文转自Ryan.Miao博客园博客，原文链接：http://www.cnblogs.com/woshimrf/p/hexo-fold-block.html，如需转载请自行联系原作者