专栏首页Ryan MiaoHexo next博客添加折叠块功能添加折叠代码块

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

相关文章

  • java删除文件,慎重

    在处理删除图片的时候,我将图片路径从数据库取出,然后执行如下删除代码: void deleteFile(File file){ if(file!=null ...

    Ryan-Miao
  • 深入理解JVM垃圾收集机制(JDK1.8)

    垃圾收集算法 标记-清除算法 最基础的收集算法是“标记-清除”(Mark-Sweep)算法,分两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被...

    Ryan-Miao
  • Date, TimeZone, MongoDB, java中date的时区问题

    打印new Date(),Fri Aug 12 13:37:51 CST 2016. 显示Asia/Shanghai的时区,但是date toString 的时...

    Ryan-Miao
  • Spark RPC 简述

    Spark 中的消息通信主要涉及 RpcEnv、RpcEndpoint 及 RpcEndpointRef 几个类,下面进行简单介绍

    codingforfun
  • 如何将HTML字符转换为DOM节点并动态添加到文档中

    将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:<br />

    用户1631416
  • DOM

    天天_哥
  • 现场报道 | 英伟达GTC大会开幕,盘点首日三大亮点

    机器之心报道 编辑:李泽南 昨天,GPU 开发者的年度盛会,GPU 技术大会(GPU Technology Conference,GTC)在美国加州圣何塞开始举...

    机器之心
  • Go语言类型转换库【github.com/demdxx/gocast】的用法

    一、导入库: go get github.com/demdxx/gocast 二、测试代码: // main.go package main import ( ...

    李海彬
  • Windows Phone 7实战 第一天 设计启动页面和应用程序图标

    每一个 Windows Phone 7 应用程序在启动时多少会花上一些时间,在这个等待的时刻经常都会摆放一些启动画面 (Splash screen) 先来充充场...

    张善友
  • 什么是胶囊网络?| 小白深度学习入门

    胶囊网络(CapsNet)于2011年在Geoffrey Hinton的一篇名为《Transforming Autoencoders》的论文中首次出现。

    叶锦鲤

扫码关注云+社区

领取腾讯云代金券