【Hexo

admin 管理员组

文章数量: 1086019

【Hexo

💻【Hexo-Next】主题基础配置篇(一) 🏠专栏：Hexo-Next 主题
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

• 【Hexo-Next】主题的配置
• • 一. 近期文章（侧边栏）
  • 二. 粒子时钟
  • 三. Hexo博客添加live2d卡通人物

【Hexo-Next】主题的配置

一. 近期文章（侧边栏）

• 首先，在根目录下的.\source新建 _data\sidebar.njk 文件，并把下面的代码放到 sidebar.njk 中

{% 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').toArray() %}{% 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 %}

• 然后在主题配置文件 next.yml 中，找到 custom_file_path ，取消 sidebar 的注释

 #sidebar: source/_data/sidebar.njk

• 最后，在主题配置文件 next.yml 中添加了几个变量，如下：

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

效果预览：

二. 粒子时钟

• 首先，在.\themes\next\layout新建一个clock.swig文件，并在带文件里加入以下代码：

<div style=""><canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>(function(){var digit=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],//0[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],//1[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],//2[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//3[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],//4[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//5[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//6[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],//7[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//8[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],//9[[0,0,0,0,0,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,0,0,0],[0,0,0,0,0,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,0,0,0]]//:];var canvas = document.getElementById('canvas');if(canvas.getContext){var cxt = canvas.getContext('2d');//声明canvas的宽高var H = 100,W = 700;canvas.height = H;canvas.width = W;cxt.fillStyle = '#f00';cxt.fillRect(10,10,50,50);//存储时间数据var data = [];//存储运动的小球var balls = [];//设置粒子半径var R = canvas.height/20-1;(function(){var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());//存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);})();/*生成点阵数字*/function renderDigit(index,num){for(var i = 0; i < digit[num].length; i++){for(var j = 0; j < digit[num][i].length; j++){if(digit[num][i][j] == 1){cxt.beginPath();cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);cxt.closePath();cxt.fill();}}}}/*更新时钟*/function updateDigitTime(){var changeNumArray = [];var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());var NewData = [];NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);for(var i = data.length-1; i >=0 ; i--){//时间发生变化if(NewData[i] !== data[i]){//将变化的数字值和在data数组中的索引存储在changeNumArray数组中changeNumArray.push(i+'_'+(Number(data[i])+1)%10);}}//增加小球for(var i = 0; i< changeNumArray.length; i++){addBalls.apply(this,changeNumArray[i].split('_'));}data = NewData.concat();}/*更新小球状态*/function updateBalls(){for(var i = 0; i < balls.length; i++){balls[i].stepY += balls[i].disY;balls[i].x += balls[i].stepX;balls[i].y += balls[i].stepY;if(balls[i].x > W + R || balls[i].y > H + R){balls.splice(i,1);i--;}}}/*增加要运动的小球*/function addBalls(index,num){var numArray = [1,2,3];var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];for(var i = 0; i < digit[num].length; i++){for(var j = 0; j < digit[num][i].length; j++){if(digit[num][i][j] == 1){var ball = {x:14*(R+2)*index + j*2*(R+1)+(R+1),y:i*2*(R+1)+(R+1),stepX:Math.floor(Math.random() * 4 -2),stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],color:colorArray[Math.floor(Math.random()*colorArray.length)],disY:1};balls.push(ball);}}}}/*渲染*/function render(){//重置画布宽度，达到清空画布的效果canvas.height = 100;//渲染时钟for(var i = 0; i < data.length; i++){renderDigit(i,data[i]);}//渲染小球for(var i = 0; i < balls.length; i++){cxt.beginPath();cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);cxt.fillStyle = balls[i].color;cxt.closePath();cxt.fill();}}clearInterval(oTimer);var oTimer = setInterval(function(){//更新时钟updateDigitTime();//更新小球状态updateBalls();//渲染render();},50);}})();
</script>

然后，打开 .\theme\next\layout\_macro\sidebar.njk，修改代码如下：

{%- if theme.back2top.enable and theme.back2top.sidebar %}<div class="back-to-top motion-element"><i class="fa fa-arrow-up"></i><span>0%</span></div>{%- endif %}+     {% include '../clock.swig' %}</div></aside><div id="sidebar-dimmer"></div>{% endmacro %}

效果图：

三. Hexo博客添加live2d卡通人物

1. 安装hexo-helper-live2d

npm install --save hexo-helper-live2d

2. 安装live2d

有官方提供了许多的模型供你选择（我选择的是live2d-widget-model-wanko）

npm install live2d-widget-model-wanko

3. 配置

在站点配置文件_config.yml，添加如下代码：

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falselog: falsemodel:use: live2d-widget-model-wankodisplay:position: rightwidth: 150height: 300mobile:show: truereact:opacity: 0.7

最后，重新hexo d -g即可看到效果

当然如果你装了之后想卸载，可以在你的hexo博客根目录下执行下面代码：

npm uninstall hexo-helper-live2d -g

其他模型名称：

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

live2d-widget-model-wanko的效果图：

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

本文标签： Hexo