标签：body 教程 Markdown Typora height item tag var scrollTop

Markdown介绍

Markdown是一种轻量级的标记语言
通过简单的标记语法使文本具备一定的格式，它的目标就是实现易读，易写。

标题

如上在要转为标题的前面输入一个#+一个空格，光标再定位到其他位置一个一级标题就设置好了

或者使用快捷键：Ctrl+1

总结：

一级标题：一个#，或者 Ctrl+1

二级标题：两个#，或者 Ctrl+2

三级标题：三个#，或者 Ctrl+3

……

最多到六级标题：六个#，或者 Ctrl+6

侧边栏大纲中的标题级别是可以折叠显示的：

文件-偏好设置-外观-侧边栏的大纲视图允许折叠和展开（勾选该项）

标题自动编号：

https://blog.csdn.net/qq_33159059/article/details/87910522

列表

有序列表

文字前面输入数字+一个英文.+一个空格，回车下一行自动编号，二次回车清除编号

或者点击段落-有序列表

无序列表

文字前加+/-，然后输入一个空格，然后输入一个回车，下一行继续前面的格式，二次回车清除格式

或者点击段落-无序列表

字体

字体加粗

字体前后分别两个*，或者快捷键：Ctrl+B

字体倾斜

字体前后分别加一个*，或者快捷键：Ctrl+I

加粗并且斜体

字体前后分别加三个*，或者快捷键：Ctrl+I并且Ctrl+B

删除线

使用 ~~ 给文本添加删除线。例如：

这是~~删除线~~的文本。

脚注

使用[^脚注]来添加脚注。例如：

这是一个脚注[^1]。

[^1]: 这是一个示例脚注。

输出：

这是一个脚注[^1]。

[1] 这是一个示例脚注。

上标和下标

#上标
<sub>具体内容</sub>

#下标
<sup>具体内容</sup>

示例：

H₂O

2²=4

引用

在文字前面加上英文下的 > + 空格

字体颜色

<font color = 'red' > 要显示的字体 </font>

颜色单词	中文含义
Apricot	杏色，显示的是红色比红色要淡
Peach	桃色，但显示出来是翠绿色
each	刚刚删掉Peach想测试小写是否可以（是可以的），而看到这个竟然也有颜色，还挺好看
Bittersweet	苦乐参半色
RedOrange	红色
BrickRed	比苦乐参半色要浅
Salmon	橙色的感觉
Magenta	粉紫的感觉
VioletRed	深粉的感觉
Rhodamine	龙井绿茶的感觉

颜色单词可以从以下网站获取：

https://www.flatuicolorpicker.com/

换行

在需要换行的字符后面输入 <br>

转义字符

如上可以看出 * 在Markdown里多用于格式设置，那么如果想要打出*本身呢，这就需要转义。

两个反引号之间的内容会原样输出

转义也可以是使用\

代码块

三个反引号之间的部分就是代码块格式

代码块显示行号设置：

文件 - 偏好设置 - Markdown - 代码块：显示行号（勾选此项即可）

插入图片

输入 ![] 然后就可以选择要插入的图片了

Markdown最初对图片的支持不是很好，但是Typora对图片支持比较好，也可以直接把图片拖拽过来或者截图粘贴进来，就完成了插入图片操作

注意：文件其实还是在本地存放，只是格式化后显示在了Typora里面，如果要把md文件拷贝给别人，别人是看不到图片信息的，建议编辑好之后转为其他格式然后再发送给其他人，或者配合云端图床工具使用

图片设置左对齐：

找到使用主题的 css 文件（上一步可以看到使用的主题是 github），使用 VScode 等代码编辑器打开文件，在文件最后添加代码

p .md-image:only-child{
    width: auto;
    text-align: left;
}

添加后保存文件，重启 Typora ，这时再插入图片就可以看到图片已经默认居左显示了~

超链接

[显示的文字](链接到的地址)

例如：

页内链接

https://blog.csdn.net/he_nan/article/details/105850141

插入表格

竖线（|）分隔表头回车自动生成表格，或者在excel编辑好直接粘贴过来

快捷键

Ctrl+/ ：进入源代码模式，可以看到之前设置的所有格式（再次执行退出源码模式）

导出html带侧边目录

右侧边栏

