Markdown渲染后文章标题收缩控件

 

文章首发于szhshp的第三边境研究所（szhshp.org）, 转载请注明

一个让Markdown-Post的标题拥有Collapse功能的JS

直接把鼠标放在这篇文章下方的header上，点击标题左侧的icon就可以看到效果

Requirements

1. Bootstrap
2. 标准的基于Markdown的Jekyll/Hexo Post

Installation

导入JS和CSS就行

建议将JS 放在最后，可能其他相关JS的导入会影响Collapse功能

Setting

BreakId

某些时候文章没有特定的结尾，因此可能需要设定特定的结尾elem来进行判断，否则会将最后一个Header后面的所有内容都collapse掉

例如此处我将友言评论的框作为结尾elem，因此到友言评论之后就不会被collapse

?

1	var arrBreakId =  new Array("uyan");

Collapsible Header Level

设置Collapsible的Header的Level

默认是H1-H3

?

1 2 3

var arrCollapsableTag = new Array("H1","H2","H3"); // var excludeTagList = new Array(""); $('h1, h2, h3').each(function(index, el)……

修改的时候也需要将CSS进行一定的修改

?

1 2 3 4 5 6

h1:hover span.headerbtn, h2:hover span.headerbtn, h3:hover span.headerbtn{     opacity: 1;     visibility: visible; }

把H4加到后面就能实现H1-H4实现Collapse

Github & Bug Report

Github: https://github.com/szhielelp/md-post-header-collapse

遇到Bug可以提交到本页面