博客园添加多级目录

zoukankan html css js c++ java

博客园添加多级目录
1. 需求
1. 用word文档编写博客
用word 创建博客，博客的文章结构采用多目录
1. 博客能够导航
  博客能够生成目录
  博客能够生成目录级别
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. }
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. }
37. #sideBarContents dt{
38. margin-top:5px;
39. margin-left:5px;
40. }
43. .post>h2{
44. text-align: center;
45. font-size: xx-large;
46. }
48. #sideBarContents h1 {
49. margin-top: 10px;
50. font-size: 15px
51. }
53. #sideBarContents h2 {
54. margin-top: 10px;
55. font-size: 15px
56. }
59. #sideBarContents h3 {
60. margin-top: 10px;
61. font-size: 15px
62. }
64. #sideBarContents dd, dt {
65. cursor: pointer;
66. }
68. #sideBarContents dd:hover, dt:hover {
69. color:#A7995A;
70. }
71. #sideBarContents dd{
72. margin-left:20px;
73. }
76. /*cnblogs_post_body */
78. ol{
79. list-style-type:none;
80. padding-left: 0px;
82. }
84. .cnblogs_post_body ol li {
85. list-style-type: none;
86. }
89. /*添加h1目录开始*/
90. #main {
91. counter-reset: section1;
92. }
95. #main h1::before {
96. counter-increment: section1;
97. content: "" counter(section1) " ";
98. }
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. }
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. }
123. /*sideBarContents */
125. #sideBarContents ol{
126. list-style-type:none;
127. padding-left: 0px;
129. }
131. #sideBarContents ol li {
132. list-style-type: none;
133. }
136. /*添加h1目录开始*/
137. #sideBarContents {
138. counter-reset: section1;
139. }
142. #sideBarContents h1::before {
143. counter-increment: section1;
144. content: "" counter(section1) " ";
145. }
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. }
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. },
23. /*
24. 获取滚动条当前位置
25. */
26. getScrollBarPosition:function () {
27. var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
28. return scrollBarPosition;
29. },
31. /*
32. 移动滚动条，finalPos 为目的位置，internal 为移动速度
33. */
34. moveScrollBar:function(finalpos, interval) {
36. //若不支持此方法，则退出
37. if(!window.scrollTo) {
38. return false;
39. }
41. //窗体滚动时，禁用鼠标滚轮
42. window.onmousewheel = function(){
43. return false;
44. };
46. //清除计时
47. if (document.body.movement) {
48. clearTimeout(document.body.movement);
49. }
51. var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
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. }
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. }
79. //进行下一步移动
80. var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
81. document.body.movement = setTimeout(repeat, interval);
82. },
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. },
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();//转化成大写
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. }
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. };
171. //将自定义表项加入自定义列表中
172. dlist.appendChild(item);
173. num++;
174. }
175. }
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. }
187. document.body.appendChild(divSideBar);
188. }
190. };
192. window.onload=function(){
193. debugger;
194. /*页面加载完成之后生成博客目录*/
195. BlogDirectory.createBlogDirectory("cnblogs-post-body","h1","h2",20);
196. }
197. </script>
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. 问题
  列表编号还是不正常
可以在下面的地址用以下代码测试
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>
9. h1 {
10. counter-reset: subsection;
11. }
13. h2::before {
14. counter-increment: subsection;
15. content: counter(section) "." counter(subsection) " ";
16. }
17. </style>
18. </head>
19. <body>
21. <li>
22. <h1>111</h1>
23. </li>
24. <h2>HTML 教程</h2>
25. <h2>CSS 教程</h2>
29. </body>
30. </html>
查看全文

相关阅读:
回老家
 防疫针
 平安夜
 虎威威
 圣诞联欢会
 小老虎飞船
 电子积木
 打印
 周日大悦城
 又一年毕业季

原文地址：https://www.cnblogs.com/mingyongcheng/p/12989545.html

博客园添加多级目录

需求

用word文档编写博客

博客能够导航

博客能够生成目录

博客能够生成目录级别

博客园设置

页面定制 CSS 代码

页首 HTML 代码

参考

word中生成代码样式

css计数器

参考博客

HTML 格式化

问题

列表编号还是不正常