博客园添加markdown文章导航栏


博客园添加Markdown文章导航栏

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

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

CSS 展示请自行添加。

仅在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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM