Hexo搭建个人博客（二）——页面美化

写在前面：博主采用NexT.Mist v5.1.4版本主题，以下教程基于此版本进行配置。完成以下配置后，即可实现博客网站的全局设计，以后只需要专注于博客内容。如果需要增加或调整样式的，需要重新查阅相关资料进行配置。如果还没有搭建博客框架的小伙伴可以参考上一篇文章《Hexo搭建个人博客（一）——框架搭建》

目录

1、网站名称：

 2、网站图标

3、顶部加载进度条

4、动态背景

5、红心点击效果

6、导航菜单

7、DaoVoice在线联系

8、搜索菜单

9、页脚

（1）建站时间

（2）网站访问统计

（3）图标更换

 10、侧栏

（1）头像

（2）头像旋转动画

（3）社交链接

（4）推荐阅读

11、博客页面

（1）阅读统计

（2）来必力评论

（3）阅读结束

（4）修改博客底部标签号为图标

（5）文章底部增加版权信息

---

效果预览：现在开始从零美化博客页面，教程最终效果图

1、网站名称：

修改站点配置文件

 2、网站图标

到easyicon中找一张（32*32）的ico图标，然后把图标放在/themes/next/source/images里，并且修改主题配置文件，更改一下路径即可

3、顶部加载进度条

修改主题配置文件，搜索Progress bar ，将pace: false改为pace: true即可，你还可以换不同样式的加载条，如下：

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

4、动态背景

在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true即可

5、红心点击效果

在/themes/next/source/js/src路径下新建一个love.js文件，添加以下代码：

!function(e,t,a){function n(){c(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

 

6、导航菜单

修改主题配置文件