markdown生成側邊目錄

Markdown 生成目錄（TOC）的功能能找到，不過頂部目錄瀏覽器來，的確不如側邊目錄方便。

工具

在網上找到了這個項目i5ting_ztree_toc，借助jquery ztree，分析文檔生成側邊樹。

需要引用這些都文件：

<script type="text/javascript" src="toc/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="toc/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="toc/ztree_toc.js"></script>
  <link rel="stylesheet" href="toc/zTreeStyle.css" type="text/css">

然后初始化

	<SCRIPT type="text/javascript" >
	<!--
	$(document).ready(function(){
		$('#tree').ztree_toc({

		});
	});
	//-->
	</SCRIPT>

一些修改

缺點是需要把html粘貼到一個html框架中。

於是稍微寫了一個初始化的函數，把body中的內容拷貝出來，替換為框架元素（elem0是左側，elem1是右側），然后把body原始內容復制到右邊的內容部分，在左邊調用原插件代碼添加樹的框架部分。

function bootToc() {
    var elem0 = '<div class="ztree-div-left ztree" id="tree"></div>';
        elem1 = '<div class="ztree-div-right vscode-light" id="bootConentRoot"></div>';
    var o = new Array();
    document.body.childNodes.forEach(p => o.push(p.cloneNode(true)));
    document.body.innerHTML = "";
    document.body.append($(elem0)[0]);
    document.body.append($(elem1)[0]);

    var root = document.getElementById('bootConentRoot');
    o.forEach(p => root.appendChild(p));
}

$(document).ready(function(){
    bootToc();
    $('#tree').ztree_toc({

    });
});

這樣只要在文件頭引入這些js就行了，不用做整個文檔的復制粘貼。

后續可以分析一下原始項目toc如何生成，是否有辦法集成進來。