本文主要介绍了两个主题:yilia、next上的设置，推荐使用next主题。

---

hexo的一些问题

配置博客目录

点击文章所有，查看不了所有目录，按照提示进行设置后

$ hexo d
ERROR Deployer not found: git

输入：npm install --save hexo-deployer-git 即可解决

添加文章摘要

需要显示得摘要部分
<!-- more -->
被隐藏部分

添加点击小红心特效

• 在themes/yilia/source文件目录下添加love.js文件

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

• themes/yilia/layout/_partial/footer.ejs文件的最后， 添加以下代码：

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

---

---

配置next主题

以下部分参考Hexo-NexT配置超炫网页效果

安装及配置next主题

通过git安装:git clone https://github.com/iissnan/hexo-theme-next themes/next
在hexo根文件夹下，编辑_config.yml文件,更换themes为next

设置中文页面

language: zh-Hans

设置menu

设置前

• 编辑themes/next/_config.yml 找到menu进行编辑（去除#号）

需要注意的是在去除#号后，bin目录下的source文件如果没有相对应得文件需要创建
使用hexo new page "tags"创建
同时需要修改生成的md文件，加入type: “tags”

设置后

设置动态背景

• 使背景出现随鼠标移动的结构
• 主题配置文件中找到canvas_nest，设置成ture(结构)就OK啦。

左上角图标设置

• 进入GitHub Corners选择自己喜欢的样式复制代码。
• 将刚刚复制的挂饰代码，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下图所示
  
  注意：设置自己的GitHub地址

修改文章内链接文本样式

• 修改Blog/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; //底部分割线颜色}
}

修改底部标签样式

• 修改themes\next\layout_macro\post.swig中文件，command+f搜索rel=“tag”>#，将#替换成<i class="fa fa-tag"></i>。
  未能体现…待续

文章末尾添加“文章结束”

• 在路径themes\next\layout_macro文件夹中新建passage-end-tag.swig文件。并添加如下代码

<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-hand-o-right"></i>感谢您的阅读-------------</div>{% endif %}
</div>

注意：创建的文件需使用命令touch passage-end-tag.swig，不能直接创建

其中图标可从Font Awesome选择

• 打开themes\next\layout_macro\post.swig
• 在下图位置添加以下代码

    <div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}</div>

主页文章添加阴影效果

• 打开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);}

动态头像

• 首先设置头像
• 打开themes/next/下的_config.yml，查找avatar,设置图片地址
  
• 设置头像圆角并旋转，打开themes/next/source/css/_common/components/sidebar/sidebar-author.styl,添加以下代码：

.site-author-image {display: block;margin: 0 auto;padding: $site-author-image-padding;max-width: $site-author-image-width;height: $site-author-image-height;border: $site-author-image-border-width solid $site-author-image-border-color;/* 头像圆形 */border-radius: 80px;-webkit-border-radius: 80px;-moz-border-radius: 80px;box-shadow: inset 0 -1px 0 #333sf;/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*//* 鼠标经过头像旋转360度 */-webkit-transition: -webkit-transform 1.0s ease-out;-moz-transition: -moz-transform 1.0s ease-out;transition: transform 1.0s ease-out;
}
img:hover {/* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused;animation-play-state:paused;*//* 鼠标经过头像旋转360度 */-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg);}100% {-webkit-transform: rotateZ(-360deg);}
}
@-moz-keyframes play {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(-360deg);}
}
@keyframes play {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}
}

底部加上访问量

• next主题集成了不蒜子计数
• 直接修改主题配置文件
  
  注意:由于不蒜子更换了域名，需要themes\next\layout_third-party\analytics\busuanzi-counter.swig修改新的域名

新的域名"https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

底部统计字数

• 在themes/next/layout/_partials/footer.swig末尾添加

<div class="theme-info"><div class="powered-by"></div><span class="post-count">|  博客全站共{{ totalcount(site) }}字</span>
</div>

自带的统计字体插件

• 直接修改主题配置文件
  

不需要自行添加代码

添加网页顶部进度加载条

• 直接修改主题配置文件
  

注释配置

<!-- -->

点击爆炸特效

类似小红心特效

• 在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\source\css\ _variables\base.styl文件，将$font-size-base改成16px

修改图标

• 在图标网站找一张你喜欢的图标（大：32x32小：16x16）,图标网站:阿里云,easyicon
• 将下载下来的小图和中图放在themes/next/source/images
• 修改主题配置文件，如果你自定义了图片名字，需要做修改
  

修改背景图

• 修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

