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