Hexo静态博客添加可折叠内容

本文简要介绍了如何在Hexo静态博客里添加可折叠内容。网上的资料大多不适用于目前的最新情况,因此简单记录一下。

本文运行环境:

1
2
3
hexo: 4.2.1
hexo-cli: 3.1.0
NexT: 8.0.0-rc.4

注意,对于使用 Hexo 5.0 版本及以上、NexT v8.1.0 版本及以上的读者,默认的自定义配置文件已经从 source/_data/next.yml 变更为 _config.next.yml,请注意迁移与替换。对于日后 NexT 可能会出现的重大更新造成的配置变动,可能会在此处更新,或另外写文章说明。

本文主要参考了这篇文章这篇文章,并因版本更新与个人偏好做了一些改动。

使用方法与效果展示

1
2
3
{% fold 我是可折叠内容 %}
你看到了隐藏起来的我!
{% endfold %}
我是可折叠内容

你看到了隐藏起来的我!

1
2
3
{% fold 我是带有`行内代码块`的可折叠内容 %}
你又看到了隐藏起来的我!
{% endfold %}
我是带有行内代码块的可折叠内容

你又看到了隐藏起来的我!

添加自定义标签

首先在博客根目录新建文件scripts/tags/fold_tag.js(如果没有文件夹就依次新建),加入以下内容:

scripts/tags/fold_tag.js
1
2
3
4
5
6
7
8
9
10
11
12
/* global hexo */
// Usage: {% fold Title %} Something {% endfold %}
function fold(args, content) {
var text = args[0];
if(!text) text = "点击显示/隐藏";
return '<div><div class="fold_hider"><div class="close hider_title">'
+ hexo.render.renderSync({text: text, engine: 'markdown'}).replace(/^<p>/, '').replace(/<\/p>$/, '')
+ '</div></div><div class="fold">\n'
+ hexo.render.renderSync({text: content, engine: 'markdown'})
+ '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

在这里我同时选择了渲染可折叠内容的标题和正文,这样标题内部也可以加入行内代码块。因为渲染后的内容都会被Hexo加入<p></p>标签,造成标题出现分行,所以手动去除了它们。

添加折叠文本的执行代码

新建source/js/fold_action.js文件,加入如下内容:

source/js/fold_action.js
1
2
3
4
5
6
7
8
$(document).ready(function(){
$(document).on('click', '.fold_hider', function(){
$('>.fold', this.parentNode).slideToggle();
$('>:first', this).toggleClass('open');
});
//默认情况下折叠
$("div.fold").css("display", "none");
});

修改自定义文件

首先在source/_data/next.yml里的custom_file_path下面打开bodyEnd。随后新建文件source/_data/body-end.njk,写入如下内容:

source/_data/body-end.njk
1
2
3
4
5
{# 引入jQuery #}
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

{# 代码压缩 #}
<script type="text/javascript" src="/js/fold_action.js"></script>

修改样式

source/_data/styles.styl加入如下内容:

source/_data/styles.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// toggle hider title
.hider_title {
cursor: pointer;
background: #eeeeee;
}

// toggle indicators
.close:before {
padding-left: .5em;
padding-right: .5em;
content: "▼";
}
.open:before {
padding-left: .5em;
padding-right: .5em;
content: "▲";
}

同时修改一下p code的样式:

source/_data/styles.styl
1
2
3
4
5
6
7
// inline code
- p code {
+ p code, .hider_title code {
color: #c71585;
background: #fffafa;
margin: 2px;
}

这样就可以在文章中正常使用了。