Hexo页脚跳动的心
编辑blog/themes/butterfly/layout/includes/footer.pug文件
将以下内容
1©${theme.footer.owner.since} - ${nowYear} By ${config.author}
改为
1©${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}
将以下内容
1©${nowYear} By ${config.author}
改为
1©${nowYear + ' '} <i id="he ...
Hexo禁用F12进入调试控制台和复制文章的内容
引言如果你不希望别人直接按下F12按键进入调试控制台或者复制文章的内容，那么本文章你肯定能用得上：）
操作步骤修改【/butterfly/layout/includes/layout.pug】，根据图中位置添加以下 pug 代码（跟 head、body同级）。
123456789101112131415161718script. ((function() {var callbacks = [],timeLimit = 50,open = false;setInterval(loop, 1);return {addListener: function(fn) {callbacks.push(fn);},cancleListenr: function(fn) {callbacks = callbacks.filter(function(v) {return v !== fn;});}} function loop() {var startTime = new Date();debugge ...
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 ...