//背景图片
body {background:url(https://source.unsplash.com/random/1600x900);background-repeat: no-repeat;   //不重复出现background-attachment:fixed;    //滚动设置background-position:50% 50%;    //图片位置
}
//不透明度的修改
.main-inner { margin-top: 60px;padding: 60px 60px 60px 60px;background: #fff;opacity: 0.8;     //不透明度min-height: 500px;
}

• 图片来源Unsplash

hexo增加评论功能

• 使用的是来必云，首先去来必云注册账号，在管理页面选择city版本进行设置。
• 将的得到的data-uid后的双引号部分复制到主题配置文件下的
  

侧边栏显示时机

• 在主题配置文件中搜索post进行修改

图片查看设置

• 打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true
• 进入到theme/text/文件夹下，打开git bash
• git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

文章末尾添加版权信息

• 查找主题配置文件themes/next/_config.yml中的

近期文章板块

• 在next/layout/_macro/sidebar.swig中的if theme.links对应的endif后面添加如下代码：

{% if theme.recent_posts %}<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}"><div class="links-of-blogroll-title"><!-- modify icon to fire by szw --><i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>{{ theme.recent_posts_title }}</div><ul class="links-of-blogroll-list">{% set posts = site.posts.sort('-date') %}{% for post in posts.slice('0', '5') %}<li><a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a></li>{% endfor %}</ul></div>
{% endif %}

• 在主题的_config.yml中添加了几个变量

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

侧边栏社交链接

腾讯公益404页面

• 新建 404.html 页面，放到主题的 source 目录下，内容如下：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=utf-8;"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="robots" content="all" /><meta name="robots" content="index,follow"/><link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body><script type="text/plain" src="http://www.qq.com/404/search_children.js"charset="utf-8" homePageUrl="/"homePageName="回到我的主页"></script><script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script><script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

注:博客需要绑定域名才能正常显示哦

回到顶部显示百分比

• 主题配置文件中的设置为true
  

添加宠物

• 获取:npm install --save hexo-helper-live2d
• 选择:预览查看,选择自己喜欢的类型：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

• 安装:例如npm install live2d-widget-model-miku
• 配置:在blog目录下的配置文件中，添加如下配置:

live2d:enable: truescriptFrom: localmodel:use: live2d-widget-model-mikudisplay:position: rightwidth: 150height: 300mobile:show: true
```---
title: hexo next主题设置
time: 2019-07-23
tig:
tags:
- Hexo
- 主题
categories:
- Thinking
---
**本文主要介绍了两个主题:yilia、next上的设置，推荐使用next主题。**
<!-- more -->
****
# hexo的一些问题
## 配置博客目录
点击文章所有，查看不了所有目录，按照提示进行设置后
```shell
$ hexo d
ERROR Deployer not found: git

输入：npm install --save hexo-deployer-git 即可解决

添加文章摘要

需要显示得摘要部分
<!-- more -->
被隐藏部分

添加点击小红心特效

• 在themes/yilia/source文件目录下添加love.js文件

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

• themes/yilia/layout/_partial/footer.ejs文件的最后， 添加以下代码：

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

---

---

配置next主题

以下部分参考Hexo-NexT配置超炫网页效果

安装及配置next主题

通过git安装:git clone https://github.com/iissnan/hexo-theme-next themes/next
在hexo根文件夹下，编辑_config.yml文件,更换themes为next

设置中文页面

language: zh-Hans

设置menu

设置前

• 编辑themes/next/_config.yml 找到menu进行编辑（去除#号）

需要注意的是在去除#号后，bin目录下的source文件如果没有相对应得文件需要创建
使用hexo new page "tags"创建
同时需要修改生成的md文件，加入type: “tags”

设置后

设置动态背景

• 使背景出现随鼠标移动的结构
• 主题配置文件中找到canvas_nest，设置成ture(结构)就OK啦。

左上角图标设置

• 进入GitHub Corners选择自己喜欢的样式复制代码。
• 将刚刚复制的挂饰代码，添加到Blog/themes/next/layout/_layout.swig文件中，添加位置如下图所示
  
  注意：设置自己的GitHub地址

修改文章内链接文本样式

• 修改Blog/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; //底部分割线颜色}
}

修改底部标签样式

• 修改themes\next\layout_macro\post.swig中文件，command+f搜索rel=“tag”>#，将#替换成<i class="fa fa-tag"></i>。
  未能体现…待续

文章末尾添加“文章结束”

• 在路径themes\next\layout_macro文件夹中新建passage-end-tag.swig文件。并添加如下代码

