博客园细节美化打磨

让你的cnblog更漂亮~

原作者

感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题,本蒟蒻是在原主题的基础上改的。 原主题地址:https://www.cnblogs.com/summertime-wu/p/9356736.html

本人新手,如有可改进之处,欢迎指出

优化

添加 fork me on github 角标,节省菜单空间

在页首代码中添加了以下内容:

1
2
3
<div class="forkme">
        <a href="https://github.com/ethan-enhe"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://i.loli.net/2019/02/03/5c56804b26dd9.png" alt="Fork me on GitHub"></a>
</div>

然后在 css 中把这个 div 的 width 和 height 调成了 149px,z-index 调成了 999。 又在页尾代码中注释 “通过滚动条控制导航条的展现隐藏” 的后面添加了 $(".forkme").fadeOut()/fadeIn();。完结撒花!

菜单移动端自适应

在移动端把菜单折叠成的样式,说来话长,可以直接见代码(模仿hexo的next主题)。

标题高度自适应(避免标题太长导致被正文挡住)

1
2
3
4
#mypost_title {
    position: absolute;
    bottom: 0px;
}

添加评论功能,美化文本框

去除原来评论区域的cssdisplay: none,然后在css中添加以下内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
div.commentform input.author {
    background-color: #ffba4d;
    width: 150px;
    border-radius: 8px;
}
div.commentform textarea.comment_textarea {
    border-radius: 5px;
}
input[type=button] {
    width: 80px;
    height: 30px;
    border-width: 0px;
    border-radius: 200px;
    background: #1E90FF;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
}

修改不能识别主页的 bug(比如说把 BlogE 写成 bLoGe,或者点击回到顶端按钮之后刷新页面等等)

由于博客园博客主页可以由多种方式访问,http/https,甚至你的自定义域名都不用区分大小写! 举个栗子:https://www.cnblogs.com/BlogEhttps://www.cnblogs.com/bLoGe 都可以访问我的博客主页。 那么这时你就需要一个一个的特判,在if的括号里写64个条件! 正难则反,其实我们只需确认网址不包括/p/即可!

1
2
3
4
var now_url = window.location.href.toLowerCase();
if (now_url.indexOf("bloge/p/")>=0) {
    blablabla...
}

在主页隐藏收藏文章按钮

如题,闲的没事就在判断主页的if里面给收藏图标来了个hide()

在文章页面显示文章的 tags

原作者在文章页面把文章分类显示了两遍,我作为一名强迫症晚期患者,就改成了上面显示分类,下面显示文章tag。修改afterAjax()这个函数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function afterAjax(){
        //假如不是首页
        var now_url = window.location.href.toLowerCase();
        if (now_url.indexOf("bloge/p/")>=0) {
            //获取文章标签
            var tag = null;
            if ($("#EntryTag").html()!=null && $("#EntryTag").html()!= "") {
              tag = $("#EntryTag").html();
              tag = tag.substring(3,tag.length);
            }else{
              tag = "<a href='https://cnblogs.com/BlogE'>暂无标签</a>";
            }
            //获取文章分类
            var classification = null;
            if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
                classification = $("#BlogPostCategory").html();
                classification = classification.substring(3,classification.length);
            }else{
                classification = "<a href='https://cnblogs.com/BlogE'>暂未分类</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://cnblogs.com/BlogE'>Blog-E</a>";
            //设置副标题标题
            $("#mypost_title_f").html(ftitle);
            //设置标题标签按钮
            $("#mypost_title_e").html(tag.replace(",",""));
            //设置底部导航条上一篇下一篇文章
            var pnp = $("#post_next_prev a");
            $("#mbottom-left").attr("href",pnp[1].href);
            if (pnp.length>2) {
                $("#mbottom-right").attr("href",pnp[3].href);
            }
        }
        $("#myheader_bg").css("filter","blur(0px)");
    }

修复原文地址显示错误

