小康的文档库

一个收藏文档与教程的地方!

引入工具库

在你的主题 inject 处的 bottom 处引入此工具库,接下来自己新建一个 js 文件开始根据下面介绍的方法进行修改即可。

工具库地址:

关于版本

自2020-07-06日起,版本命名才用v+主题大版本号.+工具库大版本号.+工具库小版本号

  • 主题大版本号

    也就是主题版本号的第一位

  • 工具库大版本号

    也就是工具库有较大更新时,或者小版本号过多时

  • 工具库小版本号

    修复bug或者小功能,小更新

关于引入顺序

xkTool 是基于 jQuery 写的,因此引入时必须保证 jQuery 已经引入了。对于最新版本的 butterfly 主题,只需要在inject>bottom处引入即可。

自定义的 js 文件必须引入在xkTool之后。

image-20200630223349110

创建对象

这一步是下边所有修改的基础,所有修改均由此处创建的对象进行调用方法。

1
var xiaokang = new xkTool(param1,param2);

其中参数param1的取值:

  • 留空

    对 banner 图不做任何处理。

    1
    var xiaokang = new xkTool();
  • 传入 url

    将 banner 图设置为 url 的图片(会有个小滤镜效果)

    1
    2
    3
    var 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. 使用随机数方式

这种方式需要设置前部分网址和后部分网址以及随机数的范围。

1
2
3
4
5
6
7
xiaokang.randomBanner(
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/", // 前半部分网址
"-min.jpg", // 后半部分网址
0, // 随机数开始范围
2, // 随机数结束范围
true // 是否开启滤镜 默认不开启
);

以上代码会设置的网址分别是:

  • 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. 自定义图片地址

这种方式适合没有规律的图片。

1
2
3
4
5
6
7
8
9
// 添加图片,背景图片会在这里随机选取一个设置为banner
xiaokang.bannerList = [
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/25-min.jpg",
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/23-min.jpg",
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/24-min.jpg",
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/2-min.jpg",
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/27-min.jpg",
];
xiaokang.randomBanner(true); // true为使用滤镜,不写或者false为不使用滤镜

手机状态下工具栏默认不展开

1
xiaokang.mobileSidebar();

mac 代码框绿色按钮放大

1
xiaokang.codeFull();

点击目录输出锚点

1
xiaokang.consoleAnchor();

背景页面

1
xiaokang.bgPage();

须配合 Hexo 博客之 butterfly 主题优化更换背景使用,否则无效果。

随机背景

  1. 使用无规律的图片
1
2
xiaokang.imgList = ["这里写入你的地址,多个地址用逗号分隔"];
xiaokang.randomBg(); // 调用随机背景的方法

代码示例:

1
2
3
4
5
6
7
8
9
// 设置随机背景的图片
xiaokang.imgList = [
"https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg",
"https://ae01.alicdn.com/kf/Hb4b6a83a124049819bd561439312edc96.jpg",
"https://ae01.alicdn.com/kf/H146b0a3e074a4e91b11fcce994098034y.jpg",
"https://ae03.alicdn.com/kf/H76674cd5901840be9b12f8596bb649bdP.jpg",
];
// 调用随机背景
xiaokang.randomBg();

如果没有设置imgList属性而直接调用randomBg方法,则会将背景设置为预设背景。

  1. 使用有规律的图片(随机数字)
1
2
3
4
5
6
xiaokang.randomBg(
"https://cdn.jsdelivr.net/gh/yunwanjia-cloud/banner/", // 前半部分网址
"-min.jpg", // 后半部分网址
0, // 随机数开始范围
2, // 随机数结束范围
);

以上代码会设置的网址分别是:

  • 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
2
3
4
5
6
xiaokang.appendSocial({
"icon-weizhi": "https://baidu.com",
"icon-gouwu": "https://baidu.com",
"icon-huiyuan": "https://baidu.com",
"icon-youxi": "https://baidu.com",
});

不要忘记引入阿里提供的 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
2
3
4
5
6
7
8
9
10
11
12
xiaokang.aplayer({
audio: [
{
name: "SB",
artist: "SB",
url: "http://music.163.com/song/media/outer/url?id=574566207.mp3",
cover: "SB",
},
],
fixed: true,
mini: true,
});

参数直接传入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

    第一次发布

评论