博客园添加多级目录

   

1. 需求

   

1. 用word文档编写博客

用word 创建博客，博客的文章结构采用多目录

   

1. 博客能够导航

   1. 博客能够生成目录

   2. 博客能够生成目录级别

   

1. 博客园设置

   

1. 页面定制 CSS 代码

   

博客园登录后

https://i.cnblogs.com/settings

   

选择设置，在页面定制CSS代码中拷贝下面的样式

1. /*生成博客目录的CSS*/  
2. #uprightsideBar{  
3.     font-size:12px;  
4.     font-family:Arial, Helvetica, sans-serif;  
5.     text-align:left;  
6.     position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/  
7.     top:50px;  
8.     right:0px;  
9.     width: auto;  
10.     height: auto;   
11. }  
12. #sideBarTab{  
13.     float:left;  
14.     width:30px;   
15.     border:1px solid #e5e5e5;  
16.     border-right:none;  
17.     text-align:center;  
18.     background:#ffffff;  
19. }  
20.     
21. #sideBarContents{  
22.     float:left;  
23.     overflow:auto;   
24.     overflow-x:hidden;!important;  
25.     width:270px;  
26.     min-height:108px;  
27.     max-height:460px;  
28.     border:1px solid #e5e5e5;  
29.     border-right:none;   
30.     background:#ffffff;  
31. }  
32. #sideBarContents dl{  
33.     margin:0;  
34.     padding:0;  
35. }  
36.     
37. #sideBarContents dt{  
38.     margin-top:5px;  
39.     margin-left:5px;  
40. }  
41.     
42.     
43. .post>h2{  
44.     text-align: center;  
45.     font-size: xx-large;  
46. }  
47.     
48. #sideBarContents h1 {  
49.     margin-top: 10px;  
50.     font-size: 15px  
51. }  
52.     
53. #sideBarContents h2 {  
54.     margin-top: 10px;  
55.     font-size: 15px  
56. }  
57.     
58.     
59. #sideBarContents h3 {  
60.     margin-top: 10px;  
61.     font-size: 15px  
62. }  
63.     
64. #sideBarContents dd, dt {  
65.     cursor: pointer;  
66. }  
67.     
68. #sideBarContents dd:hover, dt:hover {  
69.     color:#A7995A;  
70. }  
71. #sideBarContents dd{  
72.     margin-left:20px;  
73. }  
74.     
75.     
76. /*cnblogs_post_body */  
77.     
78. ol{  
79.     list-style-type:none;  
80.     padding-left: 0px;  
81.     
82.     }  
83.     
84. .cnblogs_post_body ol li {  
85.     list-style-type: none;  
86. }  
87.     
88.         
89. /*添加h1目录开始*/  
90. #main {  
91.   counter-reset: section1;  
92. }  
93.     
94.     
95. #main h1::before {  
96.   counter-increment: section1;  
97.   content: "" counter(section1) " ";  
98. }  
99.     
100.     
101. /*添加h2目录开始*/  
102. #main  h1 {  
103.   counter-reset: section2;  
104. }  
105. #main ol h2::before {  
106.   counter-increment: section2;  
107.   content: counter(section1) "." counter(section2) " ";  
108. }  
109.     
110.     
111. /*添加h3目录开始*/  
112. .cnblogs_post_body  h2 {  
113.   counter-reset: section3;  
114. }  
115. .cnblogs_post_body  h3::before {  
116.   counter-increment: section3;  
117.   content: counter(section1) "."counter(section2) "." counter(section3) " ";  
118. }  
119.     
120.     
121.     
122.     
123. /*sideBarContents  */  
124.     
125. #sideBarContents    ol{  
126.     list-style-type:none;  
127.     padding-left: 0px;  
128.     
129.     }  
130.     
131. #sideBarContents  ol li {  
132.     list-style-type: none;  
133. }  
134.     
135.         
136. /*添加h1目录开始*/  
137. #sideBarContents  {  
138.   counter-reset: section1;  
139. }  
140.     
141.     
142. #sideBarContents   h1::before {  
143.   counter-increment: section1;  
144.   content: "" counter(section1) " ";  
145. }  
146.     
147.     
148. /*添加h2目录开始*/  
149. #sideBarContents   h1 {  
150.   counter-reset: section2;  
151. }  
152. #sideBarContents  h2::before {  
153.   counter-increment: section2;  
154.   content: counter(section1) "." counter(section2) " ";  
155. }  
156.     
157.     
158. /*添加h3目录开始*/  
159. #sideBarContents   h2 {  
160.   counter-reset: section3;  
161. }  
162. #sideBarContents   h3::before {  
163.   counter-increment: section3;  
164.   content: counter(section1) "."counter(section2) "." counter(section3) " ";  
165. }  

 

   