有时在博文中点击完目录跳转之后再刷新页面,setCopyright()函数生成的版权信息会显示(以这篇文章为例)https://www.cnblogs.com/BlogE/p/beautifycnblogs.html#_caption4这样的东西。然而我却不想要他显示url后面的#_caption4这个玩意。何以解忧?唯有slice()!于是我改写了一下这个函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
setCopyright: function() {
    //设置版权信息,转载出处自动根据页面url生成
    var info_str = '<p>作者:<a target="_blank">@ethan_zhou</a><br>'+
        '本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>';
    info = $(info_str);
    info_a = info.find("a");
    url = window.location.href;
    if (url.indexOf("#") >= 0)
        url = url.slice(0, url.indexOf("#"));
    $(info_a[0]).attr("href","https://github.com/ethan-enhe");
    $(info_a[1]).attr("href",url).text(url);
    $("#cnblogs_post_body").prepend(info);
},

美化代码块

使用highlight.js换了个代码主题,重写了添加代码行号的函数(原理是给每行代码外边套一个<ol><li>标签,借鉴这篇文章),设置了代码不折行等等,同时模仿了这个网站的代码块颜色样式。

菜单添加 Font Awesome 图标

觉得菜单没有图标略显单调,于是引用了Font Awesome的css和js。如果你的博客因此加载过慢,你可以删掉掉页首html中形如<i class="fas fa-xxxx"></i>的东西,和注释<!-- ............Font Awesome............ -->后边的内容。

细节美化

做了以下的移动端调整(下面代码不包含移动端折叠菜单的内容)

1
2
3
4
5
6
7
8
/*移动端*/
@media screen and (max-width: 1000px) {
    .forkme {display: none;}
    #searchblogpost {display: none !important;}
    #mypost_title {left: 0%;}
    #right_meun {display: none !important;}
    #main {width: 80%;}
}

测试中功能

博文列表中显示文章插图

在文章的摘要中“插入右侧图片”时,如要显示该图片,只需为其加上一个“on”的class,比如:

1
<img src="https://github.com/liriliri/eruda/raw/master/doc/banner.jpg" class="desc_img on">

开启站内搜索

目前版本的代码默认不会显示站内搜索(效果不稳定),如果您想要尝试这个功能,可以取消注释this.setSearch。欢迎在评论区中反馈使用中的出现的bug肯定不会出现bug

最终代码及使用方法

主题选择bluesky,然后把以下代码中我的用户名和自定义域名等内容替换成你自己的,然后再把所有代码复制到博客设置中对应的位置即可。

自定义css

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
.forkme {
    position: fixed;
    right: 0px;
    top: 0px;
    height: 149px;
    width: 149px;
    z-index: 999;
}
#sideBar{
    display: none;
}
#mainContent{
    width: 100%;
    box-shadow: 0 0 0;
    border-radius: 0px;
    opacity: 0;
    transition:0.5s;
    margin-top:40px;
}
#main{
    width: 45%;
    background-color: white;
    /*max-width: 700px;*/
}
body{
    background-image: none;
    background-color: white;
    font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important;
    line-height: 1.8;
}
#cnblogs_post_body{
    font-size: 16px;
}
.c_b_p_desc_readmore {
    display: -webkit-inline-box;
}
#taglist_title {
    font-size: 22px;
}
#posts {
    box-shadow: 0 0 5px #251a1a4f;
    border-radius: 15px;
    margin-bottom: 38px;
    padding-top: 32px;
}
.post-img {
    position: relative;
    display: inherit;
    min-height: 250px;
    background-position: 50% 50%;
    background-size: cover;
}
.dayTitle {
    border: 1px solid #f5e305;
    margin-top: 20px;
    margin-left: 32px;
    margin-right: 32px;
}
.postTitle {
    margin-left: 32px;
    margin-right: 32px;
}
#posts .postCon {
    margin-left: 32px;
    margin-right: 32px;
}
#green_channel{
    display: none;
}
#post_next_prev{
    display: none;
}
.post-img{
    /*margin-top: 0;*/
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#EntryTag {
    display: none;
}
/** 去除广告 */
#cb_post_title_url{
    display: none;
}
#cnblogs_c1{
    display: none;
}
#cnblogs_c2{
    display: none;
}
#ad_t2{
    display: none;
}
#kb_block{
    display:none
}
#under_post_news{
    display:none
}
#header{
    display:none
}
#BlogPostCategory{
    display: none;
}
#comment_nav{
    display: none;
}
.postDesc {
    border-bottom: none;
    margin-left: 32px;
    margin-right: 32px;
}
#author_profile_follow{
    display: none;
}

