org.js

function loadScript(js, cb) {
    var script = document.createElement("script");
    script.src = js;
    script.onload = function() {
        if (cb) { cb(); }
    };
    document.querySelector("body").appendChild(script);
}

function loadCSS(css, cb) {
    var link = document.createElement("link");
    link.href = css;
    link.rel = "stylesheet";
    link.onload = function() {
        if (cb) { cb(); }
    };
    document.querySelector("head").appendChild(link);
}

var style = document.createElement("style");
style.type = "text/css";
style.innerText = `
body {
  font-family: wf_segoe-ui_normal, Verdana, Geneva, Tahoma, sans-serif, 微软雅黑;
  color: #222;
}

pre, code {
  font-family: Source Code Pro, Consolas, Courier New, Monaco,  Monospace;
    background-color: #f6f8fa;
}

code {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27,31,35,0.05);
    border-radius: 3px;
}

pre {
    border: none;
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 3px;
}

pre.src:before {
    border: 1px solid #ccc;
    border-radius: 5px;
}

a {
    color: #0366d6;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    text-decoration: underline;
}

#sidebar {
    width: 240px;
    float: left;
    background-color: rgb(41, 46, 52);
    transition: all .2s cubic-bezier(.35,0,.25,1);
    max-width: 280px;
    position: fixed;
    top: 0;
    left: 0;
    color: #eee;
    height: 100%;
    display: table;
    border-collapse: collapse;
}

#sidebar h2 {
    text-align: center;
}

#sidebar ul {
    list-style: none;
    margin-left: 14px;
    padding: 0;
}

#sidebar ul li {
    padding: 3px 0;
    font-size: 0.95em;
}

#sidebar ul li a {
    color: #999;
    transition: all .2s cubic-bezier(.25, .1, .25, 1);
   text-decoration: none;
}

#sidebar ul li a.current {
   color: #87daff;
   text-decoration: underline;
}

#sidebar a:hover {
    color: #efefef;
   text-decoration: underline;
}

#content {
    margin-left: 240px;
    padding-right: 50px;
    padding-left: 50px;
    transition: all .2s cubic-bezier(.25, .1, .25, 1);
    padding-bottom: 120px;
}

#table-of-contents {
}

.postamble-parent {
    display: table-row;
    vertical-align: bottom;
    height: 1px;
}

#postamble {
   font-size: 0.9em;
   margin: auto;
   text-align: center;
   margin-bottom: 20px;
   padding: 10px 0;
   color: #999;
   transition: all .5s cubic-bezier(.25, .1, .25, 1);
}

#postamble:hover {
   color: #aaa;
}

.control {
    display: block;
    height: 70px;
    width: 33px;
    position: fixed;
    bottom: 25px;
    left: 242px;
    transition: all .2s cubic-bezier(.25, .1, .25, 1);
}

.sidebar-toggle, .topup {
    height: 25px;
    width: 25px;
    padding: 4px;
    background-color: rgba(41, 46, 52, 0.8);
    transition: all .2s cubic-bezier(.25, .1, .25, 1);
}

.sidebar-toggle {
  margin-top: 2px;
}

.sidebar-toggle:hover, .topup:hover {
  cursor: pointer;
  background-color: rgba(41, 46, 52, 1);
}

.sidebar-toggle .line, .topup .line {
    margin: 4px;
    background-color: #eee;
    height: 3px;
    transition: all .2s cubic-bezier(.25, .1, .25, 1);
}

.topup:hover {
    animation: looper 1s infinite cubic-bezier(.25, .1, .25, 1);
}

@keyframes looper {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }

}

.topup.disabled{
    transform: translateY(100px);
}

.topup:hover line{
    background-color: #fff;
}

.topup .line1 {
  transform: rotateZ(45deg) translate(5px, 0) scaleX(0.5);
}

.topup .line2 {
  transform: rotateZ(90deg) translate(1px, 0px);
}

.topup .line3 {
  transform: rotateZ(-45deg) translate(5px, -10px) scaleX(0.5);
}

.hide + .control .sidebar-toggle:hover .line1 {
    transform: rotateZ(45deg) translateX(4px);
    margin-right: 12px;
}

.hide + .control .sidebar-toggle:hover .line2 {
    transform: translateX(-5px);
}
.hide + .control .sidebar-toggle:hover .line3 {
    transform: rotateZ(-45deg) translateX(4px);
    margin-right: 12px;
}

.hide + .control .sidebar-toggle .line1 {
    transform: none;
    margin: 4px;
}

.hide + .control .sidebar-toggle .line2 {
    transform: none;
    margin: 4px;
}

.hide + .control .sidebar-toggle .line3 {
    transform: none;
    margin: 4px;
}

.sidebar-toggle .line1 {
    transform: rotateZ(-45deg) translate(-8px, 8.5px);
    margin: 0;
}

.sidebar-toggle .line2 {
    transform: rotateY(90deg);
}

.sidebar-toggle .line3 {
    transform: rotateZ(45deg) translate(-2px, -1.5px);
    margin: 0;
}

.hide#sidebar{
    margin-left: -240px;
}
.hide + .control {
    left: 2px;
}
.hide ~ #content {
    margin-left: 0px;
}

`;
document.querySelector("head").appendChild(style);

