经过再三思考，终于将博客从Wordpress框架迁移到了Hexo,(这里必须吐槽，官方发布的用于从wp迁移到hexo的插件hexo-migrator-wordpress实在是太垃圾了….)，然后，发现远远没有这么简单，默认的hexo和next依旧的非常不顺眼，于是本蒟蒻开始了艰难的美化之旅。
0x01 添加背景
页面太单调？那就添加一下背景图片吧，很简单，只需要在themes/next/source/css/_custom/custom.styl文件末尾添加内容：
body {
background:url("/images/background.jpg");
background-repeat: no-repeat;//不重复
background-position: center;//居中
background-size: cover;//填充
background-attachment:fixed;//不随页面滚动
// background-position:0% 0%;
}
然后我们将背景图片上传至 /source/images并重命名为background.jpg即可。建议将背景图片做下处理，比如切一切，不然访问速度非常致命。
0x02 文章阴影设置
这个最简单了，只需要打开 /themes/next/source/css/_custom/custom.styl,向里面加入：
// 主页文章添加阴影效果
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
0x03 代码高亮
这个太简单也太重要了，因为代码丑博客丑，默认的高亮模式….反正我是爱不了。只需要打开站点配置文件修改highlight_theme参数就可以了，具体的修改选项注释已经写的很清楚了，一个个去换过来看看，选择自己喜欢的模式即可，本博客用的是night bright
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright
0x04 鼠标点击特效
鼠标点击特效有两种，一种是红心特效，一种是烟火特效。
红心特效
我们需要在 /themes/next/source/js/src 下建立文件clicklove.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 文件末尾添加：
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>
烟火特效
跟红心是差不多的，首先在themes/next/source/js/src里面建一个叫fireworks.js的文件，代码如下：
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
打开themes/next/layout/_layout.swig,在 <body>上面写下如下代码：
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
最后打开主题配置文件，在里面写下：
# Fireworks
fireworks: true
0x05 动态背景
新版的Next主题集成了多种动态背景，理论上只需要在主题配置中设置即可，但是个人测试发现很不靠谱，各种加载不出来让我非常头疼，因此在这里给出我的解决方案。
首先，找到themes/next/layout/_layout.swig文件，在 <body>里添加内容：
<div class="bg_content">
<canvas id="canvas"></canvas>
</div>
并在该文件末尾（<html> 标签外）添加以下内容以加载JS：
<script type="text/javascript" src="/js/src/dynamic_bg.js"></script>
然后，在themes/next/source/js/src中新建文件dynamic_bg.js,文件内容抄这个就可以
最后，在themes/next/source/css/_custom/custom.styl文件末尾添加内容：
.bg_content {
position: fixed;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
}
最后补充一句，实测发现这个动态背景会和上面的烟花鼠标点击特效会冲突，但和爱心特效不冲突，个人感觉应该是因为这个动态背景能响应鼠标点击造成的。
0x06 隐藏文章
往往人类总是喜欢写一些乱七八糟的东西在博客上，但又不希望别人看到，所以，就需要将一些文章隐藏。关于如何优雅的隐藏博客文章，我折腾了好久，刚开始试图用hexo-generator-index2，结果发现不太行，于是参考了一个大佬的方法，通过自定义参数配合if语句成功隐藏了文章。
首先，隐藏文章时需要自定义front-matter参数，在这里，我们定义一个notshow参数设置为true，就比如这样：
---
title: Hexo NexT博客美化
categories:
- 未分类
date: 2019-08-5 15:00:00
tags:
notshow: true
---
然后需要修改主题的index.swig文件，比如我的NexT主题就在themes/next/layout/index.swig,我们需要将其中遍历文章的部分添加if语句以对notshow参数进行判断以实现隐藏。也就是修改这里：
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{{ post_template.render(post, true) }}
{% endfor %}
</section>
{% include '_partials/pagination.swig' %}
{% endblock %}
改成：
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{% if post.notshow != true %}
{{ post_template.render(post, true) }}
{% endif %}
{% endfor %}
</section>
{% include '_partials/pagination.swig' %}
{% endblock %}
这样就可以实现特定文章不在首页显示了，但是不要忘了同时的去除该文章的categories标签，不然，你的秘密文章还是会在分类页面被找到的！
0x07 参考资料
https://asdfv1929.github.io/2018/07/07/next-add-dynamicbg/
https://blog.csdn.net/nightmare_dimple/article/details/86661502
