博客美化过程笔记
目录
1. 前言
经过这些天的努力奋斗(龟速前进 )，至此我的博客基本已经美化成功，算然没有大佬的博客那么那么那么的好看美丽动人，但是我的这种简约风也挺好(自我安慰)，发现了前端大佬真的真的真的太厉害了，能做出一堆花样来。下面就开始我的美化吧。
2. 过程
2.1 博客皮肤的选择
这里我选择的是darkgreentrip
2.2 博客基本功能的实现
2.2.1 板娘
板娘的代码要粘贴再博客侧边栏公告处（记得要先申请JS！！！），想换人物的朋友，代码中给出了原博客网址，如有需要可自行查阅哦。
<!--板娘-->
<!--原链接：https://www.cnblogs.com/cainiao-chuanqi/p/11808640.html-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-haruto/assets/haruto.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 110,
"height": 140,
"hOffset": -17,
"vOffset": -10
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.8,
"opacityOnHover": 0.3
}
});
</script>
2.2.2 返回顶部小火箭
下面是代码实现:
(页首HTML处)
<!--返回页首小火箭-->
<!--原链接:https://www.cnblogs.com/seanshao/p/5716543.html-->
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 5px;
z-index: 99;
}
#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}
</style>
<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>
2.2.3 侧边栏头像
代码实现：
(侧边栏公告处)
<!--侧边头像-->
<img src="https://img2018.cnblogs.com/blog/1916157/202001/1916157-20200129012350032-73009666.png" alt="AllenMi的头像" class="img_avatar" width="210px"
height="200px" style="border-radius:50%">
tips：src里面放你的头像网址哦
2.2.4 音乐播放
这里我用的是HTML的audio标签来实现的，很简易。音乐的src推荐去全网音乐解析。
第一步：输入歌曲名点击搜索
第二步：复制红色箭头指向的链接
第三步：替换一下代码中的src 即可(侧边栏公告)
<audio controls="controls" autoplay="autoplay" preload="auto"><source src="http://m10.music.126.net/20200131231653/87f681d4739eb454cbfe83b1ae7c0425/ymusic/055a/0e09/020c/20c346c3bf9c7d8ce2205f910e1ac3de.mp3">
</audio>
2.2.5 动态改变网页标题
自己瞎写的，还有些许BUG，但勉强能用。下面是代码实现：(博客侧边栏公告)
<!--动态改变网页标题，原创-->
<script>
/*这叫js!*/
window.onfocus = function() {
//如果当前网页获得焦点就执行这个函数
document.title = '你回来了！真好！';//首先改变标题
setTimeout(function(){document.title = '欢迎来到我的小天地！';},"1500");//设置延时函数，再恢复默认标题
};
window.onblur = function() {
//如果当前网页失去焦点就执行这个函数
document.title = '你去哪里啦？快回来！';
};
window.onload = function() {
document.title = '欢迎来到我的小天地！';//当网页加载后改变标题
}
</script>
2.2.6 鼠标点击事件
废话不多说，这个是我魔改的代码，哈哈哈，相信大家一看就懂咋改的。下面是代码实现:(页首HTML代码)
<!--鼠标点击事件-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array(
"世界上",
"有很多的东西",
"你生不带来死不带去",
"你能带走的只有自己和自己的脾气",
"你曾拥有最美的爱情",
"你听过最美的旋律",
"触摸过一个人孤独的恐惧",
"也看到过最美的风景",
"我跌跌撞撞奔向你",
"你也不能一个人离去",
"我们在一起说过",
"无论如何一起经历了风雨",
"平平淡淡安安静静的老去",
"❤");
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>
2.2.7 网页的小图标
图片的链接可以上传到自己博客的文件里，然后再复制链接到href处，下面是代码实现:(页脚HTML代码)
<!--网页图标-->
<script type="text/javascript" language="javascript">
var linkObject = document.createElement('link');
linkObject.rel = "shortcut icon";
linkObject.href = "https://files.cnblogs.com//files/AllenMi/watermelon.ico";
document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
2.2.8 杂项处理
还有一些比较烦人的搜索啦，日历啦，文章末尾的个签啦，都在页面定制css中去除了，下面附上我全部的css代码，其中去除杂项的代码都有注释。下面是代码实现:(页面定制CSS代码)
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.7);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
/*博客标题*/
#blogTitle {
height: 100px; /*高度*/
clear: both;
background-color: rgba(245, 245, 245, 0);
}
/*博客大标题*/
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #6CC;
}
/*博客大标题文字*/
#blogTitle h1 a {
color: #16d1ef;
}
/*博客大标题鼠标移动*/
#blogTitle h1 a:hover {
color: #16d1ef;
margin-left: 60px;
text-decoration: underline;
font-style:italic;
transition: all 0.4s linear 0s;
}
/*博客签名*/
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #16d1ef;
font-weight: bold;
text-align: right;
float: right;
}
/*导航栏*/
#navigator{
background-color:#34a9e8;
}
#navList a:link, #navList a:visited, #navList a:active{
color: #fff;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #fff;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #238eb7;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
.dayTitle a {
display:none;
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
background-color: #34a9e8;
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
#main{
min-width: 640px;
}
#mainContent .forFlow {
width: auto
}
/*隐藏日历*/
#blog-calendar {
display:none !important;
//!important如果html中有内联样式但是想用css中的样式，就加个这个，强制更改优先级
}
/*隐藏搜索*/
#sidebar_search {
display:none;
}
/*隐藏文章底部广告*/
#ad_t2 {
display:none;
}
/*隐藏文章末尾的个签*/
#MySignature {
display:none !important;
}
/*隐藏杂项*/
#blog_post_info_block {
display:none;
}
/*隐藏评论提交杂项*/
#comment_form_container p:last-of-type {
display:none !important;
}
/* 隐藏反对按钮 */
.buryit {
display:none;
}
/*更改发表评论样式*/
#commentform_title {
margin: 10px 0 30px;
padding: 0;
border-bottom: 2px solid #ccc;
background-image: none;
font: normal normal 16px/35px "Microsoft YaHei"
}
#comment_form_container .author {
padding-left: 10px;
width: 320px;
height: 20px;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#4a4a4a;
background-image: none;
color: #FFFAF0;
}
#comment_form_container p {
margin-bottom: 20px;
font-size: 14px
}
.commentbox_title_left {
font-size: 14px
}
.commentbox_title_right {
float: right;
height: 24px;
}
/*链接设置评论背景图片*/
#comment_form_container .comment_textarea {
max-width:100%;
min-width:100%;
min-height:20em;
padding:5px;
border:none;
background:url("//images.cnblogs.com/cnblogs_com/ryanjan/1190413/o_o_kawai_mao.png") right bottom no-repeat;
background-color:#4a4a4a;
color: #FFFAF0;
font-size: 14px
}
#comment_form_container .comment_textarea:hover {
outline: 0;
border-color: rgba(82,168,236,0.8);
transition: all .4s linear 0s
}
#comment_form_container .comment_textarea:focus {
outline: 0
}
.comment_btn {
display: inline-block;
padding: 8px 20px;
width: 100px;
height: 38px;
outline: 0;
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #64a69c;
color: #fff;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 14px;
cursor: pointer;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-ms-transition: all .4s ease
}
.comment_btn:hover {
background: #333
}
#commentbox_opt a {
display:none;
}
/*隐藏加关注*/
#p_b_follow {
display:none;
}
3. 总结
经过这一次的博客倒腾，感觉前端很强大，但是不是太想学，HTML,CSS,JS，傻傻分不清，但也学习了一点点的css和html知识，自我感觉良好(垃圾)。在写博客的时候也感觉学到了很多很多东西，一会开个博客记录下MarkDwon语法。
人生处处是学问。
道生一，一生二，二生三，三生万物。
