竹山一叶

编辑blog/themes/butterfly/layout/includes/footer.pug文件 将以下内容 1&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author} 改为 1&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author} 将以下内容 1&copy;${nowYear} By ${config.author} 改为 1&copy;${nowYear + ' '} <i...

引言如果你不希望别人直接按下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...

安装依赖前往博客根目录，打开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 -...

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

操作步骤在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 ...

前言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> #...

前言本文将介绍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 =...

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

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

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