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

h 1: hover span.headerbtn, h 2: hover span.headerbtn, h 3: hover span.headerbtn{      opacity: 1 ;      visibility : visible ; }

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

Github & Bug Report

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

遇到Bug可以提交到本页面

转载于:https://www.cnblogs.com/szhshp/p/6233007.html