博客园美化教程
正文
最终效果如下,有头像、背景图片、返回顶部、爱心特效、以及代码高亮等,本教程使用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> </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;">即可,效果如上面代码块。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)