Hexo实现随便逛逛
引言如果想实现随便逛逛的功能,就需要用到hexo-generator-random这个插件。
插件源码访问地址:https://github.com/Drew233/hexo-generator-random/
插件说明hexo-generator-random是一款hexo插件,作用是生成一个random.html,随即跳转到博客下所有文章中的一篇。
在public文件夹中生成一个random.html,访问yoursite/random即可随即跳转一篇文章。
操作步骤安装依赖本插件用到的依赖如下:
minimatch
path
fs
object-assign 上面四个依赖,前三个一般hexo init之后都会有,但是第四个一般都没有
1npm install object-assign
本地安装把hexo-generator-random仓库的内容git clone或download到本地,然后把保存到本地的文件夹放在../blog/node_modules文件夹中
然后,在博客根目录下的package.json里面的dependencies中 ...
Hexo自定义右键菜单
操作步骤在butterfly主题目录/layout/includes文件夹下新建一个right-menu的文件夹,在此文件夹下新建一个index.pug文件。将以下代码复制到index.pug文件中。
12345678910111213141516171819202122232425262728293031#rightMenu .rightMenu-group.rightMenu-small .rightMenu-item#menu-backward i.fa-solid.fa-arrow-left .rightMenu-item#menu-forward i.fa-solid.fa-arrow-right .rightMenu-item#menu-refresh i.fa-solid.fa-arrow-rotate-right .rightMenu-item#menu-home i.fa-solid.fa-house .right ...
Hexo增加樱花动态背景效果
前言Hexo博客的Sakura主题自带的樱花🌸动态效果非常漂亮,本文来介绍Hexo增加樱花动态背景效果。
操作只需在_config.butterfly.yml文件中,找到inject,在bottom处直接引入:https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/sakura.js
1- <script src="https://cdn.jsdelivr.net/gh/lete114/CDN/Sum/sakura.js"></script> # 樱花动效
之后重新部署,就可以看到漫天🌸🌸🌸🌸
上面的链接已经没了。这里推荐下面的js代码。
在\themes\butterfly\source\js路径下创建一个sakura.js文件,在文件中添加如下代码:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 ...
Hexo增加雪花动态背景效果
前言本文将介绍Hexo增加雪花动态背景效果。
操作操作过程很简单,找到主题配置文件_config.butterfly.yml,在inject的bottom引入以下js文件:
123456inject: head: bottom: - <div><canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none"></canvas></div> - <script>const notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows ...
Hexo增加头像卡片动态背景
前言本文将介绍如何在侧边栏增添头像卡片动态背景。
操作在\themes\butterfly\source\css目录下创建一个css文件,将如下代码写入该文件(有两种效果,选其一):
123456789/* 效果一:彩带 */.card-info-avatar:hover { background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);}/* 效果二:花 */.card-info-avatar:hover { background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);}
找到主题配置文件_config.butterfly.yml,在inject的head处引入该css文件:
123inject: head: - <link rel="stylesheet&q ...
Hexo增加水波荡漾的效果
前言本文将介绍如何增添水波荡漾效果。
操作在\themes\butterfly\source\js目录下创建一个ripples.js文件,并将如下代码写入该文件
1234567891011$(document).ready(function () { try { $("#page-header").ripples({ resolution: 512, dropRadius: 10, //px perturbance: 0.04, }); } catch (e) { $(".error").show().text(e); }});
找到主题配置文件_config.butterfly.yml,在inject的bottom处引入以下文件:
开启 pjax123456inject: head: bottom: - <script defer src="https://rmt.dogedoge.c ...
Hexo页脚美化
前言本文将介绍如何美化页脚,效果展示在最底部。
操作在\themes\butterfly\source\js目录下创建一个js文件,将如下代码写入该文件:
12345678910111213141516171819202122232425262728// 动态心跳$(document).ready(function(e) { $('.copyright').html('©2021 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 竹山一叶');})$(document).ready(function(e) { show_date_time();})//本站运行时间function show_date_time() {$('.framework-info').html('本站已运行<span id ...
Hexo增加动态线条效果背景
前言效果如本站所示,我看过一些博客,有很多一部分都有这个动线效果背景。
操作操作步骤很简单,只需在_config.butterfly.yml文件中,找到inject,在bottom处直接引入:https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js
1- <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script> # 背景动态线条
或者直接修改_config.butterfly.yml配置文件中的canvas_nest配置
123456789# canvas_nest# https://github.com/hustcc/canvas-nest.jscanvas_nest: enable: true color: '0,0,255' #color of lines, default: '0,0,0'; RGB va ...
Hexo增加上升气泡效果
前言本文将介绍如何增添上升气泡效果。
操作找到主题配置文件_config.butterfly.yml,在inject的bottom处引入以下文件:
1234inject: head: bottom: - <script defer src="https://cdn.jsdelivr.net/combine/npm/jquery@latest/dist/jquery.min.js,gh/weilining/jsdelivr/jquery/circlemagic/circlemagic.min.js,gh/weilining/jsdelivr@latest/jquery/circlemagic/butterflycirclemagic.js"></script>
重新部署,启动,就可以看到效果啦。
结语很好看的一个效果,请参考本页面的实际效果。
Hexo文章页面透明效果
前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果,实现文章页透明是一种不错的选择。
操作步骤在\themes\butterfly\source\css路径下创建一个xxx.css文件,在文件中添加如下代码:
123456789/* 首页文章栏背景透明 */#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post { background: var(--light_bg_color)}/* 侧边栏透明 */#aside-content .card-widget { background: var(--light_bg_color)}
然后将该文件引入到_config.butterfly.yml文件中inject的head处:
1- <link rel=&quo ...