博客园目录生成和页面优化
一直以为博客园和CSDN不一样，无法生成目录，前两天看到一个人的博客发现有目录，就去网上搜了一下，发现通过脚本可以实现，下面就介绍详细的步骤
一、目录生成
1.1 操作步骤
1、在博客园后台【设置】找到【博客侧边栏公告】，点击右边申请支持JS代码（博主已经申请，所以显示的是支持JS代码）
2、将下面代码复制到【页脚HTML代码】
1 <script language="javascript" type="text/javascript"> 2 //生成目录索引列表 3 function GenerateContentList() 4 { 5 var jquery_h1_list = $('#cnblogs_post_body h1'); 6 if (jquery_h1_list.length == 0) { return; } 7 if ($('#cnblogs_post_body').length == 0) { return; } 8 9 var content = '<a name="_labelTop"></a>'; 10 content += '<div id="navCategory">'; 11 content += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>'; 12 // 一级目录 start 13 content += '<ul class="first_class_ul">'; 14 15 for (var i = 0; i < jquery_h1_list.length; i++) 16 { 17 var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部(go to top)</a><a name="_label' + i + '"></a></div>'; 18 $(jquery_h1_list[i]).before(go_to_top); 19 20 // 一级目录的一条 21 var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>'; 22 23 var nextH1Index = i + 1; 24 if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; } 25 var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2"); 26 // 二级目录 start 27 if (jquery_h2_list.length > 0) 28 { 29 //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">'; 30 li_content += '<ul class="second_class_ul">'; 31 } 32 for (var j = 0; j < jquery_h2_list.length; j++) 33 { 34 var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>'; 35 $(jquery_h2_list[j]).before(go_to_top2); 36 // 二级目录的一条 37 li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>'; 38 39 var nextH2Index = j + 1; 40 var next; 41 if (nextH2Index == jquery_h2_list.length) 42 { 43 if (i + 1 == jquery_h1_list.length) 44 { 45 next = jquery_h1_list[0]; 46 } 47 else 48 { 49 next = jquery_h1_list[i + 1]; 50 } 51 } 52 else 53 { 54 next = jquery_h2_list[nextH2Index]; 55 } 56 var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3"); 57 // 三级目录 start 58 if (jquery_h3_list.length > 0) 59 { 60 li_content += '<ul class="third_class_ul">'; 61 } 62 63 for (var k = 0; k < jquery_h3_list.length; k++) 64 { 65 var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; 66 $(jquery_h3_list[k]).before(go_to_third_Content); 67 // 三级目录的一条 68 li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>'; 69 } 70 71 if (jquery_h3_list.length > 0) 72 { 73 li_content += '</ul>'; 74 } 75 li_content += '</li>'; 76 // 三级目录 end 77 } 78 if (jquery_h2_list.length > 0) 79 { 80 li_content +='</ul>'; 81 } 82 li_content +='</li>'; 83 // 二级目录 end 84 85 content += li_content; 86 } 87 // 一级目录 end 88 content += '</ul>'; 89 content += '</div>'; 90 91 $($('#cnblogs_post_body')[0]).prepend(content); 92 } 93 94 GenerateContentList(); 95 </script> 96 levels of contents
3、保存，此处只显示三级标题，如有需求，自行修改
1.2 效果
效果如本博客所示。
二、页面优化
2.1 页面定制
将下面代码插入到【页面定制CSS代码】
1 #cnblogs_post_body 2 { 3 color: black; 4 font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; 5 font-size: 15px; 6 } 7 #cnblogs_post_body h1 { 8 text-align:center; 9 background: #333366; 10 border-radius: 6px 6px 6px 6px; 11 box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 12 color: #FFFFFF; 13 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 14 font-size: 23px; 15 font-weight: bold; 16 height: 25px; 17 line-height: 25px; 18 margin: 18px 0 !important; 19 padding: 8px 0 5px 5px; 20 text-shadow: 2px 2px 3px #222222; 21 } 22 #cnblogs_post_body h2 { 23 text-align:center; 24 background: #006699; 25 border-radius: 6px 6px 6px 6px; 26 box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 27 color: #FFFFFF; 28 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 29 font-size: 20px; 30 font-weight: bold; 31 height: 25px; 32 line-height: 25px; 33 margin: 18px 0 !important; 34 padding: 8px 0 5px 5px; 35 text-shadow: 2px 2px 3px #222222; 36 } 37 #cnblogs_post_body h3 { 38 background: #0099CC; 39 border-radius: 6px 6px 6px 6px; 40 box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 41 color: #FFFFFF; 42 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 43 font-size: 18px; 44 font-weight: bold; 45 height: 25px; 46 line-height: 25px; 47 margin: 18px 0 !important; 48 padding: 8px 0 5px 5px; 49 text-shadow: 2px 2px 3px #222222; 50 }
2.2 博客侧边栏公告
将下面代码插入到【博客侧边栏公告】
1 <script type="text/javascript"> 2 //以下是锚点JS 3 var a = $(document); 4 a.ready(function() { 5 var b = $('body'), 6 d = 'sideToolbar', 7 e = 'sideCatalog', 8 f = 'sideCatalog-catalog', 9 g = 'sideCatalogBtn', 10 h = 'sideToolbar-up', 11 i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>', 12 j = '', 13 k = 200, 14 l = 0, 15 m = 0, 16 n = 0, 17 //限制存在个数，如数量过多，则只显示h2，不显示h3 18 //o, p = 13, 19 o, p = 100, 20 q = true, 21 r = true, 22 s = b; 23 if(s.length === 0) { 24 return 25 }; 26 b.append(i); 27 //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 28 //o = s.find(':header'); 29 o = $('#cnblogs_post_body').find(':header') 30 if(o.length > p) { 31 r = false; 32 var t = s.find('h2'); 33 var u = s.find('h3'); 34 if(t.length + u.length > p) { 35 q = false 36 } 37 }; 38 o.each(function(t) { 39 var u = $(this), 40 v = u[0]; 41 42 var title = u.text(); 43 var text = u.text(); 44 45 u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 46 //if (!u.attr('id')) { 47 // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 48 //}; 49 if(v.localName === 'h2') { 50 l++; 51 m = 0; 52 if(text.length > 14) text = text.substr(0, 20) + "..."; 53 j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; 54 } else if(v.localName === 'h3') { 55 m++; 56 n = 0; 57 if(q) { 58 if(text.length > 12) text = text.substr(0, 16) + "..."; 59 j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; 60 } 61 } else if(v.localName === 'h4') { 62 n++; 63 if(r) { 64 j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; 65 } 66 } 67 }); 68 $('#' + f + '>ul').html(j); 69 b.data('spy', 'scroll'); 70 b.data('target', '.sideCatalogBg'); 71 $('body').scrollspy({ 72 target: '.sideCatalogBg' 73 }); 74 $sideCatelog = $('#' + e); 75 $('#' + g).on('click', function() { 76 if($(this).hasClass('sideCatalogBtnDisable')) { 77 $sideCatelog.css('visibility', 'hidden') 78 } else { 79 $sideCatelog.css('visibility', 'visible') 80 }; 81 $(this).toggleClass('sideCatalogBtnDisable') 82 }); 83 $('#' + h).on('click', function() { 84 $("html,body").animate({ 85 scrollTop: 0 86 }, 500) 87 }); 88 $sideToolbar = $('#' + d); 89 90 //通过判断评论框是否存在显示索引目录 91 var commentDiv = $("#blog-comments-placeholder"); 92 93 a.on('scroll', function() { 94 //评论框存在才调用方法 95 if(commentDiv.length > 0) { 96 var t = a.scrollTop(); 97 if(t > k) { 98 $sideToolbar.css('display', 'block'); 99 $('#gotop').show() 100 } else { 101 $sideToolbar.css('display', 'none') 102 $('#gotop').hide() 103 } 104 } 105 }) 106 }); 107 //以上是锚点JS 108 //以下是返回顶部JS 109 $(function() { 110 $('body').append('<div id="gotop" onclick="goTop();"></div>'); 111 }); 112 113 function goTop(u, t, r) { 114 var scrollActivate = !0; 115 if(scrollActivate) { 116 u = u || 0.1; 117 t = t || 16; 118 var s = 0, 119 q = 0, 120 o = 0, 121 p = 0, 122 n = 0, 123 j = 0; 124 document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0); 125 document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0); 126 n = window.scrollX || 0; 127 j = window.scrollY || 0; 128 s = Math.max(s, Math.max(o, n)); 129 q = Math.max(q, Math.max(p, j)); 130 p = 1 + u; 131 window.scrollTo(Math.floor(s / p), Math.floor(q / p)); 132 0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r() 133 } else { 134 scrollActivate = !0 135 } 136 } 137 //以上是返回顶部JS 138 </script>
2.3 页首定制
将下面代码插入到【页首HTML】
1 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"> 2 <script src="https://files.cnblogs.com/files/miangao/maodian.js"></script> 3 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
本文参考了https://www.cnblogs.com/yuncong/p/10121464.html 博主的文章，谢谢该博主