Hexo实现搜索功能（hexo-generator-search）
安装依赖前往博客根目录，打开cmd命令窗口执行npm install hexo-generator-search --save。
1npm install hexo-generator-search --save
注入配置修改站点配置文件_config.yml，添加如下代码：
12345search: path: search.xml field: post content: true template: ./search.xml
参数说明：
path - 文件路径，可以生成xml和json两种格式。默认情况下是search.xml。如果文件扩展名为.json，则输出格式将为 JSON。否则，将导出 XML 格式化文件。
field - 您要搜索的搜索范围，您可以选择：
post（默认） - 仅涵盖您博客的所有文章。
page - 将仅涵盖您博客的所有页面。
all - 将涵盖您博客的所有文章和页面。
content - 是否包含每篇文章的全部内容。如果为false，生成的结果仅涵盖标题和创建时间这些信息，没有文章的内容。默认情况下是：true
template（可选 ...
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>
重新部署，启动，就可以看到效果啦。
结语很好看的一个效果，请参考本页面的实际效果。
