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