hexo配置NexT主题

前言
这篇文章就不介绍如何去搭建hexo了
只说如何配置hexo的NexT主题
开发环境：macOS
hexo：v3.8.0
NexT：v6.6.0

更换主题

克隆主题

cd到你的hexo文件下面，输入下面命令克隆NexT皮肤代码到本地

git clone https://github.com/theme-next/hexo-theme-next themes/next

切换主题

打开站点配置文件 _config.yml
查找theme:

将其后面的参数改为next后保存

更新主题

# 切换到NexT主题目录下
cd themes/next/

# 更新主题代码
git pull

---

配置网站Favicon图标

效果图

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找favicon:
将其下面的几位属性的参数改为你图片的路径
⚠️静态文件放到themes/next/source/下面对应的文件夹下

---

更换底部icon图标

效果图

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找icon:
更换name的值为你想要的图标图标库地址
💡可将animated的值改为true，让图标有变大变小效果
💡更换color的值可以修改图标的样式

---

隐藏底部Powered by Hexo及主题版本信息

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
Powered by Hexo
查找powered: 将其下面的
enable的值改为false
主题版本信息
查找theme: 将其下面的
enable的值改为false

---

添加备案号

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找beian: 将其下面的

enable的值改为true
icp的值改为你的备案号

---

更换NexT风格

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找scheme: 将其下面的

注释去掉，更换一款适合你的

---

添加头像

打开themes/next/_config.yml（路径：你的博客路径/themes/next/_config.yml）
查找avatar: 将其下面的

url: /images/author-img.jpg # 头像的地址
rounded: true # 是否圆形显示
opacity: 1 # 透明度
rotated: true # 鼠标移入移出头像时，头像是否旋转

---

实现fork me on github

效果图

从下面两个链接选择自己喜欢的，把代码复制下来
Link1 或者 Link2

打开themes/next/layout/_layout.swig文件
将刚刚复制的代码放到<div class="headband"></div>下面
并且将href改为你自己的地址

---

实现动态背景

效果图

打开终端

cd themes/next
git clone <https://github.com/theme-next/theme-next-canvas-nest> source/lib/canvas-nest

打开next/layout/_layout.swig
查找canvas_nest:
将下面的enable的值改为true

💡背景样式可通过更改修改canvas_nest下的其他属性进行配置

---

实现点击红心效果

效果图

在next/source/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: 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/_config.yml末尾添加以下代码

# love.js

love_js: true

在next/layout/_layout.swig的</body>前面添加以下代码

{% if theme.love_js %}
    <script type="text/javascript" src="/js/src/love.js"></script>
{% endif %}

---

实现点击大爆炸效果

效果图

在next/source/js/新建文件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/_config.yml末尾添加以下代码

# fireworks.js

fireworks_js: true

在next/layout/_layout.swig的</body>前面添加以下代码

{% if theme.fireworks_js %}
    <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 %}

---

实现顶部加载进度条

效果图

打开终端

cd themes/next
git clone https://github.com/theme-next/theme-next-pace source/lib/pace

打开next/layout/_layout.swig
查找pace:
将它的的值改为true

💡进度条样式可通过更改修改pace_theme的值去更换你自己喜欢的，默认是pace-theme-minimal

• 进度条样式列表:

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

---

添加搜索功能

打开终端，执行以下命令
npm install hexo-generator-searchdb --save
打开themes/next/_config.yml
查找local_search:
将它下面的属性enable的的值改为true

---

在网站底部添加访问量

打开next/layout/_layout.swig
查找busuanzi_count:
将它下面的属性enable的的值改为true

💡可通过修改busuanzi_count下面的几个属性控制它们显示隐藏及前面icon的样式
💡icon的样式链接https://fontawesome.com/v4.7.0/icons

---

设置首页不显示全文

打开themes/next/_config.yml
查找auto_excerpt:
将它下面的属性enable的的值改为true

💡这会让首页的文章多一个阅读全文的按钮
💡可通过修改length的值去更改首页文章显示的字数长度

---

添加站点/文章字数统计

效果图

打开终端，执行以下命令
npm install hexo-symbols-count-time --save

打开站点配置文件，添加下面的代码

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true

⚠️假如没法出现效果可尝试执行以下命令

cd themes/next
npm install hexo-symbols-count-time --save

---

添加侧边栏社交联系方式

效果图

打开themes/next/_config.yml文件
查找soical:
将相应注释去掉，并将对应的值改为你的社交链接

---

添加侧边栏推荐阅读

效果图

打开themes/next/_config.yml文件
查找links_title:
按下面进行修改

# 图标

links_icon: link

# 标题

links_title: 推荐阅读

# 显示方式

# links_layout: block

links_layout: inline

# 链接

# 格式为【名称: 链接】

links:
 掘金: <http://juejin.im>
 张鑫旭: <https://www.zhangxinxu.com/>
 慕课网: <http://imooc.com>

---

添加萌妹

效果图

打开终端，输入下面代码安装依赖

npm install --save hexo-helper-live2d

输入下面代码安装模型

npm install --save live2d-widget-model-shizuku

在站点配置文件末文件末添加下面代码，重启hexo s

# Live2D
# https://github.com/EYHN/hexo-helper-live2d
live2d:
 enable: true
 scriptFrom: local
 pluginRootPath: live2dw/
 pluginJsPath: lib/
 pluginModelPath: assets/
 tagMode: false
 debug: false
 model:
   use: live2d-widget-model-shizuku
 display:
   position: right
   width: 150
   height: 300
 mobile:
   show: true

