博客园添加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>
相关推荐
Kingcxx 2019-12-21
James0 2019-12-15
pengkunstone 2019-12-14
xiangxiaojun 2019-12-11
somboy 2019-12-06
福叔 2019-12-05
Hesland 2019-11-12
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-27
Xhj 2019-06-30
ITxiaobaibai 2019-03-20
Alexantao 2018-10-09
CloudXli 2016-06-19
Moswen 2011-12-01
sandyhmily 2013-07-05
lancanfei 2015-09-28
85510394 2013-01-06