博客美化完整代码
时至今日，我的博客主题已趋于完美，在我的审美角度来看已然合格，特决定放出源码，该代码前后大约半年的时间都在不断的完善，约有三分之一内容来自网络上的各大神犇的博客，另外三分之二则是我自己断断续续写成的，将删减后，去除大量无太大意义的代码模块，目前这个版本删减了约400行代码，只剩1200行代码。
注：我选用的模板是elf，推荐选用相同的模板，否则可能会有显示bug，以及不能原样照搬我的代码，否则连您的博客标题都和我的一样QAQ，请自行更改相关文字，如有不懂可以在评论区问我。
CSS
注：第二行需要替换成自己的博客的sidebar_links值，否则可能会有一点小小的bug，但基本不影响美观
/*侧边栏链接样式*/
#sidebar_links1543072
{
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
background: #fafcfd;
margin: 20px 5px;
}
.catList ul li
{
border-bottom: 1px solid #dadfe1;
border-top: 1px solid #fff;
overflow: hidden;
padding: 5px;
}
/*代码样式*/
.postBody li, .postCon li
{
margin-bottom:0em !important;
}
pre
{
position: relative;
margin-bottom: 24px;
border-radius: 3px;
border: 1px solid #C3CCD0;
background: #FFF;
overflow: hidden;
}
code
{
display: block;
padding: 12px 24px;
overflow-y: auto;
font-weight: 300;
font-family: Menlo, monospace;
font-size: 0.8em;
}
code.has-numbering
{
margin-left: 21px;
}
.pre-numbering
{
position: absolute;
top: 0;
left: 0;
width: 20px;
padding: 12px 2px 12px 0;
border-right: 1px solid #C3CCD0;
border-radius: 3px 0 0 3px;
background-color: #EEE;
text-align: right;
font-family: Menlo, monospace;
font-size: 0.8em;
color: #AAA;
}
.cnblogs-markdown .hljs
{
border: none !important;
}
#cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td
{
border: none !important;
padding: 0;
}
.postCon
{
font-size: 15px;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs
{
font-family: "Consolas",sans-serif !important;
font-size: 15px! important;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs
{
font-family: "Courier New",sans-serif!important;
font-size: 15px!important;
line-height: 1.5!important;
padding: 5px!important;
}
#cnblogs_post_body table, .cnblogs-post-body table
{
border: none !important;
border-collapse: collapse;
word-break: break-word;
}
/*侧边栏链接样式*/
#sidebar_links1543073
{
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
background: #fafcfd;
margin: 20px 5px;
}
.catList ul li
{
border-bottom: 1px solid #dadfe1;
border-top: 1px solid #fff;
overflow: hidden;
padding: 5px;
}
/*文章链接样式*/
.postBody a
{
text-decoration: none !important;
}
.postBody a
{
color:#158fc2
}
.postBody a:hover
{
color:#fa7e43
}
/*文章链接间隔*/
.postSeparator
{
clear: both;
height: 1px;
border-top: 1px dotted #666;
width: 100%;
clear: both;
float: right;
margin: 0 auto 0px auto;
}
.commentform
{
background: #fff;
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
margin: 20px 5px 10px 0;
padding: 5px;
}
#under_post_news
{
display: none;
}
/*字体与图片的大小*/
#cnblogs_post_body img
{
/*width:600px;*/
max-width: 100%;
}
#cnblogs_post_body ul
{
font-size: 14px;
}
#cnblogs_post_body p, #cnblogs_post_body div
{
font-size: 14px;
}
#cnblogs_post_body h1
{
font-size: 25px;
}
#cnblogs_post_body h2
{
font-size: 22px;
}
#cnblogs_post_body h3
{
font-size: 18px;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs
{
font-size: 14px !important;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active
{
font-size: 1.2em;
font-weight: bold;
text-shadow: 0 0 1px #b3b4ba;
line-height: 1.5em;
}
.catListTitle
{
font-size: 1.5em;
}
#blog-news
{
font-size: 14px;
}
.sidebar-block ul li
{
font-size: 14px;
}
.c_b_p_desc
{
font-size: 14px;
}
.postDesc
{
font-size: 14px;
}
.blog_comment_body
{
font-size: 14px;
}
/*评论样式*/
.feedbackListSubtitle {
color: #726b6b !important;
border-top: 1px dashed #589cb2 !important;
padding-top: 5px !important;
}
#blog-comments-placeholder {
background: #fff;
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
margin: 0 5px 40px 0;
padding: 0 4px 0px 4px;
}
.commentform
{
background: #fff;
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
margin: 20px 5px 10px 0;
padding: 5px;
}
.feedbackItem
{
margin: -18px 0px;
}
.feedbackListSubtitle a:link
{
color: #666;
font-weight: normal;
margin: 5px;
}
.feedbackCon
{
margin: 30px;
margin-top: 5px;
position: relative;
}
.feedbackManage
{
width: 200px;
text-align: end;
float: right;
margin: 0px 30px;
}
.feedbackListSubtitle
{
color: #666;
border-top: 1px dashed #3061a9;
padding-top: 5px;
}
.feedbackCon::after
{
display:none !important;
}
.feedbackCon::before
{
display:none !important;
}
.comment_vote
{
text-align: right;
margin: 5px 0px;
}
/*积分与排名样式*/
#sideBar
{
color: #567286 !important;
}
#sidebar_scorerank
{
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
background: #fafcfd;
margin: 20px 5px;
}
.sidebar-block ul li
{
border-bottom: 1px solid #dadfe1;
border-top: 1px solid #fff;
overflow: hidden;
padding: 5px;
}
/*小火箭*/
#back-top
{
position: fixed;
bottom: 100px;
right: 10px;
z-index: 99;
opacity: 0.5;
}
#back-top:hover
{
opacity: 1.0;
}
#back-top span
{
width: 50px;
height: 64px;
display: block;
background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
/*隐藏博客页尾的版权声明*/
#footer
{
display:none !important;
}
/*自定义版权声明*/
#gkfooter
{
text-align: center;
min-height: 15px;
_height: 15px;
margin-top: 10px;
padding-top: 10px;
margin-bottom: 10px;
text-shadow: 1px 1px 0 #fff;
}
/*手机定制主题*/
@media (max-width: 767px)
{
#navigator {
width: auto !important;
font-size: 20px;
height: 90px !important;
background: #fff;
text-align: center;
margin-top: 20px !important;
border-radius: 8px;
box-shadow: 0px 0px 10px #1f7b9b;
border: 1px solid #1f7b9b;
}
#sideBar
{
display:none !important;
}
.postTitle
{
font-size: 1.8em !important;
font-weight: bold !important;
line-height: 1.5em !important;
width: 100% !important;
clear: both !important;
}
.day
{
color: #666;
border-radius: 7px 7px 7px 7px;
box-shadow: 1px 1px 2px #a7a8ad;
background: #fff;
min-height: 10px;
_height: 10px;
margin: 0 10px 20px 13px !important;
padding: 5px 5px 5px 5px;
position: relative;
border-radius: 7px 7px 7px 7px;
}
#subtitle
{
display: none !important;
float: right;
font-size: 22px;
color: #00CED1;
line-height: 18px;
margin: 20px 50px 0 0;
}
#sideBar, body > a, .postDesc a
{
display: none;
}
#main,#mainContent
{
width: 100%;
}
.dayTitle
{
width: 0px;
display:none !important;
}
#home
{
padding-left: 0;
padding-right: 0;
}
#div_digg
{
width: auto;
padding: 0;
right: -25px;
bottom: 3px;
box-shadow: none;
}
#div_digg .buryit
{
display: none;
}
#mainContent .forFlow
{
padding-right: 0;
}
#mainContent .post
{
padding: 0 20px;
}
#sideBar,#blog-comments-placeholder
{
padding: 0 15px;
}
}
/*电脑定制主题*/
#main
{
width: 90%;
margin: 20px auto 0;
}
#mainContent
{
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
width: 75%;
}
#sideBar
{
color: #a8b1ba;
width: 250px;
min-height: 200px;
float: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
width: 25%;
}
#navigator
{
height: 30px;
clear: both;
width: 90%;
margin: 0 auto;
}
/*导航栏字体颜色*/
#navList a:link, #navList a:visited, #navList a:active
{
color: #87CEEB;
}
/*隐藏公告栏下方的个人介绍*/
#profile_block
{
margin-top: 5px;
line-height: 1.5;
text-align: left;
display: none;
}
/*标题放大*/
.postTitle, .entrylistPosttitle
{
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.8em;
padding: 5px 5px 5px 0px;
background: #fff;
border-radius: 10px 10px 0px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: font-size 2.5s; /*这里改变的是字体的大小*/
-moz-transition: font-size 0.5s;
-webkit-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
}
.postTitle:hover
{
font-size: 2em;
}
/*导航栏*/
#navigator
{
font-size:20px;
height:45px;
background:#fff;
text-align:center;
margin-top:40px;
border-radius: 8px;
box-shadow: 0px 0px 10px #1f7b9b;
border: 1px solid #1f7b9b;
}
#navList a
{
position: relative;
font-weight: bolder;
display: block;
height: 45px;
float: left;
text-align: center;
padding: .05em 1em;
font-size: 1.3em;
}
#navList li
{
margin:0;
line-height:42px;
display:inline-block;
float:left;
}
#navList li:hover
{
background:#1f7b9b;
}
#navList li a
{
padding:0 25px;
text-decoration:none;
line-height:42px;
border:0;
color:#1f7b9b;
font-weight:bold;
display:-moz-inline-box;
display:inline-block;
}
#navList li a:hover
{
padding:0 25px;
text-decoration:none;
line-height:42px;
border:0;
color:#fff;
font-weight:bold;
display:-moz-inline-box;
display:inline-block;
}
.blogStats
{
height:22px;
color:#1f7b9b;
line-height:42px;
}
/*隐藏原有导航栏*/
#header
{
display:none;
}
/*博客标题*/
.head
{
height: 60px;
line-height:60px;
padding-left:5%;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
background: #87CEEB;
}
.head h1
{
float:left;
width:200px;
height: 60px;
font-weight:bold;
font-size:26px;
background-color: #1f7b9b;
text-align: center;
}
.head h1:hover
{
float:left;
width:200px;
height: 60px;
font-weight:bold;
font-size:26px;
background-color: #ff7227;
text-align: center;
}
.head h1 a {
color: #00FFFF;
outline: none;
-moz-outline: none;
text-decoration: none;
font-size: 26px;
}
#blog
{
font-weight:normal;
font-size:16px;
color: #00FFFF;
}
#subtitle
{
display:block;
float:right;
font-size:22px;
color:#00CED1;
line-height:18px;
margin:20px 5% 0 0;
}
/*博客背景图片*/
body
{
background-color: #efefef;
background-image:url(http://images.cnblogs.com/cnblogs_com/gongdakai/1525184/o_%E5%8D%9A%E5%AE%A2%E8%83%8C%E6%99%AF3.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0;
background-size: cover;
padding-top:0px;
}
/* 定制公告栏时钟位置 */
#clockdiv
{
/* left, center, right */
text-align: center;
}
/*屏蔽博客园文章下面的广告*/
.c_ad_block
{
display: none !important;
}
#ad_t2
{
display: none !important;
}
/*固定推荐，删除反对*/
#div_digg
{
position: fixed;
bottom: 90px;
height: 56px;
width: 45px;
right: 38px;
border: 1px solid #fefefe;
padding: 7px;
background-color: #fff;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
opacity: 0.5;
}
.diggnum
{
font-size: 16px;
}
.diggword
{
display: none;
}
.buryit
{
display:none;
}
.diggit
{
margin-left:0px;
}
#div_digg:hover {
opacity: 1.0 !important;
}
公告栏
注：按照您自己的喜好，最好适当更改。一定要记得改“Q我吧”模块中表示QQ账号src的参数，改成您自己的QQ。
<font color="black"><center><h1>公 告</h1></center></font>
蒟蒻一枚~~~<br><br>
弱校挣扎的OIer...<br><br>
我的QQ在这哦！2399531787~~~【加好友请注明姓名和来源哦，谢谢各位支持^_^】<br><br>
希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦~~~<br><br>
热爱交友！orz...<br><br>
非常乐意互换友链呐<br><br>
~o( =∩ω∩= )~<br><br>
有事您Q我!!!(点击下方图片建立临时会话)<br><br>
<center>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1820863411&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:2399531787:13" alt="有事您Q我" title="有事您Q我">
</a>
</center>
<br>
<!-- 添加公告栏时钟 -->
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
页首HTML
注：把第二行的博客名称改为您自己的，第三行的个性签名也改成您自己的，还有导航栏的几个链接也别忘了改成您自己的，头像、音乐、鼠标特效、版权声明等也建议一一更改，如果不知道怎么改可以在评论区问我
<div class="head clearfix">
<h1><a href="https://www.cnblogs.com/gongdakai/">拱垲’<span id="blog">blog</span></a></h1>
<span id="subtitle">主博客 | 双脚踏翻尘世浪， 一肩担尽古今愁。</span>
</div>
<!--博客导航栏 -->
<div id="gkheader">
<div id="navigator">
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
<li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongkai/">首页</a></li>
<li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongdakai/">技术博客</a></li>
<li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li>
</ul>
</div>
</div>
页尾HTML
<!--代码-->
<script>
$(function () {
if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang($(".cnblogs-post-body pre"));
else setCodeRowWithLang($(".cnblogs-markdown pre"));
/* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
});
function setCodeRowWithLang(pre) {
if (pre && pre.length) {
pre.each(function () {
var item = $(this);
var lang = item[0].className;
var langMap = {
"html": "HTML",
"css": "CSS",
"js": "JavaScript",
"cpp": "C++",
"cpp prettyprint":"C++",
"vim": "vim",
};
var displayLangText = "";
if (lang in langMap) displayLangText = langMap[lang];
else displayLangText = lang;
item.find('.hljs')
});
};
}
</script>
<script src="https://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
$("pre").addClass("prettyprint");
prettyPrint();
})();
</script>
<!--头像-->
<script type="text/javascript" language="javascript">
//Setting ico for cnblogs
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://files-cdn.cnblogs.com/files/gongkai/favicon.ico";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
<!--网易云音乐 -->
<script type="text/javascript">
var s = unescape("\u0069\u0066\u0072\u0061\u006d\u0065");
var f = '<'+s+' frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=550456837&auto=0&height=66" class="music" style="z-index: 999;right: 5PX;display: block;bottom: 10px;position: fixed;"></'+s+'>';
$("body").append(f);
</script>
</script>
<script>
function addEvent(target,type,handler){
if(target.addEventListener){
target.addEventListener(type,handler,false);
}else{
target.attachEvent('on'+type,function(event){
return handler.call(target,event);
});
}
}
var progress = document.createElement('progress');
progress.id = 'progress';
progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:9px;text-align:center;font:12px/12px "瀹嬩綋";';
document.body.appendChild(progress);
var H;
addEvent(window,'load',function(){
progress.max = H = cnblogs_post_body.scrollHeight;
});
addEvent(window,'scroll',function(){
var h = document.documentElement.scrollTop || document.body.scrollTop;
progress.value = h;
var radio = (h/H >= 1) ? 1 : h/H;
progress.innerHTML = progress.title = Math.floor(100*radio) + '%';
});
</script>
<div id="gkfooter">
<div id="poweredby">Copyright © 2018 拱垲. All rights reserved.</div>
</div>
<script>
// 浏览器标题切换
var OriginTitile = document.title; // 保存之前页面标题
var titleTime;
document.addEventListener('visibilitychange', function(){
if (document.hidden){
document.title = '喔唷 ￣ω￣ 不小心崩溃辣';
clearTimeout(titleTime);
}else{
document.title = '呀! (o°ω°o)又好啦~ ';
titleTime = setTimeout(function() {
document.title = OriginTitile;
}, 2000); // 2秒后恢复原标题
}
});
</script>
<!--返回顶部小火箭-->
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<!--代码放置于</body>上方-->
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,255,255"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤","拱大垲棒棒哒","GK最帅","好表脸的说","哼唧","咋地吧","我的bolg我做主","我的代码我做主","OhYeser","开森~皮一下");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
