引入工具库
在你的主题 inject 处的 bottom 处引入此工具库,接下来自己新建一个 js 文件开始根据下面介绍的方法进行修改即可。
工具库地址:
使用unpkg链接
https://unpkg.com/xiaokang-style/butterfly/js/xkTool.js
时刻保持最新版本,但速度稍微慢一点。
使用jsdelive的链接
【https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@master/xkTool/文件夹名/xkTool.js】
需要自己寻找最新版本,手动更新版本
此地址来源于 GitHub 仓库:https://github.com/sviptzk/StaticFile_Hexo/tree/master/xkTool,请自行查找最新的文件夹,请自行检查根据仓库选择版本。
关于版本
自2020-07-06日起,版本命名才用v
+主题大版本号.
+工具库大版本号.
+工具库小版本号
主题大版本号
也就是主题版本号的第一位
工具库大版本号
也就是工具库有较大更新时,或者小版本号过多时
工具库小版本号
修复bug或者小功能,小更新
关于引入顺序
xkTool 是基于 jQuery 写的,因此引入时必须保证 jQuery 已经引入了。对于最新版本的 butterfly 主题,只需要在inject>bottom
处引入即可。
自定义的 js 文件必须引入在xkTool
之后。
创建对象
这一步是下边所有修改的基础,所有修改均由此处创建的对象进行调用方法。
1 | var xiaokang = new xkTool(param1,param2); |
其中参数param1
的取值:
留空
对 banner 图不做任何处理。
1
var xiaokang = new xkTool();
传入 url
将 banner 图设置为 url 的图片(会有个小滤镜效果)
1
2
3var xiaokang = new xkTool(
"https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg"
);传入
transparent
关键字会将 banner 图设置为透明,也就是所谓的去掉 banner 图。
1
var xiaokang = new xkTool("transparent");
参数param2
的取值:
false
默认值,表示不适用滤镜
true
使用滤镜
以下示例中xiaokang
均代表此步实例化的对象。
视觉修改
修改 Banner 图
可以通过创建对象时修改,也可以通过创建出来的对象调用changeBanner
方法。
1 | xiaokang.changeBanner(param); |
传入参数与创建对象时一致。
随机banner图
- 使用随机数方式
这种方式需要设置前部分网址和后部分网址以及随机数的范围。
1 | xiaokang.randomBanner( |
以上代码会设置的网址分别是:
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/0-min.jpg
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/1-min.jpg
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/2-min.jpg
- 自定义图片地址
这种方式适合没有规律的图片。
1 | // 添加图片,背景图片会在这里随机选取一个设置为banner |
手机状态下工具栏默认不展开
1 | xiaokang.mobileSidebar(); |
mac 代码框绿色按钮放大
1 | xiaokang.codeFull(); |
点击目录输出锚点
1 | xiaokang.consoleAnchor(); |
背景页面
1 | xiaokang.bgPage(); |
须配合 Hexo 博客之 butterfly 主题优化更换背景使用,否则无效果。
随机背景
- 使用无规律的图片
1 | xiaokang.imgList = ["这里写入你的地址,多个地址用逗号分隔"]; |
代码示例:
1 | // 设置随机背景的图片 |
如果没有设置imgList
属性而直接调用randomBg
方法,则会将背景设置为预设背景。
- 使用有规律的图片(随机数字)
1 | xiaokang.randomBg( |
以上代码会设置的网址分别是:
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/0-min.jpg
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/1-min.jpg
https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/2-min.jpg
插入元素
插入阿里 svg 社交图标
调用appendSocial
方法即可,参数传入一个对象,键为图标 id,值为点击后跳转的地址。
1 | xiaokang.appendSocial({ |
不要忘记引入阿里提供的 js 文件。
欺诈标题 v1.1 新增
1 | xiaokang.cheatTitle([leaveTitle, backTitle, leaveIcon, backIcon]); |
参数 | 描述 |
---|---|
leaveTitle | 【可选】离开博客时的标题。默认为:!!这里这里 ◕ ں ◕ |
backTitle | 【可选】回到博客时的标题。默认为:(ฅ>ω<*ฅ) 欢迎回来哦!爱你哟~ |
leaveIcon | 【可选】离开博客时的 icon。默认为小康的 icon |
backIcon | 【可选】回到博客时的 icon。默认为小康的 icon |
魔幻圆圈 v1.1 新增
1 | xiaokang.magicCirle([radius, densety, color, clearOffset]); |
参数 | 描述 |
---|---|
radius | 【可选】圆圈数量。默认为:18 |
densety | 【可选】圆圈密度。默认为:0.1 |
color | 【可选】圆圈的颜色。默认为:random |
clearOffset | 【可选】消失偏移。默认为:0.3 |
页脚养鱼 v3.1.1
1 | xiaokang.footFish(); |
全局左下角APlayer
1 | xiaokang.aplayer({ |
参数直接传入APlayer的参数即可。全部参数参照官方参数列表 即可。
全局左下角Meting
1 | xiaokang.meting("2802022828", "netease", "playlist"); |
三个参数分别表示
ID
可选为song id / playlist id / album id / search keyword
server
music platform:
netease
,tencent
,kugou
,xiami
,baidu
type
song
,playlist
,album
,search
,artist
更新记录
2020-07-07 v3.1.0版本
A 全局左下角APlayer
A 全局左下角Meting
2020-07-06 -v3.0.0版本
A 随机banner图
A 随机背景
2020-07-03 -v1.1 版本
A 欺诈标题
A 魔幻泡泡
2020-07-01-v1.0.1 版本
修复不能插入 svg 图标的 bug
2020-06-30
第一次发布