zoukankan      html  css  js  c++  java
  • 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(?:[^>]*)>([sS]*?)</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">
    ' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '
    </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

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/woshimrf/p/hexo-fold-block.html
Copyright © 2011-2022 走看看