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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据科学与人工智能

【Python环境】Python爬虫入门(2):爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

2479

教你快速安装OpenShift容器平台3.6

自OpenShift容器平台(OCP)发布以来,我一直希望提供一个简单、完整且易用的安装教程。

21210
来自专栏一名合格java开发的自我修养

HTTP协议下保证密码不被获取更健壮方式

说到在http协议下用户登录如何保证密码安全这个问题:     小白可能第一想法就是,用户在登录页面输入密码进行登录时,前台页面对用户输入的密码进行加密,然后把...

712
来自专栏无原型不设计

如何避免设计出“烦人”的登录和注册页面

往往当用户想要在某一个网站或APP上登录或注册一个账号时,登录和注册页面就显得尤为重要。登录或者注册表单是网页和APP设计中最重要的元素之一,所以在设计网站和...

3398
来自专栏AI研习社

用GPU加速深度学习: Windows安装CUDA+TensorFlow教程

背景 在Windows上使用GPU进行深度学习一直都不是主流,我们一般都首选Linux作为深度学习操作系统。但很多朋友如果只是想要了解深度学习,似乎没有必要...

5554
来自专栏程序人生

谈谈用户权限系统

登录这事之于一个需要识别用户身份的产品,就仿佛cs101之于computer science。感谢各种语言里各种优秀的登录模块(比如nodejs的passpor...

2684
来自专栏Zchannel

用GPU加速深度学习: Windows安装CUDA+TensorFlow教程

755
来自专栏花叔的专栏

小程序码生成方式变更、微信不常联系的朋友

今天不深度分析,只给大家说说微信两个不显眼的变更。 首先说的小程序API的变更,话说,今天小苏突然跟花叔说,有个东西变了,但是微信官方没有发通告。 啥呢? 可生...

2958
来自专栏大数据智能实战

deepwalk遇到RuntimeError on windows trying python multiprocessing问题解决办法

本实验基于deepwalk1.0.2,Windows7,64bits 在调试代码TriDNR时,编译如下模块时发生错误: 代码网址:https://github...

1887
来自专栏Java社区

快来查你注册过哪些网站?

1162

扫描关注云+社区