Mardown加上目录

适合Jekyll+Github模式下post.html 中加入如下代码,会在页面加载时生成目录结构:

有两种方案:

方案一效果👉 https://javakam.github.io/

<!-- 目录 方案一-->
<!-- 参考1👉 https://blog.csdn.net/WuLex/article/details/70854555 -->
<!-- 参考2👉 http://jianganglu.github.io/2015/06/03/markdown-catelog/ -->


<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 //是否显示导航栏
 var showNavBar = true;
 //是否展开导航栏
 var expandNavBar = true;
 //是否给标题自动增加序号
 var addSNToTitle = false;

 $(document).ready(function(){
    var h1s = $("body").find("h1");
    var h2s = $("body").find("h2");
    var h3s = $("body").find("h3");
    var h4s = $("body").find("h4");
    var h5s = $("body").find("h5");
    var h6s = $("body").find("h6");

    var headCounts = [h1s.length, h2s.length, h3s.length, h4s.length, h5s.length, h6s.length];
    var vH1Tag = null;
    var vH2Tag = null;
    var vH3Tag = null;
    var vH4Tag = null;
    var vH5Tag = null;
    var vH6Tag = null;

    if(headCounts.length==0){
         return;
    }
    for(var i = 0; i < headCounts.length; i++){
         if(headCounts[i] > 0){
            if(vH1Tag == null){
                  vH1Tag = 'h' + (i + 1);
            }else if(vH2Tag == null){
                  vH2Tag = 'h' + (i + 1);
            }else if(vH3Tag == null){
                  vH3Tag = 'h' + (i + 1);
            }else if(vH4Tag == null){
                  vH4Tag = 'h' + (i + 1);
            }else if(vH5Tag == null){
                  vH5Tag = 'h' + (i + 1);
            }else if(vH6Tag == null){
                  vH6Tag = 'h' + (i + 1);
                  break;
            }
         }
    }

    $("body").prepend(
    '<div class="BlogAnchor">' +
        // 关闭按钮
            // '<span style="color:red;position:absolute;top:-6px;left:0px;cursor:pointer;" onclick="$(\'.BlogAnchor\').hide();">×</span>' +
        '<p>'  +
            '<b id="AnchorContentToggle" title="收起" style="cursor:pointer;">目录▲</b>' +
        '</p>' +
          '<div class="AnchorContent" id="AnchorContent"> </div>' +
    '</div>' );

    var vH1Index = 0;
    var vH2Index = 0;
    var vH3Index = 0;
    var vH4Index = 0;
    var vH5Index = 0;
    var vH6Index = 0;
    $("body").find(
        vH1Tag +(vH2Tag != null ? (','+ vH2Tag) : '')
        +(vH3Tag != null ? (','+ vH3Tag) : '')
        +(vH4Tag != null ? (','+ vH4Tag) : '')
        +(vH5Tag != null ? (','+ vH5Tag) : '')
        +(vH6Tag != null ? (','+ vH6Tag) : '')
    ).each(function(i,item){
            var id = '';
            var name = '';
            var tag = $(item).get(0).tagName.toLowerCase();
            var className = '';
            if(tag == vH1Tag){
                if(addSNToTitle){
                id = name = ++vH1Index;
              }else {
                id = ++vH1Index;
              }
                vH2Index = 0;
                className = 'item_h1';
            }else if(tag == vH2Tag){
                id = vH1Index + '_' + ++vH2Index;
                name = vH1Index + '.' + vH2Index;
                className = 'item_h2';
            }else if(tag == vH3Tag){
                id = vH1Index + '_' + vH2Index + '_' + ++vH3Index;
              name = vH1Index + '.' + vH2Index+ '.'+ vH3Index;
                className = 'item_h3';
            }else if(tag == vH4Tag){
                id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + ++vH4Index;
              name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index;
                className = 'item_h4';
            }else if(tag == vH5Tag){
                id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + vH4Index + '_' + ++vH5Index;
              name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index + '.' + vH5Index;
                className = 'item_h5';
            }else if(tag == vH6Tag){
                id = vH1Index + '_' + vH2Index + '_' + vH3Index + '_' + vH4Index + '_' + vH5Index + '_' + ++vH6Index;
              name = vH1Index + '.' + vH2Index+ '.'+ vH3Index + '.' + vH4Index + '.' + vH5Index + '.' + vH6Index;
                className = 'item_h6';
            }

            $(item).attr("id","wow" + id);
            $(item).addClass("wow_head");
            var originText = $(item).text();
          if(originText.length>10){
             originText=originText.substring(0,10)+'…';
          }

          $("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
              if(addSNToTitle){
                   $(item).text(name + '. ' + originText);
            $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+name+" · "+originText+'</a></li>');
            }else {
            $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" onclick="return false;" href="#" link="#wow'+id+'">'+originText+'</a></li>');
          }
    });

    $("#AnchorContentToggle").click(function(){
          var text = $(this).html();
          if(text=="目录▲"){
            $(this).html("目录▼");
            $(this).attr({"title":"展开"});
          }else{
            $(this).html("目录▲");
            $(this).attr({"title":"收起"});
          }

          $("#AnchorContent").toggle();
    });

    $(".anchor-link").click(function(){
         $("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 500);
    });

    var headerNavs = $(".BlogAnchor li .nav_item");
      var headerTops = [];
      $(".wow_head").each(function(i, n){
            headerTops.push($(n).offset().top);
      });

      $(window).scroll(function(){
          var scrollTop = $(window).scrollTop();
          $.each(headerTops, function(i, n){
                var distance = n - scrollTop;
                if(distance >= 0){
            console.log("  distance  "+distance+'   ' + i+'  '+ n);
                      $(".BlogAnchor li .nav_item.current").removeClass('current');
                      $(headerNavs[i]).addClass('current');
                      return false;
                }
          });
    });

    if(!showNavBar){
        $('.BlogAnchor').hide();
    }

    if(!expandNavBar){
        $(this).html("目录▼");
      $(this).attr({"title":"展开"});
        $("#AnchorContent").hide();
    }
});
</script>

<style>
  /*导航*/
  .BlogAnchor {
    background: #F8F8F8;
    padding: 10px;
    line-height: 150%;
    position: fixed;
    right: 10px;
    top: 28px;
    border: 1px solid #5F8CA6;
  }
  .BlogAnchor p {
    font-size: 18px;
    color: #5F8CA6;
    margin: 0 0 0.3rem 0;
    text-align: right;
  }
  .BlogAnchor .AnchorContent {
    padding: 5px 0px;
    overflow: auto;
  }
  .BlogAnchor li{
    text-indent: 0.5rem;
    font-size: 14px;
    list-style: none;
  }
  .BlogAnchor li .nav_item{
    padding: 3px;
  }
  .BlogAnchor li .item_h1{
     margin-left: 0rem;
  }
  .BlogAnchor li .item_h2{
    margin-left: 1rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h3{
    margin-left: 2rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h4{
    margin-left: 3rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h5{
    margin-left: 4rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .item_h6{
    margin-left: 5rem;
    font-size: 0.8rem;
  }
  .BlogAnchor li .nav_item.current{
    color: white;
    background-color: #5F8CA6;
  }
  #AnchorContentToggle {
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
    display: inline-block;
    line-height: 20px;
    background: #5F8CA6;
    font-style: normal;
    padding: 1px 8px;
  }
  .BlogAnchor a:hover {
    color: #5F8CA6;
  }
  .BlogAnchor a {
    text-decoration: none;
  }
</style>

 

 -------------------------------------------------------------------------------------------------------------

 

方案二效果👉  https://javakam.github.io/2019/09/23/markdown-toc-demo/

需要用指定的  <article class='markdown-body'> 包裹内容,结构代码:

  <style>.highlight .hll { background-color: #ffffcc }
.highlight  { background: #f0f0f0; }
.highlight .c { color: #60a0b0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40a070 } /* Literal.Number */
.highlight .s { color: #4070a0 } /* Literal.String */
.highlight .na { color: #4070a0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60add5 } /* Name.Constant */
.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287e } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #bb60d5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #40a070 } /* Literal.Number.Bin */
.highlight .mf { color: #40a070 } /* Literal.Number.Float */
.highlight .mh { color: #40a070 } /* Literal.Number.Hex */
.highlight .mi { color: #40a070 } /* Literal.Number.Integer */
.highlight .mo { color: #40a070 } /* Literal.Number.Oct */
.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070a0 } /* Literal.String.Char */
.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #c65d09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
.highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */
</style>


<div>
    <div style='width:25%;'>
                <ul id="tree" class="ztree" style='width:100%'>

                </ul>
    </div>
  <div id='readme' style='width:70%;margin-left:20%;'>
        <article class='markdown-body'>
...

        

js:

<!--目录 方案2 效果更好,但是需要引入一些文件,没有方案一纯粹 -->
<!-- 参考项目👉https://github.com/i5ting/i5ting_ztree_toc -->

<link href="/assets/toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/assets/toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
<link href="/assets/toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>

<style>
                    pre {
                        counter-reset: line-numbering;
                        border: solid 1px #d9d9d9;
                        border-radius: 0;
                        background: #fff;
                        padding: 0;
                        line-height: 23px;
                        margin-bottom: 30px;
                        white-space: pre;
                        overflow-x: auto;
                        word-break: inherit;
                        word-wrap: inherit;
                    }

                    pre a::before {
                      content: counter(line-numbering);
                      counter-increment: line-numbering;
                      padding-right: 1em; /* space after numbers */
                      width: 25px;
                      text-align: right;
                      opacity: 0.7;
                      display: inline-block;
                      color: #aaa;
                      background: #eee;
                      margin-right: 16px;
                      padding: 2px 10px;
                      font-size: 13px;
                      -webkit-touch-callout: none;
                      -webkit-user-select: none;
                      -khtml-user-select: none;
                      -moz-user-select: none;
                      -ms-user-select: none;
                      user-select: none;
                    }

                    pre a:first-of-type::before {
                      padding-top: 10px;
                    }

                    pre a:last-of-type::before {
                      padding-bottom: 10px;
                    }

                    pre a:only-of-type::before {
                      padding: 10px;
                    }

                    .highlight { background-color: #ffffcc } /* RIGHT */
                    </style>
</article></div>


    <script type="text/javascript" src="/assets/toc/js/jquery-1.4.4.min.js"></script>
            <script type="text/javascript" src="/assets/toc/js/jquery.ztree.all-3.5.min.js"></script>
            <script type="text/javascript" src="/assets/toc/js/ztree_toc.js"></script>
      <script type="text/javascript" src="/assets/toc_conf.js"></script>

        <script type="text/javascript" >
                            $(document).ready(function(){
                                $('#tree').ztree_toc({
                                    // is_auto_number:true,
                                    documment_selector:'.markdown-body'
                                });
                            });
                        </script>