💡可通过修改use的值来更换模型，预览地址https://huaji8.top/post/live2d-plugin-2.0/
⚠️更换模型前记得调用npm install --save live2d-widget-model-模型名字后，再重启hexo s

---

daoVoice在线聊天

效果图

注册daoVoice账号，地址daoVoice，邀请码5058b43a
创建完后会跳转到以下页面，公司名称随便填写即可

复制下面的app-id

打开next/layout/_partials/head.swig
在<meta name="theme-color" content="{{ theme.android_chrome_color }}">后添加下面代码

{% if theme.daovoice %}
   <script>
   (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName[o](0);a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
   daovoice('init', {
     app_id: "{{theme.daovoice_app_id}}"
   });
   daovoice('update');
   </script>
{% endif %}

在themes/next/_config.yml文件末添加下面代码

# Online contact
daovoice: true
daovoice_app_id: 5058b43a

重启hexo s

---

添加文章评论功能

效果图

注册来必力账号
注册地址：http://www.laibili.com.cn/
生成来uid，生成地址(https://www.livere.com/insight/myCode)[//www.livere.com/insight/myCode]

打开themes/next/_config.yml文件
查找livere_uid
将它的值改为你的uid
重启

---

文章末添加“本文结束标记”

效果图

在next/layout/_macro/下新建passage-end-tag.swig文件，代码如下

<div style="text-align:center;color: #ccc;font-size:14px;">-----------&emsp;本文结束<i class="fa fa-paw"></i>感谢您的阅读&emsp;-----------</div>

打开next/layout/_macro/post.swig文件，在代码

{#####################}
{### END POST BODY ###}
{#####################}

之后添加以下代码

{% if not is_index %}
  {% include 'passage-end-tag.swig' %}
{% endif %}

---

文末添加版权信息

效果图

在next/layout/_macro/下创建my-copyright.swig文件，代码如下

{% if page.copyright %}
<div class="my_post_copyright">
 <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

 <script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
 <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
 <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
 <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
 <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
   <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
 </p>
 <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="//creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
 var clipboard = new Clipboard('.fa-clipboard');
 $(".fa-clipboard").click(function(){
   clipboard.on('success', function(){
     swal({
       title: "",
       text: '复制成功',
       icon: "success",
       showConfirmButton: true
       });
    });
 });
</script>
{% endif %}

打开next/layout/_macro/post.swig文件，在代码

{% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
        {% include 'wechat-subscriber.swig' %}
    </div>
{% endif %}

之前添加以下代码

{% if not is_index %}
  {% include 'my-copyright.swig' %}
{% endif %}

在next/source/css/_common/components/post下创建my-copyright.styl文件，代码如下

{% if page.copyright %}
<div class="my_post_copyright">
 <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

 <script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
 <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
 <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
 <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
 <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
   <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
 </p>
 <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="//creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
 var clipboard = new Clipboard('.fa-clipboard');
 $(".fa-clipboard").click(function(){
   clipboard.on('success', function(){
     swal({
       title: "",
       text: '复制成功',
       icon: "success",
       showConfirmButton: true
       });
    });
 });
</script>
{% endif %}

打开next/source/csss/_common/components/post/post.styl文件，在文件末添加下面代码

@import "my-post-copyright"

在需要增加版权信息的博文中添加copyright: true即可

💡如果嫌每个markdown生成后都需要手动添加，十分麻烦的话。
💡可以打开/scaffolds/post.md，添加：

💡这样在你hexo new xxx的时候就会自动给新增的markdown添加copyright: true

---

文章末添加打赏功能

效果图

打开themes/next/_config.yml
查找reward:
将下面的enable的值改为true
并把你需要用到的打赏方式注释去掉，将图片路径更改为你的二维码图片路径

会发现打赏字体会出现闪动问题
打开next/source/css/_common/components/post/post-reward.styl将下面代码注释即可

/*
#QR > div:hover p {
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/

---

博客代码压缩

在博客根目输入下面代码

npm install `gulp -g`
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在博客根目录下创建gulpfile.js文件，并添加以下代码

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
   return gulp.src('./public/**/*.css')
       .pipe(minifycss())
       .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
 return gulp.src('./public/**/*.html')
   .pipe(htmlclean())
   .pipe(htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
   }))
   .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
   return gulp.src('./public/**/*.js')
       .pipe(uglify())
       .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
   'minify-html','minify-css','minify-js'
]);

执行hexo g && gulp，这样就会在打包博客代码后将代码压缩

假如你是新版的gulp需要将gulpfile.js文件的代码改为如下。

const {src, dest, parallel} = require('gulp');
const minifycss = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const htmlclean = require('gulp-htmlclean');

// 压缩 public 目录 css
function minifyCss() {
  return src('./public/**/*.css')
    .pipe(minifycss())
    .pipe(dest('./public'));
}

// 压缩 public 目录 html
function minifyHtml() {
  return src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
      removeComments: true, minifyJS: true, minifyCSS: true, minifyURLs: true,
    }))
    .pipe(dest('./public'))
}

// 压缩 public/js 目录 js
function minifyJsfunction() {
  return src('./public/**/*.js')
    .pipe(uglify())
    .pipe(dest('./public'));
}

exports.default = parallel(minifyCss, minifyHtml, minifyJsfunction);

---

• 参考文章

• http://www.shenzekun.cn/hexo的next主题个性化配置教程.html

• https://blog.csdn.net/qq_32454537/article/details/79482879

---