这篇文章并不是教程分享向的博文，写得不是很详细，文字排版也没有完全美化、没有参考图片。对于找到这里的你，我要说声抱歉。
本文纯是博主对于自己博客美化所作的步骤顺序，出发点是为了在优化过程中若出现错误可以撤销上一步的操作。博主自己每做一步就hexo clean && hexo g && hexo s本地预览一下，如果没有出现错误就上传，否则就撤销操作。
所以我做了什么？
1.我做了tag ，我创建了关于，分类.
2.我修改了社交
打开主题配置文件，找到social字段，修改
3.添加了本地搜索
- 首先输入指令下载：
npm install hexo-generator-searchdb --save
- 修改站点配置文件，添加代码：
search:
path: search.xml
field: post
format: html
limit: 10000- 然后打开主题配置文件 ，搜索 local_search，修改 enable 为 true
4. 添加红心特效
如何创建一个JS文件(建立一个txt文件更改后缀名为js，建立完成.)，用记事本打开.swig文件。(OS:记事本真是永远的神)。修改了，好像没有作用。（我学会了，我懒得改序号了，教程见第28点
5. 显示busuanzi博客访客/访问次数统计/Github标识
Github标识：在 GitHub Corners 选择自己喜欢的按钮样式并复制代码，将https://your-url换成自己的链接，将改好的代码粘贴到themes/next/layout/_layout.swig文件中
下面一行。（OS:但我在文件中没有找到我的GitHub，我之前用了其他方法，这个方法是后来总结。）6. 隐藏网页底部 powered By Hexo / 强力驱动
打开 themes/next/layout/_partials/footer.swig，找到：div class="powered-by，把这段代码首尾分别加上：，或者直接删除.
(后续我了解到，最新版next可以在next文件中的其他文件打开开关就行)
7. 显示当前浏览进度
打开主题配置文件，找到back2top:，把 scrollpercent: 的false 改为 true
相关代码解释：
back2top:
enable: true # 开启 back to top 按钮
# Back to top in sidebar.
sidebar: true # true 表示在侧边栏显示，false则在侧下角
# Scroll percent label in b2t button.
scrollpercent: true # 开启进度百分比8. 打开阅读进度条
打开主题配置文件，找到reading_progress:，把false 改为 true
相关代码解释：
# Reading progress bar
reading_progress:
enable: true # 开启进度条
# Available values: top | bottom
position: bottom # 设置位置 可以为 top | bottom
color: "#37c6c0" # 进度条颜色 16进制RGB
height: 3px # 高度9. 文章置顶功能
1. 卸载原插件和安装置顶插件，执行下面两行命令：
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top –save2. 然后在需要置顶的文章的Front-matter中加上top: true
3. 设置置顶标志：
打开：/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color="RED">置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}3.1 如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：
title: a
top: 110. 文章字数统计和阅读时长估计
根目录输入指令下载插件：
npm install hexo-symbols-count-time 11. 头像放左右Pisces或Gemini方案，
打开themes/next/下的_config.yml，查找sidebar，将想要的方案打开。
（在这里出现了一些问题。不知所以然就改好了。但是我被惊出了一身汗，因为我没有备份配置文件就立刻改了，而且我还是在改了12点后预览才发现无法配置。于是我在11、12两点反复改动。我下次改一次之前必备份一次，并且只改一点，绝不多改。太可怕了。后果很严重，严重到关站大吉。）
12. 显示版权信息
打开themes/next/下的_config.yml，查找creative_commons， 将post的false改为true即可显示版权信息
13. 为博客加上看板娘
Git输入下方代码：
npm install -save hexo-helper-live2d然后在根目录的配置文件 _config.yml中添加参数：
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<你喜欢的模型名字>
display:
position: right
width: 150
height: 300
mobile:
show: true（预览图 ）
在站点目录下建文件夹live2d_models，再在live2d_models下建文件夹<你喜欢的模型名字>,
再在<你喜欢的模型名字>下建json文件，文件名为：<你喜欢的模型名字>.model.json
安装模型。在命令行（即Git Bash）运行以下命令即可：
npm install --save live2d-widget-model-<你喜欢的模型名字>
OS:1. 在写名字的时候，记得把<>删掉
想看预览图来这里看：https://blog.csdn.net/as480133937/article/details/100138838 (自己找到那个为博客添加妹子的位置。)
14. 使博客底部的爱心跳动
打开主题配置文件，搜索animated:，把false改为true
15. tag 样式# 改为带图标
打开主题配置文件，找到tag_icon:，把false改为true
16. 文章结束语标语
打开 themes/next/layout/_macro/post.swig 文件，找到文章结束语标语END POST BODY位置，复制以下代码，将其插入。
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
----- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读 -----
</div>
{% endif %}
</div>17. 主题样式调色，
打开\themes\next\source\css\_variables\base.styl，找到colors for use across theme.，可以参考以下一位博主的修改，该主题为紫色。
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke = #daa5ff; // 菜单栏当前菜单，归档线条
$gainsboro = #e3c6f0; // 菜单栏头像边框，分割线。单行代码块
$gray-lighter = #cccedd; // 菜单栏子标题
$grey-light = #ab2acc; // 菜单栏文章计数器
$grey = #6a2dbb; // 时间节点
$grey-dark = #67439a; // 菜单栏博主卡片区文字【描述|日志|分类|标签】
$grey-dim = #9059bf;
$black-light = #3d155a; // 文章正文颜色
$black-dim = #5b2293;
$black-deep = #6947bb; // 菜单栏背景补充: 以上#数字字母为RGB的16进制
18. 背景动画，
Canvas-nest风格、JavaScript 3D library风格 、Canvas-ribbon风格。
我终于知道这是怎么弄的！！网上很多教程都没有更新。我走了很多弯路。原来我所用的next版本都没有下载这些动画包。需要自己下载。链接就在注释中``# Dependencies 项后面。
例如我下载第一种，即选择Canvas-nest风格，在主目录执行：
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest然后打开themes/next/下的_config.yml文件，搜索Canvas-nest，将canvas_nest的中enable值改为true即可。如果没有这段代码，需要自行添加：
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines同理，其他两种动画包也要自行下载，下载指令为：
Git clone 动画链接 themes/next/source/lib/(动画链接后面next-后面的名称)
请自行领悟参考我下载Canvas-nest风格的指令
(至2021.7.17，我的博客用了两个动画，nest和ribbon
19. 去掉文章目录标题的自动编号。
我们自己写文章的时候一般都会自己带上标题编号，但是默认的主题会给我们带上编号，很是别扭，如何去掉呢？
在主题配置文件中找到toc属性，将其中的number属性设置成false，如下：
toc:
enable: true
number: false
wrap: false20. 加头像
把你要加的头像复制粘贴到\themes\next\source\images文件下，名称为avatar.gif（后缀可为jpg，自己变通），在主题配置文件_config.yml里面找到avatar，以下：
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
opacity: 1 # 不透明的比例：0就是完全透明
rotated: false # 不开启旋转 21. 不蒜子统计与live2D看板娘冲突问题
使用next新的主题时，在hexo中添加live2D看板娘后next原生自带的不蒜子统计会失效，解决方法：
1). 卸载live2d可以解决问题：
npm uninstall --save hexo-helper-live2d2). 看板娘怎么可以卸载？？？？？ 绝对不能接受！！！
a. 关闭next原生不蒜子
打开主题配置文件，搜索busuanzi_count:，把false改为true
b. 修复主页总数统计
在Hexo根目录/themes/next/layout/_partials/文件夹中修改 footer.swig，在最后一行前加入代码：
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span><br></span>
<span class="post-meta-item-icon">
<i class="fa fa-group"></i>
</span>
<span>总访客 <span id="busuanzi_value_site_uv"></span> 人</span>
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span>访问总量 <span id="busuanzi_value_site_pv"></span> 次</span>
{{- next_inject('footer') }}c. 修复文章统计
开启 主题配置文件 - valine 评论中的 visitor 开关来替代不蒜子的统计功能。
22. 修改文字模板
在根目录下，找到scaffolds/post.md，将其修改为你需要的模式，新建文章就是模板的形式了,可以参考我的:
title: {{ title }}
date: {{ date }}
categories:
tags:
top: 23. 增加赞赏功能
在微信、支付宝中拿到赞赏码、付款码图片，放入themes/next/source/images文件夹中。比如我的是 wechatpay.jpg和alipay.jpg，修改主题配置文件，找到reward_settings:，打开enbale，填写comment，在下面的reward:，填写图片路径。
如果你不喜欢Donate、 Wechat Pay 和 Alipay这样的字眼，可以在 themes/next/languages/zh-CN.yml 中自行翻译。
24. 啊啊啊啊啊，我终于搞定圆角和阴影了
1) 圆角
首先把主题配置文件，取消 variables.styl 的注释（即去掉#），然后在根目录source创立_data文件夹，然后创建记事本variables.styl，在里面输入以下代码：
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;2) 阴影
在根目录source的 _data文件夹创建记事本style.styl，在里面输入以下代码：
// 主页文章添加阴影效果
.post {
margin-top: 60px;
padding: 20px;
margin-bottom: 60px;
-webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}25. 添加背景图片
把想设置的背景放入/themes/next/source/images中，命名为background.jpg。在根目录的source文件夹下的_data/styles.styl，输入以下代码：
body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
}(记得在主题_config.yml文件中打开styles.styl的注释。
26. 博客内容透明化
在根目录的source文件夹下的_data/styles.styl，输入以下代码：
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}
//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}
//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}
//搜索框（local-search）的透明度设置
.popup {
opacity: 0.9;
}27. 修改文章链接样式为蓝色高亮显示
找到文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}28. 啊啊啊啊我终于学会了添加鼠标点击特效了！！
1) 第一个是烟花特效：
a. 首先创建文件，写代码
在themes/next/source/js/src (如果没有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)};b. 继续写代码
然后打开themes/next/layout/_layout.swig,在
