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

发表于 分类于 阅读次数： 繁/简： 繁 本文字数： 681 阅读时长 ≈ 2 分钟

本文简要介绍了如何在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.join(' ');
  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;
}

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