<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-hand-o-right"></i>感谢您的阅读-------------</div>{% endif %}
</div>

注意：创建的文件需使用命令touch passage-end-tag.swig，不能直接创建

其中图标可从Font Awesome选择

• 打开themes\next\layout_macro\post.swig
• 在下图位置添加以下代码

    <div>{% if not is_index %}{% include 'passage-end-tag.swig' %}{% endif %}</div>

主页文章添加阴影效果

• 打开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);}

动态头像

• 首先设置头像
• 打开themes/next/下的_config.yml，查找avatar,设置图片地址
  
• 设置头像圆角并旋转，打开themes/next/source/css/_common/components/sidebar/sidebar-author.styl,添加以下代码：

.site-author-image {display: block;margin: 0 auto;padding: $site-author-image-padding;max-width: $site-author-image-width;height: $site-author-image-height;border: $site-author-image-border-width solid $site-author-image-border-color;/* 头像圆形 */border-radius: 80px;-webkit-border-radius: 80px;-moz-border-radius: 80px;box-shadow: inset 0 -1px 0 #333sf;/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*//* 鼠标经过头像旋转360度 */-webkit-transition: -webkit-transform 1.0s ease-out;-moz-transition: -moz-transform 1.0s ease-out;transition: transform 1.0s ease-out;
}
img:hover {/* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused;animation-play-state:paused;*//* 鼠标经过头像旋转360度 */-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg);}100% {-webkit-transform: rotateZ(-360deg);}
}
@-moz-keyframes play {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(-360deg);}
}
@keyframes play {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}
}

底部加上访问量

• next主题集成了不蒜子计数
• 直接修改主题配置文件
  
  注意:由于不蒜子更换了域名，需要themes\next\layout_third-party\analytics\busuanzi-counter.swig修改新的域名

新的域名"https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"

底部统计字数

• 在themes/next/layout/_partials/footer.swig末尾添加

<div class="theme-info"><div class="powered-by"></div><span class="post-count">|  博客全站共{{ totalcount(site) }}字</span>
</div>

自带的统计字体插件

• 直接修改主题配置文件
  

不需要自行添加代码

添加网页顶部进度加载条

• 直接修改主题配置文件
  

注释配置

<!-- -->

点击爆炸特效

类似小红心特效

• 在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\source\css\ _variables\base.styl文件，将$font-size-base改成16px

修改图标

• 在图标网站找一张你喜欢的图标（大：32x32小：16x16）,图标网站:阿里云,easyicon
• 将下载下来的小图和中图放在themes/next/source/images
• 修改主题配置文件，如果你自定义了图片名字，需要做修改
  

修改背景图

• 修改themes\next\source\css\ _custom\custom.styl文件，这个是Next故意留给用户自己个性化定制一些样式的文件，添加以下代码：

//背景图片
body {background:url(https://source.unsplash.com/random/1600x900);background-repeat: no-repeat;   //不重复出现background-attachment:fixed;    //滚动设置background-position:50% 50%;    //图片位置
}
//不透明度的修改
.main-inner { margin-top: 60px;padding: 60px 60px 60px 60px;background: #fff;opacity: 0.8;     //不透明度min-height: 500px;
}

• 图片来源Unsplash

hexo增加评论功能

• 使用的是来必云，首先去来必云注册账号，在管理页面选择city版本进行设置。
• 将的得到的data-uid后的双引号部分复制到主题配置文件下的
  

侧边栏显示时机

• 在主题配置文件中搜索post进行修改

图片查看设置

• 打开站点配置文件_config.yml，搜索fancybox字段，设置其值为true
• 进入到theme/text/文件夹下，打开git bash
• git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox

文章末尾添加版权信息

• 查找主题配置文件themes/next/_config.yml中的

近期文章板块

• 在next/layout/_macro/sidebar.swig中的if theme.links对应的endif后面添加如下代码：

{% if theme.recent_posts %}<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}"><div class="links-of-blogroll-title"><!-- modify icon to fire by szw --><i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>{{ theme.recent_posts_title }}</div><ul class="links-of-blogroll-list">{% set posts = site.posts.sort('-date') %}{% for post in posts.slice('0', '5') %}<li><a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a></li>{% endfor %}</ul></div>
{% endif %}

• 在主题的_config.yml中添加了几个变量

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

侧边栏社交链接

腾讯公益404页面

• 新建 404.html 页面，放到主题的 source 目录下，内容如下：

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=utf-8;"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="robots" content="all" /><meta name="robots" content="index,follow"/><link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body><script type="text/plain" src="http://www.qq.com/404/search_children.js"charset="utf-8" homePageUrl="/"homePageName="回到我的主页"></script><script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script><script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

