博客魔改内容（一） | jianerssr的个人小屋

type

status

date

slug

summary

添加fps显示

来源：博客魔改日记(3) 参考：博客魔改教程总结（四）

在主题配置文件_config.butterfly.yml中找到inject项，插入代码。

在/source/css文件夹下新建fps.css，插入代码。

在/source/js文件夹下新建fps.js，插入代码。

文章统计功能

来源：Hexo博客文章统计图

新建charts页面（已删除，改到about页面去了）

引入ECharts.js

有两种引入方式。一种是全局引用，即在_config.butterfly.yml的inject中引入echarts.js文件。

另一种为页面引入，即在需要引入文章统计图的页面中插入echarts.js文件。例如，可在/source/charts/index.md中添加以下内容。

本博客采用第一种方法。

文章统计代码

在/themes/butterfly/scripts/helpers目录下新建charts.js文件，然后添加下述内容：

更多属性见官方文档，可根据自行喜好对 ECharts 统计图进行修改。但不好意思，看不懂。只粘贴了现有的。

在建立的charts页面使用统计图（已改到about页面）

其中：

posts-chart的data-start="2023-01"属性表示文章发布时间统计图仅显示2023年1月及以后的文章数据。

tags-chart的data-length="10"属性表示仅显示排名前10的标签。

categories-chart的data-parent="true"属性表示有子分类时以旭日图显示分类，其他无子分类或设置为false或不设置该属性或设置为其他非true属性情况都以饼状图显示分类。

在其他页面使用统计图

本博客暂未引用，详见Hexo博客文章统计图。

随机访问一篇文章

来源：随机访问一篇文章的实现

功能主要基于baidusitemap插件实现。

在主题配置文件_config.butterfly.yml中找到inject项，插入代码。

在/source/js文件夹下新建randompost.js，插入代码。

在主题配置文件_config.butterfly.yml中增加导航按钮即可。

网站标题提示

来源：博客魔改教程总结（五）

在主题配置文件_config.butterfly.yml中找到inject项，插入代码。

在/source/js文件夹下新建title.js，插入代码。

加载动画

来源：Heo同款loading动画

打开/themes/butterfly/layout/includes/loading/fullpage-loading.pug文件。

原代码为：

删去，改为：

打开/themes/butterfly/layout/includes/loading/index.pug文件。

原代码为：

删去，改为：

在/source/css中新建progress_bar.css文件，这是加载图片上方胶囊的样式。

打开/themes/butterfly/source/css/_layout/loading.styl文件。

原代码为:

删去，改为以下代码。代码中背景颜色修改。

在/source/css/custom.css中新增代码，其中background中的url用于设置加载图片。

在主题配置文件_config.butterfly.yml中找到inject项，插入代码。

在主题配置文件_config.butterfly.yml中找到preloader项。

其中source: 1为满屏加载但加载图片上方无胶囊动画，source: 2为有胶囊但无满屏动画，source: 3为两者皆有。

首页文章置顶滚动轮播

来源：Swiper Bar

在站点配置文件_config.yml中添加下述代码。

使用方法

在文章front_matter中添加swiper_index: 1即可，其中swiper_index:后的数字为非负整数，代表置顶轮播图顺序，数字越大越靠前。

右下角增加分享分页按钮以及直达底部按钮

来源：Butterfly右下角悬浮菜单栏魔改指南

打开/themes/butterfly/layout/includes/rightside.pug文件，在一众when下面添加一个when。

在此文档下面的·#rightside·数组中添加share函数。

原代码：

添加share函数后的代码:

其中：在hideArray里面添加会在点击齿轮按钮之后显示，在showArray里面添加按钮会直接显示。

虽然，在主题配置文档rightside_item_order中可对右下角按钮进行排序，但由于添加了自定义按钮，为了方便，直接更改此处顺序就可以对其进行排序。

在主题配置文档的inject中的bottom项里引入下述代码，其中，该处代码必须要放在自定义分享功能js文件的前面。

在/source/js/custom.js中插入自定义分享本页js。

直达底部功能在/themes/butterfly/layout/includes/rightside.pug文件最后添加代码。

复制、粘贴、F12弹窗提醒

用f12从Butterfly右下角悬浮菜单栏魔改指南那扒来的。

由于之前已经引用了/source/js/custom.js,因此，只需要在/source/js/custom.js中插入下述代码。

控制台样式自定义

来源：博客魔改教程总结（四）

在已经建立并在主题配置文件中引用的/source/js/custom.js文件中加入下述代码。

F12控制台处可看到效果。

文章顶部添加波浪效果

来源：butterfly文章顶部添加波浪效果

打开/themes/butterfly/layout/includes/header/index.pug文件。

找到35行include ./post-info.pug，在其下添加下述代码。

在/source/css/custom.css中添加。