1. 页首 HTML 代码    

下面的脚本会在博客右上角创建一个目录列表，可以通过这个列表导航到相关的段落

在设置中的"页首HTML代码"中复制下面的代码

 

1. <script type="text/javascript">  
2. /*  
3.     功能：生成博客目录的JS工具  
4.     测试：IE8，火狐，google测试通过  
5.     孤傲苍狼  
6.     2014-5-11  
7. */  
8. var BlogDirectory = {  
9.     /*  
10.         获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）  
11.     */  
12.     getElementPosition:function (ele) {          
13.         var topPosition = 0;  
14.         var leftPosition = 0;  
15.         while (ele){                
16.             topPosition += ele.offsetTop;  
17.             leftPosition += ele.offsetLeft;          
18.             eleele = ele.offsetParent;       
19.         }    
20.         return {top:topPosition, left:leftPosition};   
21.     },  
22.     
23.     /*  
24.     获取滚动条当前位置  
25.     */  
26.     getScrollBarPosition:function () {  
27.         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;  
28.         return  scrollBarPosition;  
29.     },  
30.         
31.     /*  
32.     移动滚动条，finalPos 为目的位置，internal 为移动速度  
33.     */  
34.     moveScrollBar:function(finalpos, interval) {  
35.     
36.         //若不支持此方法，则退出  
37.         if(!window.scrollTo) {  
38.             return false;  
39.         }  
40.     
41.         //窗体滚动时，禁用鼠标滚轮  
42.         window.onmousewheel = function(){  
43.             return false;  
44.         };  
45.               
46.         //清除计时  
47.         if (document.body.movement) {   
48.             clearTimeout(document.body.movement);   
49.         }   
50.     
51.         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置  
52.     
53.         var dist = 0;   
54.         if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出  
55.             window.onmousewheel = function(){  
56.                 return true;  
57.             }  
58.             return true;   
59.         }   
60.         if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离  
61.             dist = Math.ceil((finalpos - currentpos)/10);   
62.             currentpos += dist;   
63.         }   
64.         if (currentpos > finalpos) {   
65.             dist = Math.ceil((currentpos - finalpos)/10);   
66.             currentpos -= dist;   
67.         }  
68.             
69.         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置  
70.         window.scrollTo(0, currentpos);//移动窗口  
71.         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出  
72.         {  
73.             window.onmousewheel = function(){  
74.                 return true;  
75.             }  
76.             return true;  
77.         }  
78.             
79.         //进行下一步移动  
80.         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";   
81.         document.body.movement = setTimeout(repeat, interval);   
82.     },  
83.         
84.     htmlDecode:function (text){  
85.         var temp = document.createElement("div");  
86.         temp.innerHTML = text;  
87.         var output = temp.innerText || temp.textContent;  
88.         temp = null;  
89.         return output;  
90.     },  
91.     
92.     /*  
93.     创建博客目录，  
94.     id表示包含博文正文的 div 容器的 id，  
95.     mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），  
96.     interval 表示移动的速度  
97.     */  
98.     createBlogDirectory:function (id, mt, st, interval){  
99.          //获取博文正文div容器  
100.         var elem = document.getElementsByClassName(id);  
101.      elemelem =elem[0];  
102.         if(!elem) return false;  
103.         //获取div中所有元素结点  
104.         var nodes = elem.querySelectorAll("h1, h2, h3, h4, h5, h6");  
105.         //创建博客目录的div容器  
106.         var divSideBar = document.createElement('DIV');  
107.         divSideBar.className = 'uprightsideBar';  
108.         divSideBar.setAttribute('id', 'uprightsideBar');  
109.         var divSideBarTab = document.createElement('DIV');  
110.         divSideBarTab.setAttribute('id', 'sideBarTab');  
111.         divSideBar.appendChild(divSideBarTab);  
112.         var h2 = document.createElement('H2');  
113.         divSideBarTab.appendChild(h2);  
114.         var txt = document.createTextNode('目录导航');  
115.         h2.appendChild(txt);  
116.         var divSideBarContents = document.createElement('DIV');  
117.         //divSideBarContents.style.display = 'none';  
118.         divSideBarContents.setAttribute('id', 'sideBarContents');  
119.         divSideBar.appendChild(divSideBarContents);  
120.         //创建自定义列表  
121.         var dlist = document.createElement("dl");  
122.         divSideBarContents.appendChild(dlist);  
123.         var num = 0;//统计找到的mt和st  
124.         mtmt = mt.toUpperCase();//转化成大写  
125.         stst = st.toUpperCase();//转化成大写  
126.     
127.         debugger;  
128.         //遍历所有元素结点  
129.         for(var i=0; i<nodes.length; i++)  
130.         {  
131.             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st|| nodes[i].nodeName == "H3"|| nodes[i].nodeName == "H4"|| nodes[i].nodeName == "H5"|| nodes[i].nodeName == "H6")      
132.             {  
133.                 //获取标题文本  
134.                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签  
135.                 nodetextnodetext = nodetext.replace(/ /ig, "");//替换掉所有的   
136.                 nodetext = BlogDirectory.htmlDecode(nodetext);  
137.                 //插入锚          
138.                 nodes[i].setAttribute("id", "blogTitle" + num);  
139.                 var item;  
140.                 switch(nodes[i].nodeName)  
141.                 {  
142.                     case mt:    //若为主标题   
143.                         item = document.createElement("h1");  
144.                         break;  
145.                     case st:    //若为子标题  
146.                         item = document.createElement("h2");  
147.                         break;  
148.                     case "H3":    //若为子标题  
149.                         item = document.createElement("h3");  
150.                         break;  
151.                     case "H4":    //若为子标题  
152.                         item = document.createElement("h4");  
153.                         break;  
154.                     case "H5":    //若为子标题  
155.                         item = document.createElement("h5");  
156.                         break;  
157.                     case "H6":    //若为子标题  
158.                         item = document.createElement("h6");  
159.                         break;  
160.                 }  
161.                     
162.                 //创建锚链接  
163.                 var itemtext = document.createTextNode(nodetext);  
164.                 item.appendChild(itemtext);  
165.                 item.setAttribute("name", num);  
166.                 item.onclick = function(){        //添加鼠标点击触发函数  
167.                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));  
168.                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;  
169.                 };              
170.                     
171.                 //将自定义表项加入自定义列表中  
172.                 dlist.appendChild(item);  
173.                 num++;  
174.             }  
175.         }  
176.             
177.         if(num == 0) return false;   
178.         /*鼠标进入时的事件处理*/  
179.         divSideBarTab.onmouseenter = function(){  
180.             divSideBarContents.style.display = 'block';  
181.         }  
182.         /*鼠标离开时的事件处理*/  
183.         divSideBar.onmouseleave = function() {  
184.             divSideBarContents.style.display = 'block';  
185.         }  
186.     
187.         document.body.appendChild(divSideBar);  
188.     }  
189.         
190. };  
191.     
192. window.onload=function(){  
193.     debugger;  
194.     /*页面加载完成之后生成博客目录*/  
195.     BlogDirectory.createBlogDirectory("cnblogs-post-body","h1","h2",20);  
196. }  
197. </script>  

   

