博客园美化教程

 

正文

最终效果如下，有头像、背景图片、返回顶部、爱心特效、以及代码高亮等，本教程使用SimpleMemory模板

 

1）页面定制 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
/*背景图片*/
/*url里放背景图片地址*/
body {
    color: #000;
    background:url(https://www.cnblogs.com/images/cnblogs_com/xdzy/1321801/t_234967-1312240S61018.jpg) no-repeat fixed;
    background-size:cover;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}
​
/**********************************/
/*主面板*/
/*建议先自己拿F12调试一下效果*/
#home {
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 75%;  /*大白框的宽度*/
    min-width: 650px;  /*最小宽度*/
      /*颜色 我比较喜欢不特别透的*/
    padding: 30px;
    margin-top: 70px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    border-radius: 12px;
}
​
/**********************************/
/*编辑h1*/
#cnblogs_post_body h1 {
    background: #183E5D4D;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;/*字体颜色*/
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 35px;/*框框高度*/
    line-height: 34px;/*文本框高度*/
    margin: 18px 0 !important;
    padding: 8px 0 5px 7px;
    text-shadow: 2px 2px 3px #222222;
    /*下面三句是加左边那条线的*/
    border-left-color: rgb(29, 60, 74);
    border-left-style: solid;
    border-left-width: 3px;
}
#cnblogs_post_body h2 {
    background: #18639F1A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 17px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 7px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3 {
    background: #5BBBEF1A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 17px;
    line-height: 17px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
    border-left-color: rgb(107, 171, 234);
    border-left-style: solid;
    border-left-width: 3px;
}
​
/**********************************/
/*引用框*/
blockquote {
    background: none;
    border: 2px solid #ffffff4d;
    border-left-color: rgba(255, 255, 255, 0.3);
    border-left-style: solid;
    border-left-width: 2px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 3px solid #21759b;
    border-left-color: rgb(33, 117, 155);
    border-left-style: solid;
    border-left-width: 3px;
}
​
/**********************************/
/*推荐和反对*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
     
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
​
.icon_favorite {
    background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}
​
#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}
​
/**********************************/
/*返回顶部*/
.backToTop {
     border: 1px dashed;
     display: none;
     width: 18px;
     line-height: 1.2;
     padding: 5px 0;
      
     color: #000;
     font-size: 12px;
     text-align: center;
     position: fixed;
     _position: absolute;
     right: 10px;
     bottom: 100px;
     _bottom: "auto";
     cursor: pointer;
     opacity: .6;
     filter: Alpha(opacity=60);
}

 

2）博客侧边栏公告（支持HTML代码） （需要申请支持 JS 代码）

?
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
<!-- 爱心特效 -->
<script type="text/javascript">
(function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame ||
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();
        init();
        function init(){
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
        }
        function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
            });
            document.body.appendChild(d);
    }
    function css(css){
            var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
    }
        function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }
})(window,document);
</script>
​
<!---------------------------------------------------------->
<!-- 头像 -->
<img src="https://img.99danji.com/uploadfile/2019/0731/20190731104116264.jpg" alt="zzx" class="img_avatar" width="230px" style="border-radius:50%">

 

3）页首 HTML 代码 （代码高亮在这里引用）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/xdzy/shCoreRDark.css"/>
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/xdzy/shThemeRDark.css"/>
​
<script type="text/javascript">
(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();
</script>

 

4）页脚 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
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
​
    if(mainContent.length < 1)
        return;
  
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
             
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
             
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }  
    //var qqinfo =  '<p style="color:navy;font-size:12px">讨论QQ群：135202158</p>';
    //$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>

 

5）注意

引用网络图片可能会失效，可以先将图片下载到本地，之后上传到博客园，最后在引用博客园图片地址；

代码高亮选择的是SyntaxHighlighter，需要从 https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83 下载代码，之后将shCoreRDark.css 和shThemeDefault.css 上传到博客园，之后在后台引用该文件地址即可；

代码高亮在代码中需要设置，首先插入代码，之后编辑html源码，找到代码块的<div class="cnblogs_code"><pre>改成<div class="cnblogs_Highlighter"><pre class="brush:sql;gutter:true;">即可，效果如上面代码块。

posted @   肖德子裕  阅读(424)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示