注:博客需要绑定域名才能正常显示哦

回到顶部显示百分比

• 主题配置文件中的设置为true
  

添加宠物

• 获取:npm install --save hexo-helper-live2d
• 选择:预览查看,选择自己喜欢的类型：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

• 安装:例如npm install live2d-widget-model-miku
• 配置:在blog目录下的配置文件中，添加如下配置:

live2d:enable: truescriptFrom: localmodel:use: live2d-widget-model-mikudisplay:position: rightwidth: 150height: 300mobile:show: true

hexo 炫酷主题配置相关推荐

1. 【rmzt：保时捷911炫酷主题】

   保时捷911炫酷主题电脑桌面图片 系统:电脑桌面壁纸,Win2003,WinXP 大小:2.41 MB 主题简介       保时捷,是一款出产非常多的跑车及炫丽豪车的品牌,虽说法拉利,布加迪威龙是大 ...

2. Hexo的Next主题配置

   使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/theme/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新 ...

3. 从零开始的hexo与next主题配置github.io博客（入门篇）

   新建GitHub仓库名为<username>.github.io. 安装Node.js及Git. 安装hexo: npm install -g hexo-cli 切换到要保存hexo博客的 ...

4. idea炫酷主题推荐（本人自用）

   一.IDEA简介 IDEA 全称 IntelliJ IDEA,是java编程语言的集成开发环境.IntelliJ在业界被公认为最好的Java开发工具,尤其在智能代码助手.代码自动提示.重构.JavaE ...

5. Hexo+next主题配置踩的坑

   Hexo+next主题配置踩的坑 下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...

6. hexo的next主题的最新优化_2

   前言 在hexo的next主题的最新优化_1中介绍了一些简单点的操作,希望对你们有所帮助,如果实在看不懂,可以扫一扫文章最后的QQ群二维码,有什么问题可以私聊我呦!好的废话就不多说了.我们开始吧! 主 ...

7. hexo的next主题个性化教程 打造炫酷网站

   看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下30种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...

8. hexo的next主题个性化教程:打造炫酷网站

   转自 https://www.jianshu.com/p/f054333ac9e6 看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在 ...

9. IDEA优化配置（6）--- 炫酷的主题字体颜色设置（基于Intellij IDEA 2018）

   Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...

10. IDEA主题配置--- 炫酷的主题字体颜色设置（基于Intellij IDEA 2018）

    Intellij IDEA 2018/2019 优化配置.使用技巧.参数设置.快捷键汇总帖 IDEA 炫酷的主题字体颜色设置(基于IDEA 2018) 前言: IDEA中主题可以更换,大家可以直接到 ...

最新文章

1. Python 之父立 Flag：明年要把 Python 速度提高 2 倍！
2. 一个云主机绑定多个域名
3. Burp Suite入门笔记
4. C/C++ 中生成特定范围内的随机数
5. JavaScript实现完整的ComplexNumber复数类（附完整源码）
6. linux中的shell脚本case,【shell】Linux shell 之 case 详解
7. java.nio教程_Java NIO系列教程（三） Buffer
8. 贾跃亭的乐视股票要被拍卖了，每股2.51元起拍
9. 使用Word2010直接编辑、发布博客→博客园cnblogs
10. 企业如何提升数据质量
11. 如何使用预览在 Mac 上将 HEIC 文件更改为 JPEG
12. windows下如何制作和应用数字签名证书 全流程
13. 记录前端通过XShell和xftp发布版本
14. 软件配置一套键鼠控制两台电脑
15. 10.认证服务，单点登录
16. MyExcel.net 使用手册
17. 空间，线性空间，赋范空间，内积空间和希尔伯特空间的区别
18. 漏斗模型_绘制漏斗图
19. APC不间断电源说明书
20. Davinci的异构多核间通信基础组件SysLink 2.0

热门文章

1. 100多套毕业论文答辩PPT模板百度网盘链接
2. 退役前的做题记录3.0
3. 晶振-电路中的心脏起搏器
4. 计算机图学与工业设计,工业设计和工程制图的关系
5. VC2005运行库文件
6. python webqq机器人_使用Python的Tornado框架实现一个简单的WebQQ机器人
7. 超星高级语言程序设计实验作业 (实验02 分支与循环程序设计)（一）
8. 【信息安全导论】HIT2022春季学期《信息安全导论》复习概要
9. Win10禁用驱动程序强制签名方法
10. kali linux安装谷歌拼音输入法（亲测可用）