1. 参考

   1. word中生成代码样式

可以通过网站

http://www.planetb.ca/syntax-highlight-word

   

1. css计数器

用来是成目录前面的数字编码

https://www.runoob.com/try/try.php?filename=trycss_counters2

1. 参考博客

https://www.cnblogs.com/xuehaoyue/p/6650533.html

 

   

1. HTML 格式化

用来美化html格式，在线的

   

https://tool.chinaz.com/tools/jsformat.aspx

   

   

1. 问题

   1. 列表编号还是不正常

可以在下面的地址用以下代码测试

https://www.runoob.com/try/try.php?filename=trycss_counters2

   

下面红色的部分有问题，li嵌套h1后导致css计数器失效。

希望大神解惑。

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="utf-8">  
5. <title>菜鸟教程(runoob.com)</title>  
6. <style>  
7.       
8.       
9. h1 {  
10.   counter-reset: subsection;  
11. }  
12.       
13. h2::before {  
14.   counter-increment: subsection;  
15.   content: counter(section) "." counter(subsection) " ";  
16. }  
17. </style>  
18. </head>  
19. <body>  
20.       
21.     <li>  
22.     <h1>111</h1>  
23.     </li>  
24. <h2>HTML 教程</h2>  
25. <h2>CSS 教程</h2>  
26.       
27.       
28.       
29. </body>  
30. </html>