关于博客的简单美化

关于博客的简单美化

之前曾经是有过一个基于\(Github\)的博客的，但是代码的操控不是特别熟悉，在就博客里面还发了关于\(Blog\)转移的文章Lomen，但是后来由于某种\(unfortunately\)的原因它挂掉了（我搞了一个星期的博客啊！！！），现在只有一个空荡荡的\(README\)文件挂在上面。

因此短时间内不考虑\(Github\)的博客了，转手进行博客园美化。

博客今本上是照着\(\_rqy\)的“Next”模式依葫芦画瓢的，但是因为\(cnblogs\)的功能并没有\(Hexo\)那么强，因此差距还是略微比较大，但是还是有比较独特的地方的。

先上页面定制\(CSS\)

整体框架

https://blog-static.cnblogs.com/files/Yeasio-Nein/Page_CSS.css

上面这个网站保存的是我本地的整个CSS。

可以看到最上面的一大坨叠到一起的是博客的整体框架。这里选用的基本皮肤是Custom，（可别勾上了禁用模板CSS）。

接下来的那个注释叫"\(comment~area\)"的是我评论框里面趴着的那个橙色头发的孩子，我觉得很有爱，就粘上了。

接下来是每篇文章都会有的背景里面的姑娘，当然如果有代码部分的话是会被遮住的。以上两个模块大家觉得不好看的话可以删掉。

接下来是侧边栏。

侧边栏

侧边栏是基本所有的代码类型都支持的，HTML和JS都支持，因此大多数的东西都放在这里面。首先是最上面的头像.

<img id="preview_large" alt="" src="https://example.png" class="preview-image" style=""/>

把上面的https://example.png换成你的头像地址就可以啦！有时可能照片比较大，建议用画图缩小一下。

下面各种东西的链接就很简单了..

<a target="_blank" href="https://example.com" style="text-decoration:none;">Example</a>

就是这种格式啦。

然后是鼠标特效，我觉得花花的颜色不是很好看，配上我得纯白背景，就改成了黑色的。

<div id="hitokoto"><script>hitokoto()</script></div>
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("Example1","Example2");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 1,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "black"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function() {
                $i.remove();
            });
        });
    });
</script>

把里面的\("Example"\)换成你想要的文字就可以啦，下面的\(color\)可以修改文字颜色。

<script type="text/javascript" src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script><div id="lwlhitokoto"><script>lwlhitokoto()</script></div>

上面这个是引用的一言~

<script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/silence.min.js"></script>

<script type="text/javascript">
    $.silence();
</script>

少了上面这个代码你的侧边栏就没有啦~

<script type="taxt/javascript">
//浏览器标题切换
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title = '“苏浅呀” 我等你回来呢';  
        clearTimeout(titleTime);  
    }else{  
        document.title = '呐，陪我去划船吧~';  
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 2000); // 2秒后恢复原标题  
    }  
});
</script>

如题~~

其实我没有再搞网站的头像，感觉不是很好看，博客园的默认还是可以的啦...

页首

首先是右上角的\(github\)的小插件，我给搞成了黑白色的，大家也可以改成自己喜欢的颜色~

<a href="https://github.com/Yeasion" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:black; color:white; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

然后下面这个就是背景的动画，会跟着你鼠标走的线条~

<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

下面这个东西是加载的线条，我不小心搞成了非常粗的黑线，感觉还行，就没再改。。。

<script>    
{    
function getElementsByClass(key){    
var arr = new Array();    
var tags=document.getElementsByTagName("*");    
    for(var i=0;i<tags.length;i++){    
        if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){    
            arr.push(tags[i]);    
        }    
    }    
return arr;    
}    
var timer = window.setInterval(function(){    
    var el = getElementsByClass('pace');    
    if(el.length>0){    
        var a = document.createElement('div');    
        a.setAttribute('class', 'spinner');    
        var b = document.createElement('div');    
        b.setAttribute('class', 'spinner-icon');    
        el[0].appendChild(a);    
        a.appendChild(b);    
        window.clearInterval(timer);    
    }    
}, 3);    
}    
</script>    
<style>    
.pace .spinner {    
position: fixed;    
top: 15px;    
right: 15px;    
z-index: 2000;    
display: block;    
}    
.pace .spinner-icon {    
width: 18px;    
height: 18px;    
-webkit-box-sizing: border-box;    
box-sizing: border-box;    
border: solid 2px transparent;    
border-top-color: black;    
border-left-color: black;    
border-radius: 50%;    
-webkit-animation: nprogress-spinner .4s linear infinite;    
animation: nprogress-spinner .4s linear infinite;    
}    
@-webkit-keyframes nprogress-spinner {    
0% {    
-webkit-transform: rotate(0deg);    
transform: rotate(0deg);    
    
}    
100% {    
-webkit-transform: rotate(360deg);    
transform: rotate(360deg);    
}    
}    
@keyframes nprogress-spinner {    
0% {    
-webkit-transform: rotate(0deg);    
transform: rotate(0deg);    
}    
100% {    
-webkit-transform: rotate(360deg);    
transform: rotate(360deg);    
}    
}    
@keyframes fadeOut {    
from {    
opacity: 1;    
}    
to {    
opacity: 0;    
}    
}    
.pace {    
-webkit-pointer-events: none;    
pointer-events: none;    
-webkit-user-select: none;    
-moz-user-select: none;    
user-select: none;    
-webkit-transition: opacity 0.8s ease-in-out;    
-moz-transition: opacity 0.8s ease-in-out;    
-o-transition: opacity 0.8s ease-in-out;    
transition: opacity 0.8s ease-in-out;    
}    
.pace-inactive {    
opacity:0;    
filter: alpha(opacity=0);    
}    
.pace .pace-progress {    
background: black;    
position: fixed;    
z-index: 2000;    
top: 0;    
right: 100%;    
width: 100%;    
height: 10px;    
box-shadow: 0 0 3px #2299dd;    
}    
</style>
<!-- ÓÒÉϽÇÈý½Ç

页脚

页脚没弄什么东西，本来是搞了一个小小的友链，后来觉得不好看，放在页脚也不大好，就删掉了，只保留了一个很可爱的\(live2d\)，里面的女孩子很有意思的，好像很多人都有这个玩意么...

<style type="text/css">@import url(//fonts.googleapis.com/css?family=Kelly+Slab|Raleway);</style>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/Yeasio-Nein/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

直接粘上应该就能用了，但是有时候可能加载不出来，如果你那里的网速比较慢的话。

大概就是这些东西了，我没有添加很冗杂的插件，小仓鼠，挂钟什么的，感觉会比较乱...总的来说以简洁为主吧，希望能让有兴趣的人亮一亮眼睛。

\(SUE\)