0%

为博客头像添加哔哩哔哩挂件

之前在做 bili-box 中有收集哔哩哔哩的 logo,就是 b 站主页左上角的那个 “bilibili” ,于是在 Github 搜看是否也有人在搜集这个,结果发现有人在 搜集挂件 然后作者将其用在博客头像上,看上去不错,于是就写了个 爬虫 来爬挂件,由于挂件商城中并没有多少,于是想到在每个视频的评论中爬取评论者的挂件。

昨天晚上参考该作者的 hexo-theme-beep 主题,修改了一下自定义的 js 和 css 文件,然后将挂件加到了我自己的博客头像上。

和原作者稍有不同,我的是直接点击一次就改变头像,而且会显示挂件名称,每次都随机加载图片而不是按顺序。

实际效果可以点击我博客头像来感受一下~

具体修改如下所示

  1. themes\next-overload\source\js\src\click-animation.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 点击头像更换b站挂件 */
var title = ['2018', '2018超', '2019拜年祭·典藏', '2019拜年祭·纪念', 'bilibili冬', 'bilibili夏', 'bilibili春', 'bilibili秋', 'citrus', 'FFF团', 'Free!', 'Infini-T Force', 'OVERLORD', 'S8-EDG战队', 'S8-IG战队', 'S8-RNG战队', 'S8冠军-IG', 'saber', 'vlogger', '万界仙踪', '中野一花', '中野三玖', '中野二乃', '中野五月', '中野四叶', '主站主播头像框', '买买买', '作文鬼才', '你好世界', '修仙做大牌', '全明星', '全职高手', '冯宝宝', '冰菓', '冲出太阳系', '凹凸世界', '创想无双', '刺客伍六七', '加藤惠', '动感DJ', '危险的老婆', '叛逆性百万亚瑟王', '吉尔伽美什', '吐彩虹', '哈啦咻', '哔哩哔哩活动 2018冬', '哔哩哔哩活动 2018秋', '哔哩王', '喂,看见耳朵啦', '围观群众', '国宝锦鲤', '国民老公带回家', '圣诞帽', '圣诞节快乐', '埃罗芒阿老师', '夏目友人帐', '天谕', '学霸', '守护之翼', '完美存档', '实验品家庭', '小圆', '小绿和小蓝', '小试身手', '小魔女学园', '局座', '工作细胞', '幕后交易', '年度猫片', '开封奇谈', '御坂', '快把我哥带走', '恋爱暴君', '我与B站九周年', '我家大师兄脑子有坑', '择天记', '拳皇', '放肆大学', '整装待发', '文豪', '斗破苍穹', '断幺九干不死', '无限小电视', '春原庄的管理人小姐', '晴明', '暮光幻影', '木之本樱', '梦100', '梦塔·雪谜城', '正义之士', '沈剑心', '浴室情缘', '猪年专属', '王子碰碰球', '环游世界', '画江湖之侠岚', '真香', '碧蓝之海', '神乐', '神灵凭依', '神谕法阵', '纳米核心', '脑斧帽', '脑洞大开', '至高守护', '茶啊二中', '血色苍穹', '记忆U盘', '轻车熟路', '远坂凛', '追番党', '首批购买大会员', '首批购买年度大会员', '黑白无双']
var counts = 114
var init = Math.floor(Math.random()*counts)
$(".site-author").prepend("<img class='site-avatar-plug-bilibili'/>");
$(".site-avatar-plug-bilibili").attr("src", "/images/bili-pendant/bili-" + init + ".png")
$(".site-avatar-plug-bilibili").attr("title", '点我看看有什么效果~')
$(".site-author-image").attr("title", title[init])
jQuery(document).ready(function($) {
$(".site-author-image").click(function(e) {
init = Math.floor(Math.random()*counts)
$(".site-avatar-plug-bilibili").attr("src", "/images/bili-pendant/bili-" + init + ".png")
$(".site-author-image").attr("title", title[init])
});
});
  1. themes\next-overload\source\css_custom\custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 使用bilibili头像挂件时的头像 */
.site-author-image {
display: block;
margin-top: -132px;
margin-bottom: 30px;
padding: 0;
max-width: 94px;
height: auto;
border: 1px solid #eee;
border-radius: 50%;
}

/* bilibili头像挂件 */
.site-avatar-plug-bilibili {
position: relative;
display: block;
padding: 0;
max-width: 168px;
height: auto;
z-index: 1;
pointer-events: none;
}

Welcome to my other publishing channels