为Markdown生成的页面添加目录

最新推荐文章于 2024-03-04 14:43:51 发布
最新推荐文章于 2024-03-04 14:43:51 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： # TypeScript/JavaScript/JQuery 文章标签： 为Markdown生成的页面添加目录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianghecai52171314/article/details/103196752
版权

原理

为Markdown生成的页面添加目录非常简单，只需要在Markdown生成的页面的head标签中添加发下所示的内容就行了：

<style type="text/css">
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body {
        font-family: Helvetica, arial, freesans, clean, sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        background-color: #fff;
        padding: 20px;
        max-width: 960px;
        margin: 0 auto;
    }
    body>*:first-child {
        margin-top: 0 !important;
    }
    body>*:last-child {
        margin-bottom: 0 !important;
    }
    p, blockquote, ul, ol, dl, table, pre {
        margin: 15px 0;
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 20px 0 10px;
        padding: 0;
        font-weight: bold;
        -webkit-font-smoothing: antialiased;
    }
    h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
        font-size: inherit;
    }
    h1 {
        font-size: 28px;
        color: #000;
    }
    h2 {
        font-size: 24px;
        border-bottom: 1px solid #ccc;
        color: #000;
    }
    h3 {
        font-size: 18px;
    }
    h4 {
        font-size: 16px;
    }
    h5 {
        font-size: 14px;
    }
    h6 {
        color: #777;
        font-size: 14px;
    }
    body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
        margin-top: 0;
        padding-top: 0;
    }
    a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
        margin-top: 0;
        padding-top: 0;
    }
    h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
        margin-top: 10px;
    }
    a {
        color: #4183C4;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    ul, ol {
        padding-left: 30px;
    }
    ul li > :first-child,
    ol li > :first-child,
    ul li ul:first-of-type,
    ol li ol:first-of-type,
    ul li ol:first-of-type,
    ol li ul:first-of-type {
        margin-top: 0px;
    }
    ul ul, ul ol, ol ol, ol ul {
        margin-bottom: 0;
    }
    dl {
        padding: 0;
    }
    dl dt {
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        padding: 0;
        margin: 15px 0 5px;
    }
    dl dt:first-child {
        padding: 0;
    }
    dl dt>:first-child {
        margin-top: 0px;
    }
    dl dt>:last-child {
        margin-bottom: 0px;
    }
    dl dd {
        margin: 0 0 15px;
        padding: 0 15px;
    }
    dl dd>:first-child {
        margin-top: 0px;
    }
    dl dd>:last-child {
        margin-bottom: 0px;
    }
    pre, code, tt {
        font-size: 12px;
        font-family: Consolas, "Liberation Mono", Courier, monospace;
    }
    code, tt {
        margin: 0 0px;
        padding: 0px 0px;
        white-space: nowrap;
        border: 1px solid #eaeaea;
        background-color: #f8f8f8;
        border-radius: 3px;
    }
    pre>code {
        margin: 0;
        padding: 0;
        white-space: pre;
        border: none;
        background: transparent;
    }
    pre {
        background-color: #f8f8f8;
        border: 1px solid #ccc;
        font-size: 13px;
        line-height: 19px;
        overflow: auto;
        padding: 6px 10px;
        border-radius: 3px;
    }
    pre code, pre tt {
        background-color: transparent;
        border: none;
    }
    kbd {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #DDDDDD;
        background-image: linear-gradient(#F1F1F1, #DDDDDD);
        background-repeat: repeat-x;
        border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
        border-image: none;
        border-radius: 2px 2px 2px 2px;
        border-style: solid;
        border-width: 1px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        line-height: 10px;
        padding: 1px 4px;
    }
    blockquote {
        border-left: 4px solid #DDD;
        padding: 0 15px;
        color: #777;
    }
    blockquote>:first-child {
        margin-top: 0px;
    }

    blockquote>:last-child {
        margin-bottom: 0px;
    }
    hr {
        clear: both;
        margin: 15px 0;
        height: 0px;
        overflow: hidden;
        border: none;
        background: transparent;
        border-bottom: 4px solid #ddd;
        padding: 0;
    }
    table th {
        font-weight: bold;
    }
    table th, table td {
        border: 1px solid #ccc;
        padding: 6px 13px;
    }
    table tr {
        border-top: 1px solid #ccc;
        background-color: #fff;
    }
    table tr:nth-child(2n) {
        background-color: #f8f8f8;
    }
    img {
        max-width: 100%
    }
    /*导航*/
    .BlogAnchor {
        background: #f1f1f1;
        padding: 10px;
        line-height: 180%;
        position: fixed;
        right: 48px;
        top: 48px;
        border: 1px solid #aaaaaa;
    }
    .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 .nav_item.current{
        color: white;
        background-color: #5cc26f;
    }
    #AnchorContentToggle {
        font-size: 13px;
        font-weight: normal;
        color: #FFF;
        display: inline-block;
        line-height: 20px;
        background: #5cc26f;
        font-style: normal;
        padding: 1px 8px;
    }
    .BlogAnchor a:hover {
        color: #5cc26f;
    }
    .BlogAnchor a {
        text-decoration: none;
    }
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    //是否显示导航栏
    var showNavBar = true;
    //是否展开导航栏
    var expandNavBar = true;
    $(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;
        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;" οnclick="$(\'.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;
        $("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 = '';
            if(tag == vH1Tag){
                id = name = ++vH1Index;
                name = id;
                vH2Index = 0;
                className = 'item_h1';
            }else if(tag == vH2Tag){
                id = vH1Index + '_' + ++vH2Index;
                name = vH1Index + '.' + vH2Index;
                className = 'item_h2';
            }
            $(item).attr("id","wow"+id);
            $(item).addClass("wow_head");
            $("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
            $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" οnclick="return false;" href="#" link="#wow'+id+'">'+name+" · "+$(this).text()+'</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){
                    $(".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>

示例：

Markdown文本

# 1、说明
## 1.1、前置课程（★★★★★）
## 1.2、软件版本：
## 1.3、配置说明
# 2、解压
# 3、配置环境变量
# 4、配置Hadoop
## 4.1、编辑hadoop-env.sh
## 4.2、编辑core-site.xml
## 4.3、编辑hdfs-site.xml
## 4.4、编辑mapred-site.xml
## 4.5、编辑yarn-site.xml
## 4.6、编辑slaves
# 5、分发Hadoop
# 6、格式化NameNode
# 7、启动Hadoop

生成的html代码

<h1 id="h1-1-">
    <a name="1、说明" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>1、说明
</h1>
<h2 id="h2-1-1-">
    <a name="1.1、前置课程（★★★★★）" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>1.1、前置课程（★★★★★）
</h2>
<h2 id="h2-1-2-">
    <a name="1.2、软件版本：" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>1.2、软件版本：
</h2>
<h2 id="h2-1-3-">
    <a name="1.3、配置说明" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>1.3、配置说明
</h2>
<h1 id="h1-2-">
    <a name="2、解压" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>2、解压
</h1>
<h1 id="h1-3-">
    <a name="3、配置环境变量" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>3、配置环境变量
</h1>
<h1 id="h1-4-hadoop">
    <a name="4、配置Hadoop" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4、配置Hadoop
</h1>
<h2 id="h2-4-1-hadoop-env-sh">
    <a name="4.1、编辑hadoop-env.sh" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.1、编辑hadoop-env.sh
</h2>
<h2 id="h2-4-2-core-site-xml">
    <a name="4.2、编辑core-site.xml" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.2、编辑core-site.xml
</h2>
<h2 id="h2-4-3-hdfs-site-xml">
    <a name="4.3、编辑hdfs-site.xml" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.3、编辑hdfs-site.xml
</h2>
<h2 id="h2-4-4-mapred-site-xml">
    <a name="4.4、编辑mapred-site.xml" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.4、编辑mapred-site.xml
</h2>
<h2 id="h2-4-5-yarn-site-xml">
    <a name="4.5、编辑yarn-site.xml" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.5、编辑yarn-site.xml
</h2>
<h2 id="h2-4-6-slaves">
    <a name="4.6、编辑slaves" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>4.6、编辑slaves
</h2>
<h1 id="h1-5-hadoop">
    <a name="5、分发Hadoop" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>5、分发Hadoop
</h1>
<h1 id="h1-6-namenode">
    <a name="6、格式化NameNode" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>6、格式化NameNode
</h1>
<h1 id="h1-7-hadoop">
    <a name="7、启动Hadoop" class="reference-link"></a>
    <span class="header-link octicon octicon-link"></span>7、启动Hadoop
</h1>

最终生成的页面代码

代码结构

在这里插入图片描述

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>Markdown生成目录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
            }
            body {
                font-family: Helvetica, arial, freesans, clean, sans-serif;
                font-size: 14px;
                line-height: 1.6;
                color: #333;
                background-color: #fff;
                padding: 20px;
                max-width: 960px;
                margin: 0 auto;
            }
            body>*:first-child {
                margin-top: 0 !important;
            }
            body>*:last-child {
                margin-bottom: 0 !important;
            }
            p, blockquote, ul, ol, dl, table, pre {
                margin: 15px 0;
            }
            h1, h2, h3, h4, h5, h6 {
                margin: 20px 0 10px;
                padding: 0;
                font-weight: bold;
                -webkit-font-smoothing: antialiased;
            }
            h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
                font-size: inherit;
            }
            h1 {
                font-size: 28px;
                color: #000;
            }
            h2 {
                font-size: 24px;
                border-bottom: 1px solid #ccc;
                color: #000;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                color: #777;
                font-size: 14px;
            }
            body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
                margin-top: 0;
                padding-top: 0;
            }
            a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
                margin-top: 0;
                padding-top: 0;
            }
            h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
                margin-top: 10px;
            }
            a {
                color: #4183C4;
                text-decoration: none;
            }
            a:hover {
                text-decoration: underline;
            }
            ul, ol {
                padding-left: 30px;
            }
            ul li > :first-child,
            ol li > :first-child,
            ul li ul:first-of-type,
            ol li ol:first-of-type,
            ul li ol:first-of-type,
            ol li ul:first-of-type {
                margin-top: 0px;
            }
            ul ul, ul ol, ol ol, ol ul {
                margin-bottom: 0;
            }
            dl {
                padding: 0;
            }
            dl dt {
                font-size: 14px;
                font-weight: bold;
                font-style: italic;
                padding: 0;
                margin: 15px 0 5px;
            }
            dl dt:first-child {
                padding: 0;
            }
            dl dt>:first-child {
                margin-top: 0px;
            }
            dl dt>:last-child {
                margin-bottom: 0px;
            }
            dl dd {
                margin: 0 0 15px;
                padding: 0 15px;
            }
            dl dd>:first-child {
                margin-top: 0px;
            }
            dl dd>:last-child {
                margin-bottom: 0px;
            }
            pre, code, tt {
                font-size: 12px;
                font-family: Consolas, "Liberation Mono", Courier, monospace;
            }
            code, tt {
                margin: 0 0px;
                padding: 0px 0px;
                white-space: nowrap;
                border: 1px solid #eaeaea;
                background-color: #f8f8f8;
                border-radius: 3px;
            }
            pre>code {
                margin: 0;
                padding: 0;
                white-space: pre;
                border: none;
                background: transparent;
            }
            pre {
                background-color: #f8f8f8;
                border: 1px solid #ccc;
                font-size: 13px;
                line-height: 19px;
                overflow: auto;
                padding: 6px 10px;
                border-radius: 3px;
            }
            pre code, pre tt {
                background-color: transparent;
                border: none;
            }
            kbd {
                -moz-border-bottom-colors: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                background-color: #DDDDDD;
                background-image: linear-gradient(#F1F1F1, #DDDDDD);
                background-repeat: repeat-x;
                border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
                border-image: none;
                border-radius: 2px 2px 2px 2px;
                border-style: solid;
                border-width: 1px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                line-height: 10px;
                padding: 1px 4px;
            }
            blockquote {
                border-left: 4px solid #DDD;
                padding: 0 15px;
                color: #777;
            }
            blockquote>:first-child {
                margin-top: 0px;
            }

            blockquote>:last-child {
                margin-bottom: 0px;
            }
            hr {
                clear: both;
                margin: 15px 0;
                height: 0px;
                overflow: hidden;
                border: none;
                background: transparent;
                border-bottom: 4px solid #ddd;
                padding: 0;
            }
            table th {
                font-weight: bold;
            }
            table th, table td {
                border: 1px solid #ccc;
                padding: 6px 13px;
            }
            table tr {
                border-top: 1px solid #ccc;
                background-color: #fff;
            }
            table tr:nth-child(2n) {
                background-color: #f8f8f8;
            }
            img {
                max-width: 100%
            }
            /*导航*/
            .BlogAnchor {
                background: #f1f1f1;
                padding: 10px;
                line-height: 180%;
                position: fixed;
                right: 48px;
                top: 48px;
                border: 1px solid #aaaaaa;
            }
            .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 .nav_item.current{
                color: white;
                background-color: #5cc26f;
            }
            #AnchorContentToggle {
                font-size: 13px;
                font-weight: normal;
                color: #FFF;
                display: inline-block;
                line-height: 20px;
                background: #5cc26f;
                font-style: normal;
                padding: 1px 8px;
            }
            .BlogAnchor a:hover {
                color: #5cc26f;
            }
            .BlogAnchor a {
                text-decoration: none;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            //是否显示导航栏
            var showNavBar = true;
            //是否展开导航栏
            var expandNavBar = true;
            $(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;
                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;" οnclick="$(\'.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;
                $("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 = '';
                    if(tag == vH1Tag){
                        id = name = ++vH1Index;
                        name = id;
                        vH2Index = 0;
                        className = 'item_h1';
                    }else if(tag == vH2Tag){
                        id = vH1Index + '_' + ++vH2Index;
                        name = vH1Index + '.' + vH2Index;
                        className = 'item_h2';
                    }
                    $(item).attr("id","wow"+id);
                    $(item).addClass("wow_head");
                    $("#AnchorContent").css('max-height', ($(window).height() - 180) + 'px');
                    $("#AnchorContent").append('<li><a class="nav_item '+className+' anchor-link" οnclick="return false;" href="#" link="#wow'+id+'">'+name+" · "+$(this).text()+'</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){
                            $(".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>
    </head>
    <body>
        <h1 id="h1-1-">
            <a name="1、说明" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>1、说明
        </h1>
        <h2 id="h2-1-1-">
            <a name="1.1、前置课程（★★★★★）" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>1.1、前置课程（★★★★★）
        </h2>
        <h2 id="h2-1-2-">
            <a name="1.2、软件版本：" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>1.2、软件版本：
        </h2>
        <h2 id="h2-1-3-">
            <a name="1.3、配置说明" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>1.3、配置说明
        </h2>
        <h1 id="h1-2-">
            <a name="2、解压" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>2、解压
        </h1>
        <h1 id="h1-3-">
            <a name="3、配置环境变量" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>3、配置环境变量
        </h1>
        <h1 id="h1-4-hadoop">
            <a name="4、配置Hadoop" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4、配置Hadoop
        </h1>
        <h2 id="h2-4-1-hadoop-env-sh">
            <a name="4.1、编辑hadoop-env.sh" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.1、编辑hadoop-env.sh
        </h2>
        <h2 id="h2-4-2-core-site-xml">
            <a name="4.2、编辑core-site.xml" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.2、编辑core-site.xml
        </h2>
        <h2 id="h2-4-3-hdfs-site-xml">
            <a name="4.3、编辑hdfs-site.xml" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.3、编辑hdfs-site.xml
        </h2>
        <h2 id="h2-4-4-mapred-site-xml">
            <a name="4.4、编辑mapred-site.xml" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.4、编辑mapred-site.xml
        </h2>
        <h2 id="h2-4-5-yarn-site-xml">
            <a name="4.5、编辑yarn-site.xml" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.5、编辑yarn-site.xml
        </h2>
        <h2 id="h2-4-6-slaves">
            <a name="4.6、编辑slaves" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>4.6、编辑slaves
        </h2>
        <h1 id="h1-5-hadoop">
            <a name="5、分发Hadoop" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>5、分发Hadoop
        </h1>
        <h1 id="h1-6-namenode">
            <a name="6、格式化NameNode" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>6、格式化NameNode
        </h1>
        <h1 id="h1-7-hadoop">
            <a name="7、启动Hadoop" class="reference-link"></a>
            <span class="header-link octicon octicon-link"></span>7、启动Hadoop
        </h1>
    </body>
</html>
梁云亮
关注
专栏目录
Markdown生成侧边目录并自动展开
Sherry102的博客
07-12 828
如何在Markdown生成的html文件中设置顶部目录和侧边目录，并且让侧边目录自动展开。
【使用Markdown自动生成目录的几种方法】
m0_66706847的博客
08-06 9926
有关下载Markdown和自动生成目录的分享。
给markdown生成的html添加左侧边栏目录(TOC)
08-13
给markdownPad2生成的html页面添加左侧边栏目录(TOC)。
markdown手动添加目录
最新发布
CHNIM的博客
03-04 1622
这样，你就手动创建了一个简单的目录，使得读者能够快速浏览和导航你的 Markdown 文档。
markdown添加目录
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
02-05 750
在需要添加目录的地方输入[TOC],然后回车即可. (有时候是@[TOC])?
Markdown添加目录（自定义目录）
爱喝星冰乐的博客
05-24 1264
markdown
markdown生成目录/侧边栏目录
02-27
你可以创建一个HTML模板，包含一个固定侧边栏，然后将Markdown生成的HTML插入到内容区域，确保目录与正文一起显示。 4. **重命名**： 最后，"重命名即可"意味着在完成上述步骤后，保存这个定制的HTML文件，并为其...
markdown生成侧边栏目录模板源码.zip
06-27
标题"markdown生成侧边栏目录模板源码.zip"表明这是一个包含源代码的压缩文件，用于生成Markdown文档的侧边栏目录。这通常涉及到前端开发，特别是与静态网站生成器或者Markdown编辑器相关的项目。源码可能使用...
从markdown生成静态html页面的最简单的方法
08-10
在标题和描述中提到的"从markdown生成静态html页面的最简单的方法"，实际上是指利用JavaScript库或工具快速将Markdown源文件转换成HTML网页的过程。这里我们以`xcatliu-pagic-388d772`为例，这个压缩包很可能包含了...
markdown页面生成侧栏目录页面
10-27
工具是用java运行的，已经打包一个jar，双击jar包即可出现界面。 使用步骤： 第一步：用markdown导出到HTML格式 第二步：双击jar文件，点击菜单栏choose File-->choose mad html-->选择markdown导出的html文件 第三步：点击菜单栏choose File--> save as topchtml。 第四步：打开markdown导出的文件,发现是不是就不一样了呢。 注意：压缩包中的static目录名称不能修改且导出的html必须和static放到一个目录中。
Markdown之添加目录
悄然林静的博客
09-14 3064
方法1：markdown语法 理论依据 使用 markdown 语法增加跳转链接作为目录 // 跳转链接格式 // 1. id不可以有括号和空格，否则没有效果 // 2. 只要目录id和正文中锚点标签内的id对应即可，使用任意标签，支持html语法 [名称](#id) // 锚点标签格式 <span id="链接中的id字符串">此处是锚点：标题一</span> 举个栗子...
markdown 加目录
q742971636的博客
09-07 156
点击这里
Markdown插入目录
youyoudao
01-05 1610
Contens122.12.1.12.1.1.12.1.1.1.1 1 iurhfuoi3riuwhfifiuhrifhu3hfuihou ououhou hjhou 2 ouirhfourouffurho 2.1 ofujvoufhvgojogvongouj;ouh 2.1.1 偶iu耦合 2.1.1.1 结婚后 2.1.1.1.1 符合v关于好几个 ...
markdown增加目录索引，实现点击目录跳转到对应的内容目录标题
itScholar001的博客
11-01 1672
将内容复制到源码编辑器中会发现，其实只是添加了一个@[toc],加了这个后则会在当前位置自动识别出带# 的标题 自动生成目录。如果使用的是typora则可以直接点击段落-》内容目录；​ 这是小小标题1内容。​ 这是小小标题2内容。​ 这是小标题1内容。​ 这是小标题2内容。​ 这是标题1内容。
完美解决Markdown文件添加目录的问题
热门推荐
COCO56的博客
08-11 2万+
文章目录1. 按2. 文件头添加TOC指令2.1. 博客园或本地的VSCode+Markdown Preview Enhanced2.2. CSDN2.3. GitHub+Hexo+hexo-theme-3-hexo3. [auto-markdown-toc](https://marketplace.visualstudio.com/items?itemName=xavierguarch.auto-markdown-toc)3.1. 安装[auto-markdown-toc](https://marketp
markdown生成侧边栏目录索引 js
09-08
6. 最后，将生成的侧边栏插入到页面中适当的位置，以实现想要的布局效果。 需要注意的是，以上仅是实现侧边栏目录索引的一种简单方法。实际情况可能因需求和技术选择的不同而有所变化，可以根据具体情况进行适当的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁云亮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值