然后找到导出的HTML文件，用记事本或notepad++或别的文本编辑器打开，把如下代码粘贴到</body>下面，保存即可

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--侧栏目录生成代码-->
<script>
    //标题序号计数器
    var hCount = [0, 0, 0, 0, 0, 0];
    //设置计数器
    function setHCount(number) {
        //当前计数器加一
        hCount[number - 1]++;
        for (var i = number, length = hCount.length; i < length; i++) {
            //子目录计数器全部置零
            hCount[i] = 0;
        }
    }
    //重命名目录名称
    function setHTagValue(item, number) {
        //获取标题名
        var text = $(item).get(0).innerHTML;
        //初始化空字符串
        var before = "";
        //生成序号
        for (var i = 0, length = hCount.length; i < number; i++) {
            if (i < number - 1)
                before += hCount[i] + ".";
            else
                before += hCount[i] + " ";
        }
        //在标题前面加上序号
        $(item).get(0).innerHTML = before + text;
    }
    function renameHTag(item) {
        var tag = $(item).get(0).localName;
        if (tag === "h1") {
            setHCount(1);
           //console\.log("捕获到标签:%s", tag);
            setHTagValue(item, 1);
        }
        if (tag === "h2") {
            setHCount(2);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 2);
        }
        if (tag === "h3") {
            setHCount(3);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 3);
        }
        if (tag === "h4") {
            setHCount(4);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 4);
        }
        if (tag === "h5") {
            setHCount(5);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 5);
        }
        if (tag === "h6") {
            setHCount(6);
            //console.log("捕获到标签:%s", tag);
            setHTagValue(item, 6)
        }
    }
    $(document).ready(function () {
        $("h1,h2,h3,h4,h5,h6").each(function (i, item) {
            //给<H>类标签编号
            renameHTag(item);
            //获取标签的名字,h1,还是h2
            var tag = $(item).get(0).localName;
            //为该标签设置id属性
            $(item).attr("id", "wow" + i);
            //添加一个页内超链接,并设置class选择器
            //      $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
            $("#category").append('<a class="new' + tag + '" href="#wow' + i + '">' + $(item).text() + '</a></br>');
            //为每一个标题超链接的class属性设置左边距
            $(".newh1").css("margin-left", 0);
            $(".newh2").css("margin-left", 20);
            $(".newh3").css("margin-left", 40);
            $(".newh4").css("margin-left", 60);
            $(".newh5").css("margin-left", 80);
            $(".newh6").css("margin-left", 100);
        });
        //设置class选择器为.book-body的html内容
        $(".book-body").html($(".book-body").nextAll())
    });
</script>
<style type="text/css">
    @media (max-width: 1600px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1400px) {
        .book-body {
            /* padding-left: 200px; */
            padding-right: 0px;
        }
    }
    @media (max-width: 1200px) {
        .book-body {
            /* padding-left: 300px; */
            padding-left: 0px;
        }
    }
    @media (max-width: 700px) {
        .book-body {
            padding-left: 0px;
        }
    }
    @media (min-width: 600px) {
        #category {
            /* 绝对定位 */
            position: fixed;
            /* left: 20px; */
            /* 目录显示的位置 */
            right: 0px;
            top: 0;
            /* 目录栏的高度,这里设置为60%主要是为了不挡住返回顶部和折叠按钮 */
            height: 79%;
            /* 开启垂直滚动条 */
            overflow-y: scroll;
            /* 开启水平滚动条 */
            overflow-x: scroll;
        }
    }
    @media (-webkit-max-device-pixel-ratio: 1) {
        ::-webkit-scrollbar-track-piece {
            background-color: #FFF
        }
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }
        ::-webkit-scrollbar-thumb {
            background-color: #c2c2c2;
            background-clip: padding-box;
            min-height: 28px
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #A0A0A0
        }
    }
</style>
<script>
    // id="category" οnclick="showOrCloseCategory()"
    function showOrCloseCategory() {
        var id = document.getElementById("category");
        var book_body=document.getElementById("book_body");
        //如果展开了
        if (id.style.display == 'block') {
            //console.log("开始展开");
            id.style.display='none';
            id.style.width="0%";
            book_body.style.width="100%";
            book_body.style.paddingleft=0;
        }
        //如果被折叠了
        else if (id.style.display =='none') {
            //console.log("开始折叠");
            id.style.display = 'block';
            book_body.style.width="90%";
            id.style.width="20%"
        }
    }
