美化Hexo 个人博客

我的博客地址：[https://ayjcsgm.github.io/]

---

---

【01】添加卡通人物（看板娘）

我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！点击此处进入该项目地址

输入如下命令获取 live2d ：

$ npm install --save hexo-helper-live2d  

输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客

$ npm install packagename

打开站点目录下的 _config.yml 文件，添加如下代码：

live2d:
	enable: true
	scriptFrom: local
	model: 
		use: live2d-widget-model-haruto #模型选择
	display: 
		position: right  #模型位置
		width: 150       #模型宽度
		height: 300      #模型高度
	mobile: 
		show: false      #是否在手机端显示

设置好过后我们就拥有了一个卡通人物

---

【02】添加鼠标点击爱心效果

在 \themes\hexo-theme-spfk\source\js 下新建文件 love.js，在 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: 500%;-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