0.0.1 • Published 6 years ago

hexo-yilia-fold-develop v0.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

适用于 Yilia 主题的折叠插件,可用于折叠代码块等

1. clone 插件代码到博客根目录下的 node_modules 目录,并手动添加 NPM 依赖声明

$ cd $blog-root/node_modules
$ git clone https://github.com/rqh656418510/hexo-yilia-fold.git

# 删除插件目录下的.git目录
$ rm -rf $blog-root/node_modules/hexo-yilia-fold/.git

# 手动往博客根目录下的package.json文件添加NPM依赖
$ vim $blog-root/package.json
"hexo-yilia-fold": "^0.0.1"

2. Yilia 主题添加 JS 代码

$blog-root/themes/hexo-theme-yilia/layout/_partial/after-footer.ejs

<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>

3. Yilia 主题添加 CSS 代码

$blog-root/themes/themes/hexo-theme-yilia/source/main.0cf68a.css, 这里除了可以直接修改编译后的 main.0cf68a.css 文件,同样也可以在/hexo-theme-yilia/source-src/css目录下添加自定义的css文件,唯一区别是后者需要重新使用 webpack 进行打包

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

4. MarkDown 使用语法,自定义标签内不支持 `代码段

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

5. 重新构建

$ hexo clean
$ hexo generate
$ hexo serve
0.0.1

6 years ago