博客园美化,自定义你的博客,css+html (iframe)

2021强烈安利:GZ的第三方CNB皮肤☞(目前正用):https://www.yuque.com/awescnb/user/kyi19z

以下为N年前的版本


可能要开始频繁的写博客了,先打扫下自家门口。

收藏备用

网易云原版iframe:

1 <div id="bodyframe" style="visibility: hidden"> 
2 <embed id="floating" ; frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=320 src="https://music.163.com/outchain/player?type=0&id=4927975309&auto=0&height=430"></embed>
3 <div id="floating" onclick="document.all.bodyframe.style.visibility='hidden'" style="background-color: #f1f1f1; cursor: pointer; text-align: center;font-size: 16px;";z-index: 1"> 
4 <font color="#000000">隐藏</font> 
5 </div> </div>
6 
7 <div id="floating" onclick="document.all.bodyframe.style.visibility='visible'"; style="background-color: #00000040; cursor: pointer; text-align: center; font-size: 16px;" z-index: 1"> 
8 <font color="#888888" size:14px>听歌</font></div>
网易云iframe
 1 body{
 2 background-color: #293941;
 3 background:url("博客背景图片URL");
 4 background-attachment:fixed;
 5 background-repeat:no-repeat;
 6 background-position:center;
 7 background-size:cover;
 8 }
 9 #floating {
10 position: fixed;
11 bottom: 0px;
12 right: 0;
13 z-index: 1
14 }
15 .c_ad_block /*关闭下方广告*/
16 {display: none;}
17 .commentform/*关闭下方广告*/
18 {display: none;}
19 #home {
20     margin: 0 auto;
21     width: 65%;
22     min-width: 950px;
23     background-color: #fffffff2;/*透明度调整为f2*/
24     padding: 30px;
25     margin-top: 50px;
26     margin-bottom: 50px;
27     box-shadow: 0 2px 6px rgba(100,100,100,.3);
28 }
29 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
30     background: #fff0;/*透明度调整为0*/
31     margin-bottom: 35px;
32     word-wrap: break-word;
33 }
CSS部分
1 <div id="bodyframe" style="visibility: visible"> 
2 <embed id="floating" ; frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=320 src="https://music.163.com/outchain/player?type=0&id=歌单ID&auto=1&height=430"></embed>
3 <div id="floating" onclick="document.all.bodyframe.style.visibility='hidden'" style="background-color: #f1f1f1; cursor: pointer; text-align: center;font-size: 16px;";z-index: 1"> 
4 <font color="#000000">隐藏  </font> 
5 </div> </div>
侧边栏公告
1 <div>
2 <p><img style="float:right; margin-right: 5%;" title="Hello,world!" 
3 onmouseover="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321113207banner_r_n.png';" onmouseout="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png';" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png" alt=""  /></p>
4 </div>
5 
6 <div id="floating" onclick="document.all.bodyframe.style.visibility='visible'"; style="background-color: #00000040; cursor: pointer; text-align: center; font-size: 16px;" z-index: 1"> 
7 <font color="#ffffff" size:14px>显示  </font></div>
页首
1 <div style="height:800px;" >
2 </div>
3 /*留白*/
页脚

PS: 先申请JS权限(说点好话给管理员~),博客园不支持iframe的字符串,替换成embed即可。

PS2: 网易云iframe插件可能不能播放部分歌曲(即使不用VIP、付费的,你怎么点都不会播放),自己测试下能播放的,放到新歌单就行了。

还有更讲究的:

https://www.cnblogs.com/netube/p/10160706.html

https://www.cnblogs.com/laoguantongxiegogo/p/12488696.html#4521979

https://www.cnblogs.com/bai2018/p/10801430.html

最后一句:简简单单就是美。