window.onload = function() {
    document.querySelector("body").style = "display:none;";
    document.querySelector("div#content").classList.add("markdown-body");

    var sidebar = document.createElement("div");
    sidebar.setAttribute("id", "sidebar");
    var tableOfContent = document.querySelector("#table-of-contents");
    var contentDiv = document.querySelector("#content");
    var postamble = document.querySelector("#postamble");
    var postambleParent = document.createElement("div");
    postambleParent.appendChild(postamble);
    postambleParent.setAttribute("class", "postamble-parent");
    var toggleDiv = document.createElement("div");
    toggleDiv.setAttribute("class", "sidebar-toggle");


    var topupDiv = document.createElement("div");
    topupDiv.setAttribute("class", "topup disabled");

    Array.from([1,2,3]).forEach(function(e){
        var toggleLine = document.createElement("div");
        toggleLine.setAttribute("class", "line line" + e);
        toggleDiv.appendChild(toggleLine);
        topupDiv.appendChild(toggleLine.cloneNode());
    });


    var controlDiv = document.createElement("div");
    controlDiv.setAttribute("class", "control");

    controlDiv.appendChild(topupDiv);
    controlDiv.appendChild(toggleDiv);

    sidebar.appendChild(tableOfContent);
    sidebar.appendChild(postambleParent);
    var body = document.querySelector("body");
    body.insertBefore(sidebar, contentDiv);
    body.insertBefore(controlDiv, contentDiv);

    var toc = document.querySelector("#table-of-contents>h2");
    if (toc) {
        toc.innerText = "目录";
    }


    function toggleSideBar() {
        var sidebar = document.querySelector("#sidebar");
        if (sidebar.classList.contains("hide")) {
            sidebar.classList.remove("hide");
        } else {
            sidebar.classList.add("hide");
        }
    }

    toggleDiv.addEventListener("click", toggleSideBar);

    function autoHideSidebar() {
        var sidebar = document.querySelector("#sidebar");
        if (window.innerWidth < 800) {
            if (!sidebar.classList.contains("hide")) {
                sidebar.classList.add("hide");
            }
        } else if (window.innerWidth > 1000){
            if (sidebar.classList.contains("hide")) {
                sidebar.classList.remove("hide");
            }
        }
    }


    window.addEventListener("resize", function(event){
        autoHideSidebar();
    });

    var popup = document.querySelector(".topup");
    popup.addEventListener("click", function(){
        window.scrollTo(0, 0);
    });

    function checkHighlightMenu() {
        if (window.pageYOffset < 100) {
            popup.classList.add("disabled");
        } else {
            if (popup.classList.contains("disabled")) {
                popup.classList.remove("disabled");
            }
        }
        var items = Array.from(document.querySelectorAll("*")).filter(e => e.getAttribute("id") && e.getAttribute("id").indexOf("org")==0)
            .map(e => {return [e.getAttribute("id"), e.getBoundingClientRect()];}).filter(e => e[1].top < 1).sort(e => -e[1].top);
        var candidates = Array.from(document.querySelectorAll("#table-of-contents a")).filter(e => e.hash && e.hash.indexOf("#org") == 0)
            .map(e => {e.classList.remove("current"); return e;});
        if (items.length) {
            var itemId = items[0][0];
            candidates.filter(e => e.hash == "#" + itemId).map(e => e.classList.add("current"));
        }
    }


    window.addEventListener("scroll", function(event){
        checkHighlightMenu();
    });

    autoHideSidebar();
    document.querySelector("body").style = "";
    checkHighlightMenu();


    var baseUrl = "https://cdn.staticfile.org/";
    var sources = [];
    var mermaidsGraphs = [];
    document.querySelectorAll(".org-src-container .src").forEach(function(el){
        if (el.classList.contains("src-mermaid")) {
            mermaidsGraphs.push(el);
        } else {
            for (var i in el.classList) {
                var name = el.classList[i];
                if (typeof(name) == "string" && name.startsWith("src-")) {
                    el.classList.add(name.substr(4));
                }
            }
            sources.push(el);
        }
    });

    if (sources.length) {
        loadCSS(baseUrl + "highlight.js/9.10.0/styles/github.min.css");
        loadScript(baseUrl + "highlight.js/9.10.0/highlight.min.js", function(){
            sources.forEach(function(el){ hljs.highlightBlock(el);	});
        });
    }
    if (mermaidsGraphs.length) {
        loadCSS(baseUrl + "mermaid/7.0.0/mermaid.min.css");
        loadScript(baseUrl + "mermaid/7.0.0/mermaidAPI.min.js", function(){
            mermaidAPI.initialize({startOnLoad: true});
            var count = 0;
            mermaidsGraphs.forEach(function(el){
                mermaidAPI.render("mg" + count, el.innerText, function(svgCode){
                    var image = document.createElement("div");
                    image.id = "mermaidgraph" + count;
		                el.style = "display:none;";
		                image.innerHTML = svgCode;
		                el.parentNode.insertBefore(image, el.nextSibling);
		            });
		            count++;
	          });
	      });
    }

}