博客园添加markdown文章导航栏

Posted 2021-03-21 xiangzhahao

博客园添加Markdown文章导航栏

我正在翻译Spring Framework文档，发布到博客园之后发现文章太密集，猛一看到比较懵，由于看到博客园支持自定义页面，我觉得添加一个导航栏，结构上会更加清晰一些。
所以在网上搜了搜关于添加导航栏的文章，搜到一个试了试，有些问题，所以就自己写了一个，实现功能如下；

• 主要搜索主页面中的h1-h6
• 根据1-6的级别设置字体大小和缩进宽度
• 滚动时页面最上方的标题对应导航将加粗
• 支持展开隐藏（默认隐藏，如果默认打开，就将js代码第6行display:none改为display:block;）

仅在Microsoft Chromium Edge 上测试通过，没有进行其他浏览器测试。
如发现问题，欢迎评论！

javascript 代码

<script type="text/javascript">
    $(document).ready(function(){
        var allTitle = $(".postBody h1,h2,h3,h4,h5,h6");
        $("body").prepend("<aside id='aside_markdown_navigator'>" 
            + "<div id='aside_markdown_navigator_release_button'>文章目录导航</div>" 
            + "<div id='aside_markdown_navigator_list' style='display: none;'>"
            + "<ul></ul>" 
            + "</div>" 
            + "</aside>");
        allTitle.each(function(i){
            this.id ="markdownH"+ i;
            var tagNum = parseInt($(this)[0].tagName.substring(1));
            $("#aside_markdown_navigator_list ul").append("<li" 
                + " style='font-size: 1"+ (6 - tagNum) +"0%;" 
                + " padding-left:"+ tagNum*20 +"px;'" 
                + " class='aside_markdown_navigator_li'" 
                + " id='scroll"+ $(this).attr("id") +"'>" 
                + $(this).text() 
                +"</li>")
        });
        $(".aside_markdown_navigator_li").on("click",function(){
            console.log($(this).attr("id").substring(6));
            $("html,body").animate({"scrollTop":$("#"+$(this).attr("id").substring(6)).offset().top});
        });
        $(window).scroll(function(){
            var is_choosed = false;
            $(".aside_markdown_navigator_li").each(function(){
                if(is_choosed == false && ($("#"+$(this).attr("id").substring(6)).offset().top-$(document).scrollTop() >= 0)){
                    $(this).css("fontWeight","bold");is_choosed = true;
                }else{
                    $(this).css("fontWeight","");
                }
            });
        });
        $("#aside_markdown_navigator_release_button").on("click",function(){
            $("#aside_markdown_navigator_list").toggle(200);
        });
    });
    //MADE BY FENGYUN
</script>

CSS 代码

CSS 部分是为了使用所以简单调整了下，我不会CSS的

<style>
#navigator {
    position: inherit;
}
#aside_markdown_navigator {
    font-family:Source Code Pro;
    background-color:#f1f1f1;
    position: fixed;
    right: 10px;
    border: 2px solid #ebebeb;
    color: #2c3546;
    width:18%;
    top:10px;
}
#aside_markdown_navigator_release_button {
    text-align: center;
    box-sizing: border-box;
    background-color: lightslategrey;
    font-weight: bold;
    font-size: x-large;
}
.aside_markdown_navigator_li{
    padding: 1px 10px 1px 10px;
    overflow: hidden;
}

.aside_markdown_navigator_li:hover{
    list-style: none;
    background-color: white;
    color: #175199;
}
</style>