再备份一次2020.10.24:

  1 /*html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }*/
  2 body{
  3 background-color: #293941;
  4 background:url(https://tvax1.sinaimg.cn/large/8f8ff1c9gy1gd1p6m28fqj21hc0xc7n0.jpg);
  5 /*background:url(https://tva4.sinaimg.cn/large/8f8ff1c9gy1gdhhlxutuwj21hc0xctpr.jpg);黑白*/
  6 background-attachment:fixed;
  7 background-repeat:no-repeat;
  8 background-position:center;
  9 background-size:cover;
 10 /* cursor: url(https://blog-static.cnblogs.com/files/-AClon-/va11_hand.ico),auto; */
 11 }
 12 /*a:hover{cursor:url(),auto;}*/
 13 #floating {
 14 position: fixed;
 15 bottom: 0px;
 16 right: 0;
 17 z-index: 1
 18 }
 19 
 20 #MySignature {
 21     background: rgb(255, 246, 220);
 22     border-left: 5px solid rgb(255,204,51);
 23     margin: 0;
 24     color: black;
 25     padding-left: 10px;
 26     padding-top: unset;
 27    padding-bottom: unset; 
 28 }
 29 /*关闭下方广告*/
 30 .c_ad_block {display: none;}
 31 /*.recomm-block{display: none;}*/
 32 #ad_t2{display: none;}
 33 #footer {
 34     color: #686868;
 35     text-align: center;
 36     min-height: 15px;
 37     _height: 15px;
 38     border-top: 1px solid #ededed;
 39     margin-top: 0px;
 40     padding-top: 10px;
 41     margin-bottom: 0px;
 42 }
 43 
 44 #home {
 45     margin: 0 auto;
 46     width: 65%;
 47     min-width: 950px;
 48     background-color: #fffffff5;
 49     padding: 20px;
 50     margin-top: 50px;
 51     margin-bottom: 50px;
 52     box-shadow: 0 2px 6px rgba(100,100,100,.3);
 53 }
 54 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
 55     background: none;
 56     margin: 0px auto;
 57     word-wrap: break-word;
 58 }
 59 #blog-calendar {
 60     margin: 5px auto;
 61 }
 62 .CalTodayDay {
 63     background: #8fcbff !important;
 64 }
 65 /*目录生成*/
 66 #uprightsideBar{
 67     font-size:14px;
 68     text-align:left;
 69     position:fixed;
 70 bottom: 13%;
 71     right:0px;
 72     width: auto;
 73     height: auto; 
 74 }
 75 #sideBarTab{
 76     float:right;
 77     width:30px; 
 78 border-right: 3px solid rgb(255,204,51);
 79     text-align:center;
 80 background: #ffffff;
 81     color: #777;
 82     padding: 8px;
 83 box-shadow: 0 0 7px rgba(100, 100, 100, 0.5);
 84 }
 85 
 86 #sideBarContents{
 87     float:right;
 88     overflow:auto; 
 89     overflow-x:hidden;!important;
 90     width:auto;
 91     min-height:50px;
 92     max-height: 450px;
 93     max-width: 50%;
 94     border-left:3px solid rgb(255,204,51);
 95     background:#ffffff;
 96 box-shadow: -1px 0 8px rgba(100, 100, 100, 0.5);
 97 }
 98 #sideBarContents dl{
 99     margin:0;
