标签：body counter h2 博客园 多级 添加 var document sideBarContents

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: 30px  
51. }  
52.     
53. #sideBarContents h2 {  
54.     margin-top: 10px;  
55.     font-size: 20px  
56. }  
57.     
58.     
59. #sideBarContents h3 {  
60.     margin-top: 10px;  
61.     font-size: 10px  
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. #cnblogs_post_body  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. #cnblogs_post_body {  
91.   counter-reset: section1;  
92. }  
93.     
94.     
95. #cnblogs_post_body  h1::before {  
96.   counter-increment: section1;  
97.   content: "" counter(section1) " ";  
98. }  
99.     
100.     
101. /*添加h2目录开始*/  
102. #cnblogs_post_body  h1 {  
103.   counter-reset: section2;  
104. }  
105. #cnblogs_post_body 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.getElementById(id);  
101.         if(!elem) return false;  
102.         //获取div中所有元素结点  
103.         var nodes = elem.querySelectorAll("h1, h2, h3, h4, h5, h6");  
104.         //创建博客目录的div容器  
105.         var divSideBar = document.createElement('DIV');  
106.         divSideBar.className = 'uprightsideBar';  
107.         divSideBar.setAttribute('id', 'uprightsideBar');  
108.         var divSideBarTab = document.createElement('DIV');  
109.         divSideBarTab.setAttribute('id', 'sideBarTab');  
110.         divSideBar.appendChild(divSideBarTab);  
111.         var h2 = document.createElement('H2');  
112.         divSideBarTab.appendChild(h2);  
113.         var txt = document.createTextNode('目录导航');  
114.         h2.appendChild(txt);  
115.         var divSideBarContents = document.createElement('DIV');  
116.         //divSideBarContents.style.display = 'none';  
117.         divSideBarContents.setAttribute('id', 'sideBarContents');  
118.         divSideBar.appendChild(divSideBarContents);  
119.         //创建自定义列表  
120.         var dlist = document.createElement("dl");  
121.         divSideBarContents.appendChild(dlist);  
122.         var num = 0;//统计找到的mt和st  
123.         mtmt = mt.toUpperCase();//转化成大写  
124.         stst = st.toUpperCase();//转化成大写  
125.     
126.         debugger;  
127.         //遍历所有元素结点  
128.         for(var i=0; i<nodes.length; i++)  
129.         {  
130.             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")      
131.             {  
132.                 //获取标题文本  
133.                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签  
134.                 nodetextnodetext = nodetext.replace(/ /ig, "");//替换掉所有的   
135.                 nodetext = BlogDirectory.htmlDecode(nodetext);  
136.                 //插入锚          
137.                 nodes[i].setAttribute("id", "blogTitle" + num);  
138.                 var item;  
139.                 switch(nodes[i].nodeName)  
140.                 {  
141.                     case mt:    //若为主标题   
142.                         item = document.createElement("h1");  
143.                         break;  
144.                     case st:    //若为子标题  
145.                         item = document.createElement("h2");  
146.                         break;  
147.                     case "H3":    //若为子标题  
148.                         item = document.createElement("h3");  
149.                         break;  
150.                     case "H4":    //若为子标题  
151.                         item = document.createElement("h4");  
152.                         break;  
153.                     case "H5":    //若为子标题  
154.                         item = document.createElement("h5");  
155.                         break;  
156.                     case "H6":    //若为子标题  
157.                         item = document.createElement("h6");  
158.                         break;  
159.                 }  
160.                     
161.                 //创建锚链接  
162.                 var itemtext = document.createTextNode(nodetext);  
163.                 item.appendChild(itemtext);  
164.                 item.setAttribute("name", num);  
165.                 item.onclick = function(){        //添加鼠标点击触发函数  
166.                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));  
167.                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;  
168.                 };              
169.                     
170.                 //将自定义表项加入自定义列表中  
171.                 dlist.appendChild(item);  
172.                 num++;  
173.             }  
174.         }  
175.             
176.         if(num == 0) return false;   
177.         /*鼠标进入时的事件处理*/  
178.         divSideBarTab.onmouseenter = function(){  
179.             divSideBarContents.style.display = 'block';  
180.         }  
181.         /*鼠标离开时的事件处理*/  
182.         divSideBar.onmouseleave = function() {  
183.             divSideBarContents.style.display = 'block';  
184.         }  
185.     
186.         document.body.appendChild(divSideBar);  
187.     }  
188.         
189. };  
190.     
191. window.onload=function(){  
192.     /*页面加载完成之后生成博客目录*/  
193.     BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2",20);  
194. }  
195. </script>  

1. 参考

   1. word中生成代码样式

可以通过网站

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

标签：body,counter,h2,博客园,多级,添加,var,document,sideBarContents
来源： https://www.cnblogs.com/mingyongcheng/p/12989545.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。