博客园SimpleMemory美化教程(小白专用)

　　首先，我认为博客的定义是日记类的网站，用来记录自己的成长历程，像是早年的QQ空间既然是属于自己的空间那么就少不了装饰，以下都是按照自己的想法来折腾的，仅供参考，资源都来自互联网。

　　我创建博客的起源是想造一个(日历+备忘录+音乐播放器+....)，就整一个QQ空间类似的，也考虑过用Vuepress框架搭建博客，现在还是一个小喽啰太过花里胡哨的也不怎么好，不过用Vuepress搭建出来的博客是真的好看，但是太多雷同了，博客园自定义博客就挺好，我是学前端的，看过这么一句话，HTML是毛胚房，CSS是装修，JavaScript是通电(功能)，用框架有用框架的好，可能自己造就有无限的可能性，博客园也有大神的模板可以套用，多看看别人的博客也能学到很多，得到很多资源，每个人的审美都有点不同，不要强加喜好，毋庸赘言，接下来就是我的博客美化教程，本文会持续更。

　　前提：在博客园后台开通js权限，我使用的默认皮肤是SimpleMemory

1.日更的必应背景图

　　由外而内，我认为外在颜值很重要，就和(打个比喻)找女朋友一样，都是始于颜值，再那啥，首先来一张好看的background-img，有没有用过必应搜索的小伙伴，它的背景图是真的好看，听说每一张图都还拥有小故事，我就在百度找了必应背景图日更的api(百度大把)放到了body，实现了背景图日更，有人觉得华而不实，说实话我的空间自己喜欢就行，还设置了网站整体的不透明度，下面附上代码：

 

body{
    width:100%;
    height:100%;
    background: url(https://api.sunweihu.com/api/bing1/api.php) no-repeat; /*必应壁纸日更api*/
    -moz-background-size: cover;    /*背景图片拉伸以铺满全屏*/
    -ms-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: initial;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
}
#home {
margin: 0 auto;
opacity: 0.8;
width: 65%;
min-width: 1080px;
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

 

以上代码放到博客园设置 >页面定制 CSS 代码

2.鼠标点击特效

　　鼠标点击特效都是引用别人的js代码，如果怕别人的js代码路径失效的话你也可以下载下来再上传到博客园后台再调用(建议)，鼠标点击特效添加的途径有两种，一是自定义JavaScript鼠标点击响应效果，二是引用现成的，网上有各种酷炫美观的效果，自己百度，注：鼠标响应效果可迭加，前提是JavaScript函数内无重名，我是用的方法二，代码块放在页面底部就行，代码运行逻辑一般都是自上而下的运行，基于整个页面都要用的功能模块都放在底部就行。

　　我的鼠标点击特效是(小爱心+大小彩球)，下面附上代码：

<!-- 鼠标点击特效 爱心 -->
<script type="text/javascript" src="https://files.cnblogs.com/files/Liu928011/mouse.js"></script>

<!-- 鼠标点击特效  波波球-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/D-dong/boboqiu.js"></script>

  <!--点击冒点-->
  <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script>

以上代码放到博客园设置 >页脚 HTML 代码

3.音乐播放器

　　一开始想自己从零搭建自己的博客，就像用vue+element+vuex实现一个页面音乐播放器的，但是这只是自己的空间，放自己最喜欢的听的歌不就好了吗，要听歌还是下软件听歌不香吗，页面听歌音质差远了，还有一堆逻辑，在网上找来找去终于找到自己很喜欢的的一个播放器——Aplayer，颜值粉，歌词，进度条，歌单应有尽有，下面附上代码：

 

<!-- 音乐播放器(需要自动播放添加data-autoplay="true"到id="aplayer")-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="5174543849" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8" ></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

 

　　自定义歌单功能：在上面代码块里有个data-id，用过网抑云的小伙伴都知道，歌曲和歌单都可以生成外链，歌曲在软件或者网易云音乐官网都可以生成，但歌单外链就只有官网能生成，生成外链之后都会有相应的id，然后替换掉data-id里的值就行了，当然直接调网易云用那个外链也是可以直接生成的播放器，但是颜值差一点点，如果实用官方的外链是用的iframe标签建议换成embed，iframe兼容性更好，embed是H5的新标签，这里不细纠这两个标签了，自行百度，细节拉满，总之data-id可以自己找的，酷我，qq音乐都可，多打开这些网站看看就知道了，能不能悟到就看你们了，(还是附上截图),酷我的雷同(http://www.kuwo.cn/play_detail/81135985),后面的数字就是啦

　　还有两个细节点，一就是音乐自动播放，我建议不自动播放的好，谁都不喜欢进个网站还没看见内容就bgm响起来，就和广告一样，己所不欲勿施于人，这也是我选择博客园的原因，csdn那些广告真的多(seo好)，代码块里有自动播放的注释细看，二是页面跳转的音乐能否继续播放，这里只是引用的代码块，我用的Aplayer暂时没这个功能，好在是，官方会持续更新，其他的外链音乐播放器应该可，但是为了颜值，我就放弃了这个功能，涉及了url跳转，原则上音乐资源会重置，要连续播放有两个方法(个人之见)：一是frame，页面切换在frame发生，音乐控件没有重新加载。二是Ajax动态加载非音乐部分的页面，使用HTML5 history API来控制浏览器的前后跳转(细节自行百度)，可以去看看网易云音乐官网，或者酷我(颜值max)。