100     padding:0;
101 }
102 
103 #sideBarContents dt{
104     margin: 12px 10px;
105     font-size: 16px;
106 }
107 #sideBarContents dd{
108     margin:8px 20px;
109 }
110 
111 #sideBarContents dd, dt {
112     cursor: pointer;
113 }
114 #sideBarContents dd:hover, dt:hover {
115     color:rgb(255,204,51);
116 }
117 
118 /* 文章标题样式(这个不是markdown里的标题) */
119 .postTitle, .entrylistPosttitle, .postTitle a {
120     float: none;
121     padding: 0px 10px;
122 }
123 .day .postTitle a {
124     padding-left: 0px;
125 }
126 .entrylistPosttitle a:hover, .postTitle a:hover {
127     margin-left: 15px;
128     color: #0f3647;
129     text-decoration: none;
130 }
131 .postTitle a:link, .postTitle a:visited, .postTitle a:active, .entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
132     color: #21759b;
133     transition: all .4s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
134 }
135 .entrylistTitle, .PostListTitle, .thumbTitle {
136     height: 38px;
137     line-height: 38px;
138     font-size: 16px;
139 border-bottom: 1px solid #ccc;
140     color: #21759b;
141 margin: 0;
142 }
143 .entrylistDescription {
144     color: #777;
145     text-align: left;
146     padding: 5px 15px;
147     font-size: 14px;
148 margin:0;
149 }
150 /* 普通文字样式 */
151 #cnblogs_post_body p, .postBody p {
152     margin: 18px 0px;
153     color: unset;
154     font-size: 16px;
155     text-indent: 0;
156 }
157  
158 .postBody a:link{text-decoration: none;}
159 .postBody a:hover{text-decoration: underline;}
160 
161 /* 标题样式 */
162 #topics .postTitle {
163 font-size:20px;
164     font-weight: bold;
165     line-height: 1.5;
166     width: 100%;
167     padding-left: 5px;
168     border-left: 3px solid #21759b;
169 float: none;
170 }
171 .postBody {font-size:unset;font-size: initial;}
172 
173 .postBody h1, .postBody h2, .postBody h3, .postBody h4, .postBody h5, .postBody h6, #cnblogs_post_body h1,#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6{
174     font-weight: bold;
175     line-height: 1.5;
176     color: unset;
177     }
178 
179 #cnblogs_post_body h1 {
180     font-size: 30px;
181     margin: 10px 0;
182     border-bottom: 1px solid #ccc;
183 }
184 
185 #cnblogs_post_body h2 {
186     font-size: 24px;
187     margin: 20px 0;
188     border-bottom: 1px solid #ccc;
189 }
190 
191 #cnblogs_post_body h3 {
192 font-size: 20px;
193     margin: 20px auto 5px;
194 }
195 
196 #cnblogs_post_body h4 {
197     font-size: 18px;
198     margin: 10px 0;
199 }
200 /* 标题样式设置结束 */
201  
202 /* 无序列表 */
203 #cnblogs_post_body ul li {
204     list-style-type: disc;
205     margin: auto 0px;
206 }
207  
208 /* 有序列表 */
209 #cnblogs_post_body ol li {
210     list-style-type: decimal;
211     margin: auto 0px;
212     padding: 0px;
213 }
214 #cnblogs_post_body ol {
215     padding-left: 30px;
216 }
217  
218 /* 超链接 */
219 #cnblogs_post_body a:link {
220     text-decoration: none;
221     color: #002C99;
222 }
223 
224 #cnblogs_post_body a:hover {
225     text-decoration: underline;
226 }
227  
228 /* 引用背景 */
229 #topics .postBody blockquote {
230     background: none;
231     border: none;
232     border-left: 5px solid #ccc;
233     margin: 0;
234     padding:0 10px;
235     color: #777;
236     min-height: auto;
237 }
238 
239 /* 单行代码 */
240 .cnblogs-markdown code {
241     font-family: Consolas, "Microsoft YaHei", monospace !important;
242     font-size: 16px !important;
243     color: #eee;
244     line-height: 20px;
245     background-color: #222 !important;
246     border: 1px solid #ccc !important;
247     padding: 0 5px !important;
248     border-radius: 3px !important;
249     line-height: 1.8;
250     margin: 1px 5px;
251     vertical-align: middle;
252     display: inline-block;
253 }
254  
255 /* 多行代码, 引用 */
256 .cnblogs-markdown .hljs {
257     font-family: Consolas, "Microsoft YaHei", monospace !important;
258     font-size: 16px !important;
259     line-height: 1.5 !important;
260     padding: 5px !important;
261     color:#eee;
262 }
263 
264 /*表格*/
265 #cnblogs_post_body table, .cnblogs-post-body table {
266     border: none;
267     border-collapse: collapse;
268     word-break: break-word;
269 }
270 
271 .postDesc {
272     font-size: 13px;
273     color: #757575;
274     float: left;
275     width: 100%;
276     clear: both;
277     text-align: left;
278     padding-left: 20px;
279     padding-right: 5px;
280     margin-top: 0;
281     line-height: 1.5;
282 }
283 
284 /*分类目录*/
285 .entrylistItem {
286     min-height: unset;
287     margin: 30px 0px;
288     padding: 0px;
289     width: 100%;
290 }
291 
292 /*代码颜色*/
293 #mainContent .cnblogs-markdown .hljs,#mainContent .cnblogs-post-body .hljs {
294     display: block;
295        white-space:pre!important;
296        word-break:keep-all!important;
297     overflow-x: auto;
298     padding: .5em;
299     color: #abb2bf;
300     background: #2d3748!important
301 }
302 
303 #mainContent .cnblogs-markdown .hljs-comment,#mainContent .cnblogs-markdown .hljs-quote,#mainContent .cnblogs-post-body .hljs-comment,#mainContent .cnblogs-post-body .hljs-quote {
304     color: #5c6370;
305     font-style: italic
306 }
307 
308 #mainContent .cnblogs-markdown .hljs-doctag,#mainContent .cnblogs-markdown .hljs-formula,#mainContent .cnblogs-markdown .hljs-keyword,#mainContent .cnblogs-post-body .hljs-doctag,#mainContent .cnblogs-post-body .hljs-formula,#mainContent .cnblogs-post-body .hljs-keyword {
309     color: #c678dd
310 }
311 
312 #mainContent .cnblogs-markdown .hljs-deletion,#mainContent .cnblogs-markdown .hljs-name,#mainContent .cnblogs-markdown .hljs-section,#mainContent .cnblogs-markdown .hljs-selector-tag,#mainContent .cnblogs-markdown .hljs-subst,#mainContent .cnblogs-post-body .hljs-deletion,#mainContent .cnblogs-post-body .hljs-name,#mainContent .cnblogs-post-body .hljs-section,#mainContent .cnblogs-post-body .hljs-selector-tag,#mainContent .cnblogs-post-body .hljs-subst {
313     color: #e06c75
314 }
315 
316 #mainContent .cnblogs-markdown .hljs-literal,#mainContent .cnblogs-post-body .hljs-literal {
317     color: #56b6c2
318 }
319 
320 #mainContent .cnblogs-markdown .hljs-addition,#mainContent .cnblogs-markdown .hljs-attribute,#mainContent .cnblogs-markdown .hljs-meta-string,#mainContent .cnblogs-markdown .hljs-regexp,#mainContent .cnblogs-markdown .hljs-string,#mainContent .cnblogs-post-body .hljs-addition,#mainContent .cnblogs-post-body .hljs-attribute,#mainContent .cnblogs-post-body .hljs-meta-string,#mainContent .cnblogs-post-body .hljs-regexp,#mainContent .cnblogs-post-body .hljs-string {
321     color: #98c379
322 }
323 
324 #mainContent .cnblogs-markdown .hljs-built_in,#mainContent .cnblogs-markdown .hljs-class .hljs-title,#mainContent .cnblogs-post-body .hljs-built_in,#mainContent .cnblogs-post-body .hljs-class .hljs-title {
325     color: #e6c07b
326 }
327 
328 #mainContent .cnblogs-markdown .hljs-attr,#mainContent .cnblogs-markdown .hljs-number,#mainContent .cnblogs-markdown .hljs-selector-attr,#mainContent .cnblogs-markdown .hljs-selector-class,#mainContent .cnblogs-markdown .hljs-selector-pseudo,#mainContent .cnblogs-markdown .hljs-template-variable,#mainContent .cnblogs-markdown .hljs-type,#mainContent .cnblogs-markdown .hljs-variable,#mainContent .cnblogs-post-body .hljs-attr,#mainContent .cnblogs-post-body .hljs-number,#mainContent .cnblogs-post-body .hljs-selector-attr,#mainContent .cnblogs-post-body .hljs-selector-class,#mainContent .cnblogs-post-body .hljs-selector-pseudo,#mainContent .cnblogs-post-body .hljs-template-variable,#mainContent .cnblogs-post-body .hljs-type,#mainContent .cnblogs-post-body .hljs-variable {
329     color: #d19a66
330 }
331 
332 #mainContent .cnblogs-markdown .hljs-bullet,#mainContent .cnblogs-markdown .hljs-link,#mainContent .cnblogs-markdown .hljs-meta,#mainContent .cnblogs-markdown .hljs-selector-id,#mainContent .cnblogs-markdown .hljs-symbol,#mainContent .cnblogs-markdown .hljs-title,#mainContent .cnblogs-post-body .hljs-bullet,#mainContent .cnblogs-post-body .hljs-link,#mainContent .cnblogs-post-body .hljs-meta,#mainContent .cnblogs-post-body .hljs-selector-id,#mainContent .cnblogs-post-body .hljs-symbol,#mainContent .cnblogs-post-body .hljs-title {
333     color: #61aeee
334 }
335 
336 #mainContent .cnblogs-markdown .hljs-emphasis,#mainContent .cnblogs-post-body .hljs-emphasis {
337     font-style: italic
338 }
339 
340 #mainContent .cnblogs-markdown .hljs-strong,#mainContent .cnblogs-post-body .hljs-strong {
341     font-weight: 700
342 }
343 
344 #mainContent .cnblogs-markdown .hljs-link,#mainContent .cnblogs-post-body .hljs-link {
345     text-decoration: underline
346 }
347 
348 #mainContent .cnblogs-markdown .hljs-tag,#mainContent .cnblogs-post-body .hljs-tag {
349     color: #abb2bf
350 }
351     .footnotes hr {
352         display: none !important;
353     }
354 }
CSS
 1 <script>
 2 var _hmt = _hmt || [];
 3 (function() {
 4   var hm = document.createElement("script");
 5   hm.src = "https://hm.baidu.com/hm.js?fa626316b93e18bd5ff11ef8b6bd2fc9";
 6   var s = document.getElementsByTagName("script")[0]; 
 7   s.parentNode.insertBefore(hm, s);
 8 })();
 9 </script>
