博客园添加markdown文章导航栏

Posted xiangzhahao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客园添加markdown文章导航栏相关的知识,希望对你有一定的参考价值。

博客园添加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>

以上是关于博客园添加markdown文章导航栏的主要内容,如果未能解决你的问题,请参考以下文章

博客园添加目录,导航,回到顶部

怎样在博客园中添加自己的导航栏

测试博客园的MarkDown性能

博客园美化教程大集合(超详细,看这篇就够了)

博客园美化

博客园界面风格代码风格自定义设置