</script>
<!--返回顶部-->
<div style="position: fixed;
    float: right;
    top: 85%;
    right: 40px;
    width: 160px;">
	<a href="javascript:scroll(0,0)">返回顶部</a>
	<button οnclick="showOrCloseCategory()" style="cursor:pointer;border:0;background-color:white;text-decoration:underline;display:inline-block;color:#4183C4;">折叠/展开</button>
</div>
<!--文章主体部分-->
<div class="book-body" id="book_body" style="width:90%;display:block"> </div>
<!--目录栏，设置占用宽度为20%可以根据实际情况设置-->
<div  class="book-summary" id="category" style="width:20%;display:block" ></div>

左侧边栏

用notepad或notepad++等编辑器打开html，<body class='typora-export os-windows' >，在body下面加入如下代码：

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        //是否显示导航栏
        var showNavBar = true;
        //是否展开导航栏
        var expandNavBar = true;
        var currentIndex = 0;
        var currentScrollHigh = 0;
        var currentContentScrollHigh = 0;
        function sleep(numberMillis) {
            var now = new Date();
            var exitTime = now.getTime() + numberMillis;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime)
                    return;
            }
        }
        $(window).onbeforeunload = function(){
            currentIndex = 0;
        }
        $(window).load(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 sum = 0;
            for(var i = 0; i < headCounts.length; i++){
                if(headCounts[i] > 0){
                    for( var y = 0; y < headCounts[i]; y++)
                        sum = sum + 1;
                }
            }
            for(var i = 0; i < headCounts.length; i++){
                if(headCounts[i] > 0){
                    if(vH1Tag == null){
                        vH1Tag = 'h' + (i + 1);
                    }else{
                        vH2Tag = 'h' + (i + 1);
                    }
                }
            }
            if(vH1Tag == null){
                return;
            }
 
            $("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 vIndexH1 = 0;
            var vIndexH2 = 0;
            var vIndexH3 = 0;
            var vIndexH4 = 0;
            var vIndexH5 = 0;
            var vIndexH6 = 0;
            var headerALL = [];
            var headerIDALL = [];
            var headerHightALL = [];
            $("body").find("h1,h2,h3,h4,h5,h6").each(function(i,item){
                var id = '';
                var name = '';
                var tag = $(item).get(0).tagName.toLowerCase();
                var className = '';
                // i=0 tag=h1          i=1 tag=h2     i=2 tag=h2
 
                if(tag == "h1"){
                    id = name = ++vIndexH1;
                    vIndexH2 = 0;
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                    className = 'item_h1';
 
//alert("tag ="+ tag +"----   i = "+ i + " name ="+ name +"    className= "+ className);
//tag =h1----   i = 0 name =1    className= item_h1
                }else if(tag == "h2"){
 
                    id = vIndexH1 + '_' + ++vIndexH2;
                    name = vIndexH1 + '.' + vIndexH2;
                    className = 'item_h2';
                    vIndexH3 = 0;
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }else if(tag == "h3"){
                    id = vIndexH1 + '_' + vIndexH2+ '_' + ++vIndexH3;
                    name = vIndexH1 + '.' + vIndexH2+ '.' + +vIndexH3;
                    className = 'item_h3';
                    vIndexH4 = 0;
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }
                else if(tag == "h4"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_'+ ++vIndexH4 ;
                    name =  vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.'+  vIndexH4 ;
                    className = 'item_h4';
                    vIndexH5 = 0;
                    vIndexH6 = 0;
                }
                else if(tag == "h5"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_'+ ++vIndexH5;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.'+ vIndexH5;
                    className = 'item_h5';
                    vIndexH6 = 0;
                }
                else if(tag == "h6"){
                    id = vIndexH1 + '_' + vIndexH2+ '_'  +vIndexH3 +'_' +vIndexH4+'_' +vIndexH5+'_'+ ++vIndexH6;
                    name = vIndexH1 + '.' + vIndexH2+ '.'  +vIndexH3 +'.' +vIndexH4+'.' +vIndexH5+'.'+ vIndexH6;
                    className = 'item_h6';
                }
                if(name.length > 2){
                    var mFirstName = name.substring(0,2);
                    while(mFirstName == "0."){
                        name = name.substring(2,name.length);
                        mFirstName = name.substring(0,2);
                    }
                }
                $(item).attr("id","wow"+id+"_index_"+i);
                $(item).addClass("wow_head");
                var itemHeight = $(item).offset().top
                $("#AnchorContent").css('max-height', ($(document).height()) + 'px');
                $("#AnchorContent").css('height', ($(window).height()) + 'px');
                $("#AnchorContent").css('overflow','auto');
                $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link"  href="#wow'+id+'_index_'+i+'" link="#wow'+id+'" index="'+i+'">'+$(this).text()+" "+'</a></li>');
                var str = "#wow"+id+"_index_"+i;
                headerALL.push($(item));
                headerIDALL.push(str);
                console.log("  i = "+ i +"   id =" + id +"  itemHeight = "+ itemHeight);
            });
 
            // 1
            // 1.1
            // 1.1.1
            // 1.1.1.1
            // 1.1.1.1.1
            // 1.1.1.1.1.1
            $("#AnchorContentToggle").click(function(){
                var text = $(this).html();
                if(text=="目录▲"){
                    $(this).html("目录▼");
                    $(this).attr({"title":"展开"});
                    $(".BlogAnchor").html("<a>目录</a>");
                }else{
                    $(this).html("目录▲");
                    $(this).attr({"title":"收起"});
                    $(".BlogAnchor").show();
                }
                $("#AnchorContent").toggle();
            });
 
 
            $(".anchor-link").click(function(){
                //$("html,body").animate({scrollTop: $($(this).attr("link")).offset().top}, 10);
                var index  = $(this).attr("index");
                $(".BlogAnchor li .nav_item.current").removeClass('current');
                $(headerNavs[index]).addClass('current');
                var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
                currentScrollHigh = scrollTop;
                currentContentScrollHigh = headerHightALL[index];
                var value = headerTops[index];
                currentIndex = value;
                console.log("index = "+ index+ "  headerTops["+index+"] ="+ value + "scrollTop="+ scrollTop);
            });
            var headerNavs = $(".BlogAnchor li .nav_item");
            var headerTops = [];
            var mHeight = 0;
            $(".wow_head").each(function(i, n){
                var value = $(n).offset().top;
                headerTops.push($(n).offset().top);
                console.log("i = "+ i+ "  offset().top ="+ value);
            });
            headerTops.push($(document).height());
            window.onresize = function(){
                headerTops = [];
                $.each(headerNavs, function(i, n){
                        $(n).trigger("click");
                        document.querySelector(headerIDALL[i]).scrollIntoView(true);
//var high = $(n).offset().top;
                        var scrollTop = $(window).scrollTop();
                        headerTops.push(scrollTop);
                        console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
                    }
                );
                headerTops.push($(document).height());
//$("#AnchorContent").height($(window).height());
                $("#AnchorContent").css('height', ($(window).height()) + 'px');
                var xcontentWidth =  $("#AnchorContent").width();
                var xWidth = $(window).width();
                var xlength = xWidth - xcontentWidth;
                $("body").css("marginLeft",xcontentWidth+'px');
                $("body").css("max-width",xlength);
                $(headerNavs[currentIndex]).trigger("click");
                document.querySelector(headerIDALL[i]).scrollIntoView(true);
            }
 
            $(window).scroll(function(){
                var scrollTop = $(window).scrollTop(); // 获得将要到达的点离顶距离
                $.each(headerTops, function(i, n){
                        if( (scrollTop >= (headerTops[i])  && scrollTop < (headerTops[i+1] -1))  ){
                            console.log("headerTops[i-1]"+headerTops[i-1]+"headerTops[i]"+headerTops[i]+"  scrollTop ="+ scrollTop+"  headerTops[i+1]= "+headerTops[i+1] +"  i ="+i);
                            $(".BlogAnchor li .nav_item.current").removeClass('current');
                            $(headerNavs[i]).addClass('current');
                            currentScrollHigh = scrollTop;
                            currentContentScrollHigh = headerHightALL[i];
                            currentIndex = i;
                            var mxxHeight = $("#AnchorContent").height()
                            var mscrollTop1 = $("#AnchorContent").scrollTop();  // 当前标签的高度
                            console.log("zukgit2 currentIndex="+ currentIndex );
                            console.log("zukgit2 windows.scrollTop="+ scrollTop );
                            console.log("zukgit2 $(window).height()="+ $(window).height() );
                            console.log("zukgit2 currentContentScrollHigh="+ currentContentScrollHigh );
                            console.log("zukgit2 AnchorContent.mscrollTop="+ mscrollTop1 );
                            console.log("zukgit2 AnchorContent.high="+ mxxHeight );
                            if((currentContentScrollHigh - mscrollTop1)>  ($(window).height()/2)){ //↓ // 如果当前index超出  界面的高度
                                //var sum =   Math.floor(headerHightALL(i) / $(window).height());
                                var dif = currentContentScrollHigh - mscrollTop1;
                                $("#AnchorContent").animate({scrollTop: (currentContentScrollHigh)}, 50);
                                console.log("  i(zukgit3) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
                                console.log(" $(window).height()="+ $(window).height() );
 
                            } else if( ( mscrollTop1 - currentContentScrollHigh )>  0 ){  //↑
                                $("#AnchorContent").animate({scrollTop: currentContentScrollHigh-($("#AnchorContent").height()/3)}, 50);
                                console.log("  i(zukgit4) = "+ i +"   currentContentScrollHigh =" + currentContentScrollHigh +"  mscrollTop1 = "+ mscrollTop1);
                                console.log(" $(window).height()="+ $(window).height() +"   $(#AnchorContent).height()="+mxxHeight);
                            }
                            return false;
                        }
                    }
                );
                if(scrollTop == 0){
                    $("#AnchorContent").animate({scrollTop: 0}, 50);
                }
                if(scrollTop == $(document).height()){
                    $("#AnchorContent").animate({scrollTop: headerHightALL[headerHightALL.length-1]}, 50);
                }
            });
            $.each(headerNavs, function(i, n){
                    var high = $(n).offset().top;
                    headerHightALL.push(high);
                    console.log("high"+high);
                }
            );
            headerTops = [];
            $.each(headerNavs, function(i, n){
                    $(n).trigger("click");
                    document.querySelector(headerIDALL[i]).scrollIntoView(true);
                    var scrollTop = $(window).scrollTop();
                    headerTops.push(scrollTop);
                    console.log("headerNavs_index="+i +"   scrollTop="+scrollTop +"  headerTops="+headerTops[i]);
                }
            );
            headerTops.push($(document).height());
            $(headerNavs[0]).trigger("click");
            document.querySelector(headerIDALL[0]).scrollIntoView(true);
            var xcontentWidth =  $("#AnchorContent").width();
            var xWidth = $(window).width();
            var xlength = xWidth - xcontentWidth;
            $("body").css("marginLeft",xcontentWidth+'px');
            $("body").css("max-width",xlength);
            if(!showNavBar){
                $('.BlogAnchor').hide();
            }
            if(!expandNavBar){
                $(this).html("目录▼");
                $(this).attr({"title":"展开"});
                $("#AnchorContent").hide();
            }
        });
    </script>
    <style>
        /*导航*/
        .BlogAnchor {
			//background: #f1f1f1;
			//padding: 10px;
            line-height: 180%;
            position: fixed;
            left: 0px;   // right: 48px;
            top: 0px;
            border: 1px solid #aaaaaa;
            width: 25%;
            height:90%;
        }
        .BlogAnchor p {
            font-size: 18px;
            color: #15a230;
            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: 2rem;
            font-size: 0.8rem;
        }
 
        .BlogAnchor li .item_h3{
            margin-left: 4rem;
            font-size: 0.8rem;
        }
 
        .BlogAnchor li .item_h4{
            margin-left: 5rem;
            font-size: 0.8rem;
        }
 
        .BlogAnchor li .item_h5{
            margin-left: 6rem;
            font-size: 0.8rem;
        }
 
 
        .BlogAnchor li .item_h6{
            margin-left: 7rem;
            font-size: 0.8rem;
        }
 
        .BlogAnchor li .nav_item.current{
            color: #ff1e45;
            background-color: white;
        }
        #AnchorContentToggle {
            font-size: 13px;
            font-weight: normal;
            color: #FFF;
            display: inline-block;
            line-height: 20px;
            background: #9bc2c1;
            font-style: normal;
            padding: 1px 8px;
        }
        .BlogAnchor a:hover {
            color: #5cc26f;
        }
        .BlogAnchor a {
            text-decoration: none;
        }
    </style>

输入表情

注意： MarkDown中的表情代码是由:表情代码:组成的不要漏掉了左右两边的:！！！

https://blog.csdn.net/m0_48463380/article/details/126487951

常用符号：

❌ :x:

✔️ :heavy_check_mark:

参考资料

https://mp.weixin.qq.com/s/mQ28YYs0MKA2SUaUH2Q7Ig

标签：body,教程,Markdown,Typora,height,item,tag,var,scrollTop
From： https://www.cnblogs.com/knlbase/p/18645925