竹山一叶

引言如果想实现随便逛逛的功能，就需要用到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中 ...

操作步骤在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博客的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增加雪花动态背景效果。 操作操作过程很简单，找到主题配置文件_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 ...

前言本文将介绍如何在侧边栏增添头像卡片动态背景。 操作在\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 ...

前言本文将介绍如何增添水波荡漾效果。 操作在\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 ...

前言本文将介绍如何美化页脚，效果展示在最底部。 操作在\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 ...

前言效果如本站所示，我看过一些博客，有很多一部分都有这个动线效果背景。 操作操作步骤很简单，只需在_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 ...

前言本文将介绍如何增添上升气泡效果。 操作找到主题配置文件_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> 重新部署，启动，就可以看到效果啦。 结语很好看的一个效果，请参考本页面的实际效果。

前言在不妨碍正常阅读的情况下想更好地展示背景或者一些效果，实现文章页透明是一种不错的选择。 操作步骤在\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 ...