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

想在在博客里面插入 dictation 视频, 然后视频底下可以输入内容，内容可折叠。

参考连接

Hexo静态博客添加可折叠内容 | Bambrow’s Blog

使用方法及效果

代码一：

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

效果

你看到了隐藏起来的我！

代码二：

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

效果

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

添加自定义标签

首先在themes\pure\scripts\下新建fold_tag.js文件，加入以下代码：

/* 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});

添加折叠文本代码

新建themes\pure\layout\_partial\fold_action.ejs文件，加入以下代码

<% if(theme.fold_action.enable){ %>
    <style>
        /* 折叠内容 */
        /* toggle hider title */
        .hider_title {
            display: contents;
            cursor: pointer;
            background: #05f040c2;
            font-size:15px;
        }

        /* toggle indicators */
        .close:before {
            padding-left: .5em;
            padding-right: .5em;
            content: "▼";
        }
        .open:before {
            padding-left: .5em;
            padding-right: .5em;
            content: "▲";
        } 
        .fold_hider {
        background: #eeeeee;
        }
        .fold {
        background: rgb(241, 208, 208);
        }
    </style>
    
    <script>
        $(document).ready(function(){
        $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
        });
        //默认情况下折叠
        $("div.fold").css("display", "none");
        });
      </script>
  <% } %>

<style>...<\style>部分代码可以放到themes\pure\source\css\style.css文件最后

在themes\pure\_config.yml中添加配置

# 文本折叠按钮
fold_action:
  enable: true

在themes\pure\layout\layout.ejs中添加

<!-- 文本折叠按钮 -->
<%- partial('_partial/fold_action')%>

添加位置在最后一个</body>前面

修改样式

找到文件themes\pure\source\css\style.css中大约5549行，在code后添加,.hider_title code,完整代码为

code,.hider_title code {
  text-shadow: 0 1px #fff;
  padding: 0.2em 0.4em;
  margin: 0 0.3em;
  color: #FF4500;
  background: #F0FFFF;
  /* 行代码背景颜色 */
  border-radius: 3px;
  font-size: 85%;
}