10 
11 <p style="text-align: center;"><span style="font-size: 16px;"><strong>欢迎第<a href="https://www.58q.com/" target="_blank"><img style="vertical-align: middle;" src="https://www.cutercounter.com/hits.php?id=huxdqocc&amp;nd=5&amp;style=27" alt="嗷了去,图裂了" /></a>位访客</strong></span></p>
12 <p style="text-align: center;">访问总量:<a href="https://www.58q.com/" target="_blank"><img style="vertical-align: text-top;" src="https://www.cutercounter.com/hits.php?id=huxdqocp&amp;nd=6&amp;style=14" alt="嗷了去,图裂了" /></a></p>
13 <br/>
14 
15 <span style="font-size: 14px;"><p><del>一个非专业的闲鱼的博客</del>……</p>
16 <p>学业为主,如有不足,请指正。</p>
17 <p style="text-align: right;"><a href="https://space.bilibili.com/476079747" target="_blank"><span style="color: #3366ff;"><strong>B站: Nolca</strong></span></a></span></p>
18 <p style="text-align: right;"><strong><a href="http://www.coolapk.com/u/793843" target="_blank"><span style="color: #339966; font-size: 14px;">酷安: Lboy_C</span></a></strong></p>
19 <p style="text-align: right;"><strong><a href="https://mianbaoduo.com/o/nolca" target="_blank"><span style="color: rgb(253,171,14); font-size: 14px;">面包多:资源零售铺>></span></a></strong></p>
20 <p style="text-align: right;"><strong><a href="http://nolca.ys168.com/" target="_blank"><span style="font-size: 14px;">资源小站>></span></a></strong></p>
侧边公告栏
  1 <!script charset="utf-8" src="https://blog-static.cnblogs.com/files/-AClon-/Scroll.js"></script>
  2 <link id="mobile-style" media="only screen and (max- 767px)" type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/-AClon-/mobile.css">
  3 <link rel="shortcut icon" href="https://files.cnblogs.com/files/-AClon-/nolca.ico">
  4 
  5 <div>
  6 <p><!img style="float: left; margin-left: 0%;" title="???" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321052532banner_l.png" alt="" /></p>
  7 
  8 
  9 <p ondragstart="window.event.returnValue=false;return false;" oncontextmenu="window.event.returnValue=false;return false;" onselectstart="event.returnValue=false;return false;"><!img style="float:right; margin-right: 5%;" title="Hello,world!" 
 10 onmouseover="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321113207banner_r_n.png';" onmouseout="this.src='https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png';" src="https://images.cnblogs.com/cnblogs_com/-AClon-/1676582/o_200321072804banner_r.png" alt=""  /></p>
 11 </div>
 12 
 13 
 14 <script type="text/javascript">
 15 /*
 16     功能:生成博客目录的JS工具
 17     测试:IE8,火狐,google测试通过
 18     孤傲苍狼
 19     2014-5-11
 20 */
 21 var BlogDirectory = {
 22     /*
 23         获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top)
 24     */
 25     getElementPosition:function (ele) {        
 26         var topPosition = 0;
 27         var leftPosition = 0;
 28         while (ele){              
 29             topPosition += ele.offsetTop;
 30             leftPosition += ele.offsetLeft;        
 31             ele = ele.offsetParent;     
 32         }  
 33         return {top:topPosition, left:leftPosition}; 
 34     },
 35 
 36     /*
 37     获取滚动条当前位置
 38     */
 39     getScrollBarPosition:function () {
 40         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
 41         return  scrollBarPosition;
 42     },
 43     
 44     /*
 45     移动滚动条,finalPos 为目的位置,internal 为移动速度
 46     */
 47     moveScrollBar:function(finalpos, interval) {
 48 
 49         //若不支持此方法,则退出
 50         if(!window.scrollTo) {
 51             return false;
 52         }
 53 
 54         //窗体滚动时,禁用鼠标滚轮
 55         window.onmousewheel = function(){
 56             return false;
 57         };
 58           
 59         //清除计时
 60         if (document.body.movement) { 
 61             clearTimeout(document.body.movement); 
 62         } 
 63 
 64         var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 65 
 66         var dist = 0; 
 67         if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出
 68             window.onmousewheel = function(){
 69                 return true;
 70             }
 71             return true; 
 72         } 
 73         if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离
 74             dist = Math.ceil((finalpos - currentpos)/10); 
 75             currentpos += dist; 
 76         } 
 77         if (currentpos > finalpos) { 
 78             dist = Math.ceil((currentpos - finalpos)/10); 
 79             currentpos -= dist; 
 80         }
 81         
 82         var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置
 83         window.scrollTo(0, currentpos);//移动窗口
 84         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出
 85         {
 86             window.onmousewheel = function(){
 87                 return true;
 88             }
 89             return true;
 90         }
 91         
 92         //进行下一步移动
 93         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
 94         document.body.movement = setTimeout(repeat, interval); 
 95     },
 96     
 97     htmlDecode:function (text){
 98         var temp = document.createElement("div");
 99         temp.innerHTML = text;
100         var output = temp.innerText || temp.textContent;
101         temp = null;
102         return output;
103     },
104 
105     /*
106     创建博客目录,
107     id表示包含博文正文的 div 容器的 id,
108     mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!),
109     interval 表示移动的速度
110     */
111     createBlogDirectory:function (id, mt, st, interval){
112          //获取博文正文div容器
113         var elem = document.getElementById(id);
114         if(!elem) return false;
115         //获取div中所有元素结点
116         var nodes = elem.getElementsByTagName("*");
117         //创建博客目录的div容器
118         var divSideBar = document.createElement('DIV');
119         divSideBar.className = 'uprightsideBar';
120         divSideBar.setAttribute('id', 'uprightsideBar');
121         var divSideBarTab = document.createElement('DIV');
122         divSideBarTab.setAttribute('id', 'sideBarTab');
123         divSideBar.appendChild(divSideBarTab);
124         var h2 = document.createElement('H2');
125         divSideBarTab.appendChild(h2);
126         var txt = document.createTextNode('目录导航');
127         h2.appendChild(txt);
128         var divSideBarContents = document.createElement('DIV');
129         divSideBarContents.style.display = 'none';
130         divSideBarContents.setAttribute('id', 'sideBarContents');
131         divSideBar.appendChild(divSideBarContents);
132         //创建自定义列表
133         var dlist = document.createElement("dl");
134         divSideBarContents.appendChild(dlist);
135         var num = 0;//统计找到的mt和st
136         mt = mt.toUpperCase();//转化成大写
137         st = st.toUpperCase();//转化成大写
138         //遍历所有元素结点
139         for(var i=0; i<nodes.length; i++)
140         {
141             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
142             {
143                 //获取标题文本
144                 var nodetext = nodes[i].innerHTML.replace(/</?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签
145                 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 
146                 nodetext = BlogDirectory.htmlDecode(nodetext);
147                 //插入锚        
148                 nodes[i].setAttribute("id", "blogTitle" + num);
149                 var item;
150                 switch(nodes[i].nodeName)
151                 {
152                     case mt:    //若为主标题 
153                         item = document.createElement("dt");
154                         break;
155                     case st:    //若为子标题
156                         item = document.createElement("dd");
157                         break;
158                 }
159                 
160                 //创建锚链接
161                 var itemtext = document.createTextNode(nodetext);
162                 item.appendChild(itemtext);
163                 item.setAttribute("name", num);
164                 item.onclick = function(){        //添加鼠标点击触发函数
165                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
166                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
167                 };            
168                 
169                 //将自定义表项加入自定义列表中
170                 dlist.appendChild(item);
171                 num++;
172             }
173         }
174         
175         if(num == 0) return false; 
176         /*鼠标进入时的事件处理*/
177         divSideBarTab.onmouseenter = function(){
178             divSideBarContents.style.display = 'block';
179         }
180         /*鼠标离开时的事件处理*/
181         divSideBar.onmouseleave = function() {
182             divSideBarContents.style.display = 'none';
183         }
184 
185         document.body.appendChild(divSideBar);
186     }
187     
188 };
189 window.onload=function(){
190     /*页面加载完成之后生成博客目录*/
191     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
192 }
193 </script>
页首(别人用JS实现的简陋的目录导航功能)
 1 <div style="height:800px;" >
 2 </div>
 3 <p style="text-align: center;"><span style="font-family: wingdings, 'zapf dingbats'; /*background-color: #ffffffee;*/ color: #ffffff;">Hello, world.</span></p>
 4 
 5 <script type="text/javascript" language="javascript">
 6   //Setting ico for cnblogs
 7   var linkObject = document.createElement('link');
 8   linkObject.rel = "shortcut icon";
 9   linkObject.href = "https://files.cnblogs.com/files/-AClon-/nolca.ico";
10   document.getElementsByTagName("head")[0].appendChild(linkObject);
11 </script>
12 
13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
14 <script src="https://blog-static.cnblogs.com/files/-AClon-/APlayer.min.js"></script>
15 <div id="aplayer" class="aplayer" data-id="4927975309" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="false" data-order="" data-theme="rgb(255,204,51)"></div>
16 <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
页尾(支持icon和aplayer)
原文地址:https://www.cnblogs.com/-AClon-/p/12545319.html