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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

漏洞预警 | Windows修复两个严重远程代码执行漏洞(CVE-2017-8543/8464)

6月13日,微软发布补丁修复两个严重远程代码执行漏洞,分别存在于LNK文件和Windows Search功能中。 概述 微软的Patch Tuesday更新发布...

2826
来自专栏王磊的博客

使用Hexo搭建个人博客的终极资料

Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽...

922
来自专栏Python中文社区

Python爬取哔哩哔哩实时直播弹幕

專 欄 ❈ 作者:麦艳涛,挖掘机小王子,数据分析爱好者。 ❈ 用Python爬取哔哩哔哩直播弹幕,关键在于找到哔哩哔哩网站的一个POST网址,和应该POST的...

2469
来自专栏飞雪无情的博客

使用Hexo在Github上搭建自己的博客

以前的博客是使用Jekyll托管在github上,后来用着越来越不方便,比如没有自动生成post,不能一键部署,文件结构和配置也是比较繁琐,更重要的是有时候用m...

562
来自专栏云计算教程系列

如何将Ubuntu从16.04升级到18.04

Ubuntu 18.04是一个长期支持(LTS)版本,LTS 版本每两年发布一次,而 Ubuntu 18.04 是自 2016 年以来的第一个长期支持版本。Ub...

4674
来自专栏小勇DW3

线上测试环境搭建过程记录

3.安装完以后  会在 /usr/java/latest 下有对应的 jdk 版本

591
来自专栏王磊的博客

使用Hexo搭建个人博客的终极资料

Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽...

1452
来自专栏小特工作室

微信小程序开发填坑指南V1

近期用了一星期的时间,开发了一个小程序。小程序名称是:小特Jarvis,取自钢铁侠的管家。

875
来自专栏酷玩时刻

Android Studio 上传aar(Library)到JCenter

这篇文章介绍通过Gradle把开源项目发布到公共仓库JCenter中,发布自己的android library(也就是aar)到公共的jcenter仓库。 为...

881
来自专栏java学习

教大家在如何Centos7系统中安装JDK、Tomcat、Mysql

1、jdk的安装 2、tomcat的安装 3、mysql的安装 远程工具:SSH Secure File Transfer Client

972

扫码关注云+社区