hexo-yilia-fold v0.0.2

hexo-yilia-fold

Yilia 主题的折叠插件，可用于折叠代码块等内容。

安装插件

$ npm install hexo-yilia-fold --save

Yilia 主题添加 JS 代码

在 ${blog-root}/themes/hexo-theme-yilia/layout/_partial/after-footer.ejs 模板文件的末尾，添加以下 HTML 代码：

<link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/monokai-sublime.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
  $(document).ready(function(){
      $(document).on('click', '.fold_hider', function(){
          $('>.fold', this.parentNode).slideToggle();
          $('>:first', this).toggleClass('open');
      });
      $("div.fold").css("display","none"); //默认折叠
  });
</script>

Yilia 主题添加 CSS 代码

在 ${blog-root}/themes/themes/hexo-theme-yilia/source/main.xxx.css 文件的末尾，添加以下 CSS 代码。值得一提的是，这里除了可以直接修改编译后的 main.xxx.css 文件，还可以在 Yilia 主题的 /source-src/css 目录下添加自定义的 CSS 文件，唯一区别是后者需要重新使用 Webpack 对 Yilia 主题的代码进行打包。

.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

自定义标签的使用方法

在 MarkDown 文件内，可以使用以下自定义标签对代码块进行折叠。值得一提的是，不支持在自定义标签内使用 ` 代码段。

{% fold 点击显/隐内容 java %}
public static void main(String[] args)
{
    System.out.println("hello world!");
}
{% endfold %}