hexo配置NexT主题
本文最后更新于:1 分钟前
前言
这篇文章就不介绍如何去搭建hexo了
只说如何配置hexo的NexT主题
开发环境:macOS
hexo:v3.8.0
NexT:v6.6.0
更换主题
克隆主题
cd
到你的hexo文件下面,输入下面命令克隆NexT皮肤代码到本地
1 |
|
切换主题
打开站点配置文件 _config.yml
查找theme:
将其后面的参数改为
next
后保存
更新主题
1 |
|
配置网站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
效果图
打开
themes/next/layout/_layout.swig
文件
将刚刚复制的代码放到<div class="headband"></div>
下面
并且将href
改为你自己的地址
实现动态背景
效果图
打开终端
1
2
3
4
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
,代码如下
1
2
3
!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
末尾添加以下代码
1
2
3
4
5
# love.js
love_js: true
在next/layout/_layout.swig
的</body>
前面添加以下代码
1
2
3
4
5
{% if theme.love_js %}
<script type="text/javascript" src="/js/src/love.js"></script>
{% endif %}
实现点击大爆炸效果
效果图
在
next/source/js/
新建文件fireworks.js
,代码如下
1
2
3
"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
末尾添加以下代码
1
2
3
4
5
# fireworks.js
fireworks_js: true
在next/layout/_layout.swig
的</body>
前面添加以下代码
1
2
3
4
5
6
7
{% 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 %}
实现顶部加载进度条
效果图
打开终端
1
2
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
打开站点配置文件,添加下面的代码
1 |
|
⚠️假如没法出现效果可尝试执行以下命令
1 |
|
添加侧边栏社交联系方式
效果图
打开
themes/next/_config.yml
文件
查找soical:
将相应注释去掉,并将对应的值改为你的社交链接
添加侧边栏推荐阅读
效果图
打开
themes/next/_config.yml
文件
查找links_title:
按下面进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 图标
links_icon: link
# 标题
links_title: 推荐阅读
# 显示方式
# links_layout: block
links_layout: inline
# 链接
# 格式为【名称: 链接】
links:
掘金: <http://juejin.im>
张鑫旭: <https://www.zhangxinxu.com/>
慕课网: <http://imooc.com>
添加萌妹
效果图
打开终端,输入下面代码安装依赖
1
npm install --save hexo-helper-live2d
输入下面代码安装模型
1
2
3
npm install --save live2d-widget-model-shizuku
在站点配置文件末
文件末添加下面代码,重启hexo s
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 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 }}">
后添加下面代码
1
2
3
4
5
6
7
8
9
10
11
{% 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
文件末添加下面代码
1
2
3
# 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
文件,代码如下
1 |
|
打开
next/layout/_macro/post.swig
文件,在代码
1 |
|
之后添加以下代码
1 |
|
文末添加版权信息
效果图
在
next/layout/_macro/
下创建my-copyright.swig
文件,代码如下
打开next/layout/_macro/post.swig
文件,在代码
1 |
|
之前添加以下代码
1 |
|
在
next/source/css/_common/components/post
下创建my-copyright.styl
文件,代码如下
打开next/source/csss/_common/components/post/post.styl
文件,在文件末添加下面代码
1 |
|
在需要增加版权信息的博文中添加
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
将下面代码注释即可
1 |
|
博客代码压缩
在博客根目输入下面代码
1
2
3
4
npm install `gulp -g`
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
在博客根目录下创建gulpfile.js
文件,并添加以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
文件的代码改为如下。
1 |
|
- 参考文章
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!