/** 自定义样式 */
/* 加载条 */
#myProgressBar{
    width: 15%;
    height: 2px;
    background-color: #eb5055;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #eb5055;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #eb5055;
  border-left-color: #eb5055;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/** 导航栏 */
#mynavbar{
    width: 100%;
    height: 70px;
    position: fixed;
    display: block;
    top: 0px;
    z-index: 100;
    background-color: white;
    transition:0.5s ease-in-out;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
#mynavbar_menu{
    display: inline-block;
    width: auto;
    position: fixed;
    right: 13%;
    /* float: right; */
    text-align: right;
    line-height: 68px;
}
#mynavbar_menu a{
    padding: 0 10px;
    font-size: 14px;
    outline: 0;
    color: #313131bd !important;
    font-weight: 900;
    text-decoration: none;
}
#mynavbar_menu a:hover{
    color: #eb5055 !important;
}
#searchblogpost {
    display: inline-block;
}

/** 头部 */
#myheader{
    background-color: #75b7ef!important;
    margin-top:70px;
    position: relative;
    width: 100%;
    height: 300px;
}
#myheader_bg{
    width:100%;
    height:300px;
    background-position: center;
    background-size: cover;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
    position: absolute;
}
#myheader_cover{
    position: relative;
    margin-top: 70px;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.25);
}
#mypost_title{
    position: absolute;
    bottom: 0px;
    left: 20%;
    padding: 30px 25px 20px;
    max-width: 700px;
    color: white;
    transition:0.5s;
    opacity: 0;
}
#mypost_title_e{
    margin: 0;
    padding: 5px 0 15px;
}
#mypost_title_e a{
    border: 1px solid #6fa3ef;
    border-radius: 15px;
    background: #6fa3ef;
    color: #fff;display: inline-block;
    margin: 4px 8px 0 0;
    padding: 0 15px;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 13px;outline: 0;text-decoration: none;
    transition: 0.5s;
}
#mypost_title_e a:nth-child(1n) {
    color: #fff;
    border: 1px solid #6fa3ef;
    border-radius: 15px;
    background: #6fa3ef;
}
#mypost_title_e a:nth-child(2n) {
    color: #fff;
    border: 1px solid #ff9800;
    border-radius: 15px;
    background: #ff9800
}
#mypost_title_e a:nth-child(3n) {
    color: #fff;
    border: 1px solid #46c47c;
    border-radius: 15px;
    background: #46c47c
}
#mypost_title_e a:nth-child(4n) {
    color: #fff;
    border: 1px solid #f9bb3c;
    border-radius: 15px;
    background: #f9bb3c
}
#mypost_title_e a:nth-child(5n) {
    color: #fff;
    border: 1px solid #bc99c4;
    border-radius: 15px;
    background: #bc99c4
}
#mypost_title_e a:nth-child(6n) {
    color: #fff;
    border: 1px solid #e8583d;
    border-radius: 15px;
    background: #e8583d
}
#mypost_title_e a:before{
    content: "# "
}
#mypost_title_e a:hover{
    background-color: white;
    border: 1px solid white;
    color:black;
}
#mypost_title_f a{
    color: white;
}
#mypost_title_f a:hover{
    text-decoration:none;
}

