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卡通人物

安装hexo-helper-live2d

npm install --save hexo-helper-live2d

安装live2d

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

npm install live2d-widget-model-wanko

配置

在站点配置文件_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-Next 花式配置相关推荐

Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
Hexo的个性化配置(二)
Hexo的个性化配置(二) 接上一篇的Hexo的个性化配置,都是一些提高网站个性化的配置,只是搭建一个简单的Hexo的网站的话,查看Hexo的使用就行.可能写的比较啰嗦,详细还是很详细的,也是自己就出 ...
Hexo bamboo主题配置
Hexo bamboo主题配置本文内容出自 yuang01 如需了解更多可查看 https://hexo-theme-bamboo.netlify.app/ Front-matter(文章)配置配 ...
Hexo博客配置笔记
安装Hexo npm install hexo-cli -g cd /blog hexo init 安装next主题 git clone https://github.com/iissnan/hexo ...
Hexo+icarus主题配置
下载icarus主题飞鱼的博客进入博客主目录,点击鼠标右键Git Bash Here,进入命令行界面输入: git clone https://github.com/ppoffice/hexo- ...
hexo的安装配置以及主题更换保姆级教程
目录 1.首先是本地安装个配置hexo 2.进入你需要创建hexo的文件夹中,打开终端配置hexo项目文件夹注意:更换主题重点了解themes这个主题文件夹. 3.新建文章及预览 4.更换主题环节 ...
Hexo博客配置SSL证书
Hexo不必转换成静态网页再交给比如Nginx,tomcat这样的工具发布网站,内置了一个服务器.但是默认情况下是不带SSL证书的. 效果展示以下三个服务器都是使用Hexo提供网页服务的. 基本步骤 ...
Hexo博客配置优化
我的博客原文地址欢迎访问我的博客 Hexo 文档创建hexo分支为了实现能在更换环境(比如更换电脑)的情况下我们仍然能发布博客,我们创建一个hexo分支用来存放hexo的文件. $ git ch ...
Hexo 个性化主题配置
接上文:基于 Hexo + GitHub 的个人博客搭建,这篇是写配置 next 个性化主题的. 只记录自己使用的一些配置,不定期更新. 有两个 _config.yml 文件,根目录的是站点配置文件, ...

Hexo-Next 花式配置

Hexo-Next 花式配置

近期文章（侧边栏）

粒子时钟

Hexo博客添加live2d卡通人物

Hexo-Next 花式配置相关推荐

最新文章

热门文章