/** 右侧导航 */
#right_meun{
    position: fixed;
    z-index: 2;
    top: 100px;
    left: 70%;
    display: none;
    text-align: left;
    border-left: 1px solid #ddd;
    font-size: 12px;
}
#right_meun li{
    list-style: none!important;
}
#right_meun a{
    display: inline-table;
    margin-left: 5px;
    white-space: nowrap;
    text-decoration: none;
    color: #313131 !important;
    outline: 0;
    border-bottom: 0 !important;
}
#right_meun a:hover{
    color: #eb5055;
}
#right_meun>li::before {
    position: relative;
    top: 0;
    left: -4px;
    display: inline-block;
    width: 7px;
    height: 7px;
    content: '';
    border-radius: 50%;
    background-color: #eb5055;
}
/* 底部导航 */
#post-bottom-bar{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 3pc;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
    margin: 0;
    padding: 0;
    transition: 0.5s ease-in-out;
}
#post-bottom-bar a{
    text-decoration: none!important;
}
.post-bottom-bar .bottom-bar-inner{
    margin: 0 auto;
    padding: 0 10px;
    max-width: 900px;
}
.bottom-bar-items{
    margin: 0 0 0 10px;
    color: #313131;
    font-size: 14px !important;
    line-height: 3pc;float: left;
}
.post-bottom-bar{
    margin: 0 0 0 10px;
    color: #313131;
    font-size: 14px;
    line-height: 3pc;
}
.post-bottom-bar .social-share .bottom-bar-item {
    padding: 4px;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-facebook a {
    background-color: #4267b2;
    color: #fff;
}
.post-bottom-bar .social-share .bottom-bar-item a {
    padding: 2px 10px;
    border-radius: 15px;
}
.post-bottom-bar .bottom-bar-item a {
    margin: 0;
    padding: 9pt;
    border: 0;
    background: 0 0;
    color: #313131;
    font-size: 14px;
    line-height: 3pc;
    cursor: pointer;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-twitter a {
    background-color: #1b95e0;
    color: #fff;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a {
    background-color: #5f5f5f;
    color: #fff;
}
.bottom-bar-item a:hover{
    color: #eb5055;
}


/** MarkDown样式调整 */
.cnblogs-markdown .hljs {
    font-size: 16px!important;
    padding: 15px!important;
    border: 0 solid #3d7e9a !important;
    border-left-width: 5px!important;
    white-space: pre;
    border-radius: 0px !important;
}
.cnblogs-markdown code {
    background: #eee !important;
    border: 0px !important;
    color: #333 !important;
    font-size: 16px!important;
}
code ol {
    padding-left: 20px !important;
}
.cnblogs-markdown h2{
    font-weight: 500;
    margin: 20px 0;
}
.cnblogs-markdown h2:before{
    content: "#";
    color: #eb5055;
    position: relative;
    top: 0;
    left: -12px;
}
#cnblogs_post_body h3{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}
.cnblogs-markdown h3:before{
    content: "##";
    color: #2175bc;
    position: relative;
    top: 0;
    left: -8px;
}
.postBody blockquote, .postCon blockquote{
    background-image: none;
    border-left: 5px solid #DDDFE4;
    background-color: #EEF0F4;
    width: 100%;
    padding: 6px 0 6px 25px;
}
blockquote{
    border:0;
}
.postBody ul li, .postCon ul li {
    list-style: initial;
}
a:hover {
    text-decoration: none;
}
#cnblogs_post_body a {
    color: #0593d3;
    border-bottom: none;
    border-bottom: 1px solid #0593d3;
}
/* code加上行数 */
.cnblogs-markdown .syntaxhighlighter table td.code {
  width:95% !important; 
}

.cnblogs-markdown .syntaxhighlighter code {
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.cnblogs-markdown .syntaxhighlighter code:before,
.cnblogs-markdown .syntaxhighlighter code:before {
  letter-spacing: -0.5em;
}


/** 更改浏览器滚动条和选中字体背景颜色 */
::selection {
    background-color: #FF5722;
    color: #fff;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    min-height: 28px;
    background-color: #c2c2c2;
    background-clip: padding-box;
}
::-webkit-scrollbar-track-piece {
    background-color: #fff;
}
*, :after, :before {
    box-sizing: border-box;
}
#under_post_kb{
    display: none;
}
/* 评论优化 */
input[type=button] {
    width: 80px;
    height: 30px;
    border-width: 0px;
    border-radius: 200px;
    background: #1E90FF;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
}
.commentbox_title_left {
    color: #3397ff;
}
div.commentform textarea.comment_textarea {
    border-radius: 5px;
}
div.commentform input.author {
    background-color: #ffba4d;
    width: 150px;
    border-radius: 8px;
}
#commentform_title {
    display: none;
}
.login_tips {
    display: none;
}
/*移动端*/
@media screen and (max-width: 1000px) {
    .forkme {display: none;}
    .post-img {min-height: 175px;}
    #mynavbar_menu {
        display: none;
        margin-top: 16px;
        padding-left: 0;
        text-align: left;
        width: 100px;
        box-shadow: 0 0 1px wheat;
        line-height: 49px;
    }
    #mynavbar_menu a {
        display: block;
        padding: 0 10px;
        background-color: #eee;
    }
    .site-nav-toggle {display: inline-block !important;}
    #searchblogpost {display: none !important;}
    #mypost_title {left: 0%;}
    #right_meun {display: none !important;}
    #main {width: 80%;}
}
/* 菜单三条杠 */
span.btn-bar {
    display: block;
    margin-top: 4px;
    width: 22px;
    height: 2px;
    background: #555;
    border-radius: 1px;
}
.site-nav-toggle button {
    margin: 0;
    padding: 1px 6px;
    background: transparent;
    border: none;
}
.site-nav-toggle {
    position: fixed;
    right: 7%;
    line-height: 73px;
}

页首html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!-- ............自定义首部代码开始............ -->
<!-- 自定义进度条 -->
<div id="myProgressBar"></div>

<!-- github fork me -->
<div class="forkme">
    <a href="https://github.com/ethan-enhe"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://i.loli.net/2019/02/03/5c56804b26dd9.png" alt="Fork me on GitHub"></a>
</div>

<!-- 自定义导航条 -->
<div id="mynavbar">
    <div style="position:relative;width:100%;height:70px;margin:0 auto;">
        <a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/BlogE">
            <img style="width: auto;height: 22px;outline: 0;margin-top: 23.5px;" src="https://i.loli.net/2019/01/31/5c52e907bfa56.png">
        </a>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/BlogE/"><i class="fas fa-home"></i> Home</a>
            <a href="https://www.cnblogs.com/BlogE/tag/"><i class="fas fa-tag"></i> Tags</a>
            <a href="https://www.cnblogs.com/BlogE/rss"><i class="fas fa-rss-square"></i> Rss</a>
            <a href="https://www.cnblogs.com/BlogE/p/about.html"><i class="fas fa-question"></i> About</a>
        </div>
        <div class="site-nav-toggle" style="display: none;">
            <button aria-label="切换导航栏">
              <span class="btn-bar"></span>
              <span class="btn-bar"></span>
              <span class="btn-bar"></span>
            </button>
        </div>
    </div>
</div>

<!-- 自定义头部锚点 -->
<a name="mtop"></a>

<!-- 自定义头部 -->
<div id="myheader">
    <!-- 背景图片 -->
    <div id="myheader_bg"></div>
    <!-- 遮罩层 -->
    <div id="myheader_cover">
        <!-- 博客标题 -->
        <div id="mypost_title">
            <div id="mypost_title_h" style="font-weight: 500;font-size: 30px;">Blog-E</div>
            <div id="mypost_title_f"></div>
            <div id="mypost_title_e"><a href="https://www.cnblogs.com/BlogE/">路漫漫其修远兮,吾将上下而求索。</a></div> 
        </div>  
    </div>
</div>
<link rel="stylesheet" href="https://files.cnblogs.com/files/BlogE/tomorrow.css">
<script src="https://files.cnblogs.com/files/BlogE/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!-- ............Font Awesome............ -->

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!-- ............自定义首部代码结束............ -->

页尾html

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!-- ............自定义尾部代码开始............ -->
<div id="post-bottom-bar" class="post-bottom-bar">
    <div class="bottom-bar-inner">
        <!-- 左边 -->
        <div class="bottom-bar-items social-share" style="float: left;">
            <span class="bottom-bar-item bottom-bar-facebook">
                <a id="bottom-d" href="javascript:void(0)" target="_blank">点赞</a>
            </span>
            <span class="bottom-bar-item bottom-bar-twitter">
                <a id="bottom-g" href="javascript:void(0)"" target="_blank">关注</a>
            </span>
            <span class="bottom-bar-item bottom-bar-qrcode">
                <a id="bottom-s" href="javascript:void(0)" target="_blank">收藏</a>
            </span>
        </div>
        <!-- 右边 -->
        <div class="bottom-bar-items right" style="float: right;">
            <span class="bottom-bar-item"><a id="mbottom-left" href="javascript:void(0);"></a></span>
            <span class="bottom-bar-item"><a id="mbottom-right" href="javascript:void(0);"></a></span>
            <span class="bottom-bar-item"><a href="#mfooter"></a></span>
            <span class="bottom-bar-item"><a href="#mtop"></a></span>
        </div>
    </div> 
</div>
<a name="mfooter"></a>
<!-- ............自定义尾部代码结束............ -->
<script type="text/javascript" src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script type="text/javascript">
    //设置title
    var tt = document.title;
    tt = tt.replace("Ethan_Zhou - 博客园", "Blog-E");
    document.title = tt;
    /**
        用来设置初始时需要执行的js
    */
    $(document).ready(function(){
        
        //加载顶部进度条
        NProgress.start();
        NProgress.done();
        $("#myProgressBar").hide();

        //设置背景图片地址
        if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
            $("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
        }else{
            $("#myheader_bg").css("background-image","url(https://i.loli.net/2019/01/31/5c52e73546215.jpg)");
        }
        //标题
        $("#mypost_title_h").html($("#cb_post_title_url").html());
        //正文和标题淡入
        $("#mainContent").css("opacity","1");
        $("#mainContent").css("margin-top","0");
        $("#mypost_title").css("opacity","1");
        //更改iocn图标
        var linkObject = document.createElement("link");
        linkObject.rel = "shortcut icon";
        linkObject.href = "https://i.loli.net/2019/01/31/5c52e907bfa56.png";
        document.getElementsByTagName("head")[0].appendChild(linkObject);
    })
    /**
        设置ajax请求加载完所有数据时执行的js
    */
    setTimeout(afterAjax,1000);
    function afterAjax(){
        //假如不是首页
        var now_url = window.location.href.toLowerCase();
        if (now_url.indexOf("bloge/p/")>=0) {
            //获取文章标签
            var tag = null;
            if ($("#EntryTag").html()!=null && $("#EntryTag").html()!= "") {
              tag = $("#EntryTag").html();
              tag = tag.substring(3,tag.length);
            }else{
              tag = "<a href='https://cnblogs.com/BlogE'>暂无标签</a>";
            }
            //获取文章分类
            var classification = null;
            if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
                classification = $("#BlogPostCategory").html();
                classification = classification.substring(3,classification.length);
            }else{
                classification = "<a href='https://cnblogs.com/BlogE'>暂未分类</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://cnblogs.com/BlogE'>Blog-E</a>";
            //设置副标题标题
            $("#mypost_title_f").html(ftitle);
            //设置标题标签按钮
            $("#mypost_title_e").html(tag.replace(",",""));
            //设置底部导航条上一篇下一篇文章
            var pnp = $("#post_next_prev a");
            $("#mbottom-left").attr("href",pnp[1].href);
            if (pnp.length>2) {
                $("#mbottom-right").attr("href",pnp[3].href);
            }
        }
        $("#myheader_bg").css("filter","blur(0px)");
    }


    /** 
        自定义的js方法
    */
    //设置底部导航条点击事件
    $("#bottom-g").click(function(){
        follow('5dfde587-1816-e711-845c-ac853d9f53ac');
    })
    $("#bottom-s").click(function(){
        AddToWz(cb_entryId);return false;
    })
    var now_url = window.location.href.toLowerCase();
    if (now_url.indexOf("bloge/p/")==-1 && now_url.indexOf("bloge/diary/")==-1){
        $("#bottom-s").hide();
        $("#bottom-d").html("友链");
        $("#bottom-d").attr("href","https://www.cnblogs.com/BlogE/p/links.html");
        //分离博文
        var allday = $(".day");
        allday.each(function() {
          var nowday = $(this);
          var post = $("<div id='posts'></div>");
          nowday.children().each(function() {
            if ($(this).attr("id") != "posts") {
              if($(this).attr("class") == "postCon"){
                var pic=$(this).find("img");
                if(pic.length==1 && pic.hasClass("on")){
                    var postimg=$("<div class='post-img'></div>");
                    postimg.css("background-image","url("+pic.attr("src")+")");
                    post.prepend(postimg);
                    post.css("padding-top","0");
                    pic.hide();
                }
              }
              post.append($(this));
            }
            if ($(this).attr("class") == "postDesc") {
              $(".forFlow").append(post);
              post = $("<div id='posts'></div>");
            }
          })
        })
        allday.remove();
        $(".forFlow").append($(".topicListFooter[id!=homepage_top_pager]"));
    }else{
        var url = window.location.href;
        var lastUrl = url.substring(url.lastIndexOf("/")+1);
        var mpageId = lastUrl.substring(0,lastUrl.indexOf("."));
        $("#bottom-d").click(function(){
            DiggIt(mpageId,cb_blogId,1);
            green_channel_success(this,'谢谢推荐!');
        })
    }


    //通过滚动条控制导航条的展现隐藏
    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {
            if (t>120) {
                $("#mynavbar").css("margin-top","-70px");//顶部导航
                $("#post-bottom-bar").css("bottom","-3pc");//底部导航
                $(".forkme").fadeOut();
                if(document.body.clientWidth<1000){
                    $("#mynavbar_menu").slideUp();
                    var ON_CLASS_NAME = 'site-nav-on';
                    $(".site-nav-toggle").removeClass(ON_CLASS_NAME);
                }
            }
            if (t>300) {
                $("#right_meun").css("display","inline-block");//右侧导航
            }
        //上拉
        }else{
            //防止用a链接跳转也触发效果
            if (oldScrollNum-t<20) {
                $("#mynavbar").css("margin-top","0px");//顶部导航
                $("#post-bottom-bar").css("bottom","0");//底部导航
                if(document.body.clientWidth>=1000)
                    $(".forkme").fadeIn();
            }
            if (t<=300) {
                $("#right_meun").css("display","none");//右侧导航
            }
        }
        oldScrollNum = t;
    }

    //移动端菜单收缩/展开
    $(".site-nav-toggle").click(function() {
        var ON_CLASS_NAME = 'site-nav-on';
        if ($(this).hasClass(ON_CLASS_NAME)) {
            $("#mynavbar_menu").slideUp();
            $(this).removeClass(ON_CLASS_NAME);
        } else {
            $("#mynavbar_menu").slideDown();
            $(this).addClass(ON_CLASS_NAME);
        }
    })

    //背景大图点击模糊||清晰
    $("#myheader_cover").click(function(){
        if ($("#myheader_bg").css("filter") == "blur(3px)") {
            $("#myheader_bg").css("filter","blur(0px)");
        }else{
            $("#myheader_bg").css("filter","blur(3px)");
        }
    })

 </script>

 <script type="text/javascript">  
    var setMyBlog = {
        setCopyright: function() {
            //设置版权信息,转载出处自动根据页面url生成
            var info_str = '<p>作者:<a target="_blank">@ethan_zhou</a><br>'+
                '本文为作者原创,转载请注明出处:<a class="uri"></a></p><hr></hr>';
            info = $(info_str);
            info_a = info.find("a");
            url = window.location.href;
            if (url.indexOf("#") >= 0)
                url = url.slice(0, url.indexOf("#"));
            $(info_a[0]).attr("href","https://github.com/ethan-enhe");
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").prepend(info);
        },
        setCodeRow: function(){
            // 代码行号显示
            $("pre code").each(function(){
                $(this).html("<ol><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ol>");
            });
        },
        setAtarget: function() {
            // 博客内的链接在新窗口打开
            $("#cnblogs_post_body a").each(function(){
                this.target = "_blank";
            }) 
        },
        setContent: function() {
            // 根据h2、h3标签自动生成目录
            var captions_ori = $("#cnblogs_post_body h2"),
                captions_ori2 = $("#cnblogs_post_body h3"),
                captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<ul id='right_meun'></ul>");
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1,index2 = -1;
            captions.replaceWith(function(){
                var self = this;
                if(self.tagName == "H2" || self.tagName == "h2"){
                    // 设置点击目录跳转
                    index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); 
                    return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
                } else {
                    // add by BlogE 增加h3链接跳转
                    index2 += 1;
                    $('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]); 
                    $("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
                    return ;
                }
            });
        },
        setSearch: function() {
            var search = document.createElement('div');
            search.innerHTML="<input type=\"text\" id=\"q\" onkeydown=\"return zzk_go_enter(event);\" class=\"input_my_zzk\">&nbsp;<input onclick=\"zzk_go()\" type=\"button\" value=\"找找看\" id=\"btnZzk\" class=\"btn_my_zzk\">";
            search.setAttribute('id','searchblogpost');
            document.getElementById("mynavbar_menu").appendChild(search);
        },
        runAll: function() {
            /* 运行所有方法
             * setAtarget() 博客园内标签新窗口打开
             * setContent() 设置目录(仅在窗口够大时)
             * setCopyright() 设置版权信息
             * setSearch() 开启站内搜
             * setCodeRow() 代码行号显示
             */ 
            this.setAtarget();
            this.setContent();
            this.setCopyright();
            //this.setSearch();
            this.setCodeRow();
        }
    }
    setMyBlog